[Docs][NextJs] Account for new fetchWith and prerender configuration options for 'jss create'

docs/data/routes/docs/nextjs/data-fetching/data-services/en.md

@@ -13,14 +13,20 @@ JSS Next.js applications support both forms of pre-rendering provided by Next.js
 
 Next.js uses different data fetching strategies for each pre-rendering form. 
 
+>  See the Next.js documentation on [Data Fetching](https://nextjs.org/docs/basic-features/data-fetching) for more information about Next.js data fetching functions, and the `context` argument.
+
 ## JSS Next.js data fetching
 
 The JSS Next.js sample application includes usage examples for both data fetching strategies available in Next.js, as follows: 
 
-* `src/pages/[[path]].tsx` implements `GetStaticPaths` and `GetStaticProps` (SSG).
-* `src/page_examples/[[path]].SSR.tsx` implements `GetServerSideProps` (SSR).
+* [`src/pages/[[..path]].tsx`](https://github.com/Sitecore/jss/blob/master/samples/nextjs/src/pages/%5B%5B%2E%2E%2Epath%5D%5D.tsx) implements `GetStaticPaths` and `GetStaticProps` (SSG).
+* [`src/pages/[[..path]].SSR.tsx`](https://github.com/Sitecore/jss/blob/master/samples/nextjs/src/pages/%5B%5B%2E%2E%2Epath%5D%5D.SSR.tsx) implements `GetServerSideProps` (SSR).
 
->  See the Next.js documentation on [Data Fetching](https://nextjs.org/docs/basic-features/data-fetching) for more information about Next.js data fetching functions, and the `context` argument.
+> You can choose the initial `[[..path]].tsx` pre-rendering form on create with the optional `prerender` parameter. SSG is used by default if you omit the parameter. For example, [with `jss create`](/docs/nextjs/getting-started-nextjs/walkthrough-jsscreate):
+>
+> ```
+> jss create my-first-jss-app nextjs --prerender {SSG|SSR}
+> ```
 
 In the preceding examples, the implementations of `GetStaticProps`  and   `GetServerSideProps` leverage the `SitecorePagePropsFactory`. See the `SitecorePagePropsFactory` definition in [`src/lib/page-props-factory.ts`](https://github.com/Sitecore/jss/blob/master/samples/nextjs/src/lib/page-props-factory.ts).
 
@@ -42,23 +48,31 @@ export type SitecorePageProps = {
 
 ## Page `props`
 
-To prepare the page `props`, the `SitecorePagePropsFactory` uses the [Layout Service](/docs/fundamentals/services/layout-service).and the [Dictionary Service](/docs/fundamentals/services/dictionary-service). 
+To prepare the page `props`, the `SitecorePagePropsFactory` uses the [Layout Service API](/docs/fundamentals/services/layout-service) and the [Dictionary Service API](/docs/fundamentals/services/dictionary-service). You may use either the REST-based or GraphQL-based dictionary and layout services depending on requirements.
 
-> If you need additional data for every page, you should fetch it inside the `SitecorePagePropsFactory` and return it together with the other properties.
+> You can choose the initial dictionary and layout data fetch method on create with the optional `fetchWith` parameter. REST is used by default if you omit the parameter. For example, [with `jss create`](/docs/nextjs/getting-started-nextjs/walkthrough-jsscreate):
+>
+> ```
+> jss create my-first-jss-app nextjs --fetchWith {REST|GraphQL}
+> ```
+> 
+> You can also [switch the fetch method](/docs/nextjs/data-fetching/switching-fetch-method).
 
-> We are currently using standard REST-based dictionary and layout services. For Sitecore Experience Edge, we will soon provide GraphQL-based implementations.
+> If you need additional data for every page, you should fetch it inside the `SitecorePagePropsFactory` and return it together with the other properties.
 
 ### locale
 
 The factory retrieves the `context` locale as configured in the `i18n` entry of `next.config.js`. Otherwise, it uses the `config.language` defined in `package.json`.
 
 ### layoutData
 
-The `layoutData` prop stores `LayoutServiceData` from the Sitecore Layout Service provided by a `RestLayoutService` instance. The `RestLayoutServices` fetches `LayoutServiceData` using the Sitecore Layout Service REST API using Axios as the default data fetcher. In SSR mode, it will set up the required request and response `headers` using the attributes `context.req` and `context.res` to provide the ability to use [Sitecore Tracking](/docs/fundamentals/services/tracking#jss-tracking).
+The `layoutData` prop stores `LayoutServiceData` from either the Sitecore Layout Service REST API (`RestLayoutService`) or the Sitecore GraphQL "Edge" schema (`GraphQLLayoutService`). See [Layout Service API reference](/docs/fundamentals/services/layout-service) for more information.
+
+In SSR context, it will send the `context.req` and `context.res` to provide the ability to use [Sitecore Tracking & Analytics](/docs/nextjs/tracking-and-analytics/overview).
 
 ### dictionary
 
-The `dictionary` prop contains `DictionaryPhrases` from the Sitecore Dictionary Service. A `RestDictionaryService` instance fetches dictionary data for the given language using the Sitecore Dictionary Service REST API. The `RestDictionaryService` uses Axios as the default data fetcher. By default, `caching` is enabled, and the `cacheTimeout` is 60 sec. You can disable/enable caching using the `cacheEnabled` property, and you can customize cache timeout using the `cacheTimeout` property.
+The `dictionary` prop contains `DictionaryPhrases` from either the Sitecore Dictionary Service REST API (`RestDictionaryService`) or the Sitecore GraphQL "Edge" schema (`GraphQLDictionaryService`). See [Dictionary Service API reference](/docs/fundamentals/services/dictionary-service) for more information.
 
 ### componentProps
 
@@ -72,4 +86,4 @@ If the Layout Service returns a `404` status for our page route, it will update
 
 ## Experience Editor (Next.js Preview Context)
 
-While working in the Experience Editor, the sample Next.js application is in [preview](https://nextjs.org/docs/advanced-features/preview-mode)  mode. The `SitecorePagePropsFactory` uses the `editingDataService`. The service uses `layoutData`,  `dictionary`, and `language` data sent with the editing request in `context.previewData`.
+While working in the Experience Editor, the sample Next.js application is in [preview mode](https://nextjs.org/docs/advanced-features/preview-mode). In this case the `SitecorePagePropsFactory` uses the `editingDataService` to retrieve `layoutData`, `dictionary`, and `language` data sent with the editing request. See [Experience Editor Integration Architecture](/docs/nextjs/experience-editor/architecture) for more information.

docs/data/routes/docs/nextjs/data-fetching/getStaticPaths/en.md

@@ -5,9 +5,7 @@ title: getStaticPaths and the Sitemap Service
 ---
 # getStaticPaths and the Sitemap Service
 
-
-
-Next.js provides the ability to generate pages with dynamic routes. 
+Next.js provides the ability to generate static pages with dynamic routes. 
 
 If a page has [dynamic routes](https://nextjs.org/docs/routing/dynamic-routes) and uses [getStaticProps](https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation), you can define a list of paths that you want pre-render to HTML at build time.
 

docs/data/routes/docs/nextjs/data-fetching/switching-fetch-method/en.md

@@ -0,0 +1,28 @@
+---
+name: switching-fetch-method
+routeTemplate: ./data/component-templates/article.yml
+title: Switching between REST and GraphQL
+---
+# Walkthrough: Switching between REST and GraphQL for Layout and Dictionary data
+
+The Next.js sample application can use either the Sitecore Layout Service REST API or the Sitecore GraphQL "Edge" schema to fetch layout and dictionary data.
+
+> See [Layout Service API reference](/docs/fundamentals/services/layout-service) and [Dictionary Service API reference](/docs/fundamentals/services/dictionary-service) for more information.
+
+You can choose the initial dictionary and layout data fetch method on create with the optional `fetchWith` parameter. REST is used by default if you omit the parameter. For example, [with `jss create`](/docs/nextjs/getting-started-nextjs/walkthrough-jsscreate):
+
+```
+jss create my-first-jss-app nextjs --fetchWith {REST|GraphQL}
+```
+
+However, you may wish to switch the fetch method after creation.
+
+To switch the Next.js sample application from REST to GraphQL:
+
+1. Move or delete `\lib\dictionary-service-factory.ts`
+2. Download [`dictionary-service-factory.graphql.ts`](https://github.com/Sitecore/jss/blob/master/samples/nextjs/src/lib/dictionary-service-factory.graphql.ts) to `\lib\` and rename as `dictionary-service-factory.ts`
+
+To switch the Next.js sample application from GraphQL to REST:
+
+1. Move or delete `\lib\dictionary-service-factory.ts`
+2. Download [`dictionary-service-factory.ts`](https://github.com/Sitecore/jss/blob/master/samples/nextjs/src/lib/dictionary-service-factory.ts) to `\lib\`

docs/data/routes/docs/nextjs/deploying-to-production/export/en.md

@@ -9,6 +9,7 @@ You can serve your JSS Next.js application as static HTML files using any static
 
 > Static HTML export does not support: 
 >
+> * Server-side Rendered (SSR) pages (using `getServerSideProps`).
 > * Internationalized routing.
 > * Request rewrites.
 > * Visitor identification. 

docs/data/routes/docs/nextjs/getting-started-nextjs/walkthrough-jsscreate/en.md

@@ -13,7 +13,7 @@ We recommend this approach for Sitecore developers who use the [code-first devel
 
 ## TL;DR
 
-To quickly scaffold a JSS Next.js application, run the following commands in a terminal:
+To quickly scaffold a JSS Next.js application with default configuration, run the following commands in a terminal:
 
 ```
 npm install -g @sitecore-jss/sitecore-jss-cli
@@ -39,10 +39,15 @@ To create a JSS application, you must:
 3. Run:
 
    ```
-    jss create my-first-jss-app nextjs
+    jss create my-first-jss-app nextjs [--fetchWith {REST|GraphQL}] [--prerender {SSG|SSR}]
    ```
 
    The command will create the JSS Next.js application and install the required packages. 
+
+   You can use the optional parameters to customize the application:
+
+   * `--fetchWith {REST|GraphQL}`: Specifies how Sitecore data (layout, dictionary) is fetched. Default is REST.
+   * `--prerender {SSG|SSR}`: Specifies the Next.js pre-rendering form for the primary `[[...path]].tsx` route. Default is SSG.
 
 ## Run your application
 
@@ -64,6 +69,7 @@ To connect your application to Sitecore, you must:
 
 1. [Setup JSS Server Components](/docs/client-frameworks/getting-started/jss-server-install).
 2. [Deploy the application to a Sitecore environment](/docs/client-frameworks/getting-started/app-deployment).
+3. [Connect to the Experience Editor](/docs/nextjs/experience-editor/walkthrough).
 
 
 

docs/data/routes/docs/nextjs/page-routing/jss-routes/en.md

@@ -18,7 +18,7 @@ Here's a high-level overview of the routing process.
 In the diagram above, you can see how the Next.js route is applied to Sitecore JSS.
 
 * The `[[...path]].tsx` Next.js route will catch any path and pass this information along to `getStaticProps` or `getServerSideProps` on the `context` object (as a tokenized array).
-* The page props factory uses the path information to construct a normalized Sitecore item path. It then makes a request to the JSS [Layout Service](/docs/fundamentals/services/layout-service) to fetch layout data for the item.
+* The *Page Props Factory* uses the path information to construct a normalized Sitecore item path. It then makes a request to the [Sitecore Layout Service REST API or Sitecore GraphQL "Edge" schema](/docs/nextjs/data-fetching/data-services#page-props) to fetch layout data for the item.
 
 ## i18n Routing
 

docs/data/routes/docs/nextjs/page-routing/switching-to-ssr/en.md

@@ -1,17 +1,30 @@
 ---
 name: switching-to-ssr
 routeTemplate: ./data/component-templates/article.yml
-title: Switching to SSR
+title: Switching between SSG and SSR
 ---
-# Walkthrough: Switching to Server-Side Rendering (SSR)
+# Walkthrough: Switching between Static Site Generation (SSG) and Server-Side Rendering (SSR)
 
-By default, the Next.js sample application uses a route optimized for Static Site Generation (SSG). However, we have also provided a working SSR route you can use: [`\pages_examples\[[..path]].SSR.tsx`](https://github.com/Sitecore/jss/blob/master/samples/nextjs/src/pages_examples/%5B%5B%2E%2E%2Epath%5D%5D.SSR.tsx).
+The Next.js sample application `[[..path]].tsx` route can be optimized for either Static Site Generation (SSG) or Server-Side Rendering (SSR).
 
-This file may be used as a starter for SSR routes in Next.js hybrid (both SSR & SSG) applications or may be used to switch the Next.js sample application to full SSR.
+You can choose the initial pre-rendering form on create with the optional `prerender` parameter. SSG is used by default if you omit the parameter. For example, [with `jss create`](/docs/nextjs/getting-started-nextjs/walkthrough-jsscreate):
 
-> See [Next.js documentation](https://nextjs.org/docs/basic-features/pages#two-forms-of-pre-rendering) to learn more about SSG, SSR, and hybrid modes of pre-rendering.
+```
+jss create my-first-jss-app nextjs --prerender {SSG|SSR}
+```
 
-To switch the Next.js sample application to full SSR:
+However, you may wish to switch the pre-rendering form after creation or reference both for Next.js hybrid (both SSR & SSG) applications.
 
-1. Rename the `\pages\[[..path]].tsx` to `[[..path]].SSG.tsx` and move to `\pages_examples\`
-2. Rename the `\pages_examples\[[..path]].SSR.tsx` to `\pages_examples\[[..path]].tsx` and move to `\pages\`
+> See [Next.js documentation](https://nextjs.org/docs/basic-features/pages#two-forms-of-pre-rendering) to learn more about SSG, SSR, and hybrid forms of pre-rendering.
+
+To switch the Next.js sample application from SSG to SSR:
+
+1. Move or delete `\pages\[[..path]].tsx`
+2. Download [`[[..path]].SSR.tsx`](https://github.com/Sitecore/jss/blob/master/samples/nextjs/src/pages/%5B%5B%2E%2E%2Epath%5D%5D.SSR.tsx) to `\pages\` and rename as `[[..path]].tsx`
+3. Delete `\lib\sitemap-fetcher.ts` (optional)
+
+To switch the Next.js sample application from SSR to SSG:
+
+1. Move or delete `\pages\[[..path]].tsx`
+2. Download [`[[..path]].tsx`](https://github.com/Sitecore/jss/blob/master/samples/nextjs/src/pages/%5B%5B%2E%2E%2Epath%5D%5D.tsx) to `\pages\`
+3. Download [`sitemap-fetcher.ts`](https://github.com/Sitecore/jss/blob/master/samples/nextjs/src/lib/sitemap-fetcher.ts) to `\lib\`

docs/data/routes/docs/nextjs/tracking-and-analytics/configuration/en.md

@@ -9,17 +9,31 @@ This topic will guide you through the steps required to enable full Sitecore tra
 
 > See [Sitecore Experience Platform documentation](https://doc.sitecore.com/developers/101/sitecore-experience-platform/en/web-tracking.html) for more information about tracking and analytics.
 
-Note this is different than *client-side tracking* via the JSS tracking API, which is possible for *both Static Site Generation (SSG) and Server-side Rendering (SSR)*. Please see the [JSS Tracking](/docs/fundamentals/services/tracking) page for details.
+> Note this is different than *client-side tracking* via the JSS tracking API, which is possible for *both Static Site Generation (SSG) and Server-side Rendering (SSR)*. Please see the [JSS Tracking](/docs/fundamentals/services/tracking) page for details.
 
 ## Next.js application
 
 ### SSR only
 
-You must use a Next.js SSR page route. An example SSR route is included with the Next.js sample app. See [this page](/docs/nextjs/page-routing/switching-to-ssr) for details.
+You must use a Next.js SSR page route. You can choose the initial pre-rendering form of `[[..path]].tsx` on create with the optional `prerender` parameter. SSG is used by default if you omit the parameter. For example, [with `jss create`](/docs/nextjs/getting-started-nextjs/walkthrough-jsscreate):
+
+```
+jss create my-first-jss-app nextjs --prerender SSR
+```
+
+You can also [switch the `[[..path]].tsx` route from SSG to SSR](/docs/nextjs/page-routing/switching-to-ssr).
 
 ### Layout Service requests
 
-[Sitecore Layout Service](/docs/fundamentals/services/layout-service) requests must:
+You must use the [Sitecore Layout Service REST API](/docs/fundamentals/services/layout-service). You can choose the initial fetch method on create with the optional `fetchWith` parameter. REST is used by default if you omit the parameter. For example, [with `jss create`](/docs/nextjs/getting-started-nextjs/walkthrough-jsscreate):
+
+```
+jss create my-first-jss-app nextjs --fetchWith REST
+```
+
+> Tracking and Analytics is currently not supported with the Sitecore GraphQL "Edge" schema.
+
+Sitecore Layout Service requests must:
 
 1. have tracking enabled (see [`tracking` parameter](/docs/fundamentals/services/layout-service#using-the-layout-service)), and
 2. perform [header passing](/docs/nextjs/tracking-and-analytics/overview#header-passing)

docs/data/routes/docs/nextjs/tracking-and-analytics/overview/en.md

@@ -5,11 +5,11 @@ title: Overview and architecture
 ---
 # Tracking & Analytics Overview and Architecture
 
-Full Sitecore analytics and personalization functionality is possible with Next.js on any SSR (Server-side Rendered) page route.
+Full Sitecore analytics and personalization functionality is possible with Next.js on any SSR (Server-side Rendered) page route using the [Sitecore Layout Service REST API](/docs/fundamentals/services/layout-service).
 
-> Note [client-side JSS tracking](/docs/fundamentals/services/tracking) is possible for *both SSG and SSR*.
+> See [Sitecore Experience Platform documentation](https://doc.sitecore.com/developers/101/sitecore-experience-platform/en/web-tracking.html) for more information about tracking and analytics.
 
-> By default, the Next.js sample application uses a route optimized for SSG, but can be switched to SSR. See [here](/docs/nextjs/page-routing/switching-to-ssr) for steps.
+> Note this is different than *client-side tracking* via the JSS tracking API, which is possible for *both Static Site Generation (SSG) and Server-side Rendering (SSR)*. Please see the [JSS Tracking](/docs/fundamentals/services/tracking) page for details.
 
 For Sitecore analytics and personalization to work with JSS, the appropriate HTTP headers must be present at the browser and Layout Service.
 
@@ -19,7 +19,7 @@ With Next.js, this is accomplished by passing specific HTTP headers between the
 
 ## Header Passing
 
-Here's how header passing works during a page request/response cycle. The flow is based on using the SSR page route example `pages_examples\[[...path]].SSR.tsx` that comes with the Next.js sample application.
+Here's how header passing works during a page request/response cycle. The flow is based on using the [SSR `[[..path]].tsx`](https://github.com/Sitecore/jss/blob/master/samples/nextjs/src/pages/%5B%5B%2E%2E%2Epath%5D%5D.SSR.tsx) route example that comes with the Next.js sample application.
 
 <img src="/assets/img/nextjs-sitecore-analytics.svg" alt="Next.js Sitecore Analytics" />
 

docs/src/app/components/Navigation/nextjs.js

@@ -82,7 +82,7 @@ export default {
         },
         {
           url: 'switching-to-ssr',
-          displayName: 'Switching to SSR',
+          displayName: 'Switching between SSG and SSR',
         },
         //{
         //  url: 'error-routes',
@@ -110,6 +110,10 @@ export default {
           url: 'component-level-data-fetching',
           displayName: 'Component-level data fetching',
         },
+        {
+          url: 'switching-fetch-method',
+          displayName: 'Switching between REST and GraphQL',
+        }
       ],
     },
     {