[NextJs] Switch sample app source to GraphQL by default

docs/data/routes/docs/fundamentals/cli/en.md

@@ -37,7 +37,7 @@ jss create <your-app-name> <app-template-name>
 |`--branch`, `-b` | Configures the branch of the repository to use for creating the JSS app |  A branch name | `master` | all |
 |`--source`, `-s` | Sources the app template from a local filesystem path, instead of a GitHub repository. Use for custom JSS app templates | A local directory path |  - |  all |
 |`--proxy`, `-p` |  Specifies a HTTP proxy when downloading templates. | A local directory path |  - |  all |
-|`--fetchWith` |  Specifies how the applicaiton should fetch Sitecore layout and dictionary data. |`REST` or `GraphQL` | `REST` | nextjs |
+|`--fetchWith` |  Specifies how the applicaiton should fetch Sitecore layout and dictionary data. | `GraphQL` or `REST` | `GraphQL` | nextjs |
 |`--prerender` | Specifies the Next.js pre-rendering form for the primary `[[...path]].tsx` route. | `SSG` or `SSR` | `SSG` | nextjs |
 
 **Examples**

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

@@ -44,7 +44,7 @@ export type SitecorePageProps = {
 
 ## Page `props`
 
-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.
+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 GraphQL-based or REST-based dictionary and layout services depending on requirements.
 
 > You can choose the initial dictionary and layout data fetch method during the application creation step with the optional `fetchWith` parameter. Consult the [JSS CLI reference](/docs/fundamentals/cli) for details about `jss create`.
 
@@ -58,13 +58,13 @@ The factory retrieves the `context` locale as configured in the `i18n` entry of
 
 ### layoutData
 
-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.
+The `layoutData` prop stores `LayoutServiceData` from either the Sitecore GraphQL Edge schema (`GraphQLLayoutService`) or the Sitecore Layout Service REST API (`RestLayoutService`). 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 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.
+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
 

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

@@ -1,27 +1,27 @@
 ---
 name: switching-fetch-method
 routeTemplate: ./data/component-templates/article.yml
-title: Switching between REST and GraphQL
+title: Switching between GraphQL and REST
 ---
-# Walkthrough: Switching between REST and GraphQL for Layout and Dictionary data
+# Walkthrough: Switching between GraphQL and REST 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.
+The Next.js sample application can use either the Sitecore GraphQL Edge schema or the Sitecore Layout Service REST API 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 change the data-fetching method after project creation. 
 
-## From REST to GraphQL
+## From GraphQL to REST
 
-To switch the Next.js sample application from REST to GraphQL:
+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.graphql.ts`](https://github.com/Sitecore/jss/blob/master/samples/nextjs/src/lib/dictionary-service-factory.graphql.ts) to `\lib\`. 
-3. Rename as `dictionary-service-factory.ts`.
+1. Move or delete `\lib\dictionary-service-factory.ts` and `\lib\layout-service-factory.ts`.
+2. Download [`dictionary-service-factory.rest.ts`](https://github.com/Sitecore/jss/blob/master/samples/nextjs/src/lib/dictionary-service-factory.rest.ts) and [`layout-service-factory.rest.ts`](https://github.com/Sitecore/jss/blob/master/samples/nextjs/src/lib/layout-service-factory.rest.ts) to `\lib\`.
+3. Rename as `dictionary-service-factory.ts` and `layout-service-factory.ts` respectively.
 
-## From GraphQL to REST
+## From REST to GraphQL
 
-To switch the Next.js sample application from GraphQL to REST:
+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.ts`](https://github.com/Sitecore/jss/blob/master/samples/nextjs/src/lib/dictionary-service-factory.ts) to `\lib\`.
+1. Move or delete `\lib\dictionary-service-factory.ts` and `\lib\layout-service-factory.ts`.
+2. Download [`dictionary-service-factory.ts`](https://github.com/Sitecore/jss/blob/master/samples/nextjs/src/lib/dictionary-service-factory.ts) and [`layout-service-factory.ts`](https://github.com/Sitecore/jss/blob/master/samples/nextjs/src/lib/layout-service-factory.ts) to `\lib\`.

docs/data/routes/docs/nextjs/getting-started-nextjs/how-is-nextjs-different/en.md

@@ -8,7 +8,7 @@ The Next.js SDK for Sitecore has some key differences from other Sitecore JavaSc
 
 ## Architecture and Deployment
 * Next.js provides built-in options for build time and runtime static site generation (SSG).
-  * Out of the box, the Next.js SDK does not support Sitecore tracking or personalization with SSG.
+  * Out of the box, the Next.js SDK does not support Sitecore tracking or personalization with SSG or Sitecore GraphQL Edge.
 * The _Headless SSR Proxy_ is not required for [production deployment](/docs/nextjs/deploying-to-production/deployment-options).
   * Next.js has built-in pre-rendering.
   * Next.js has [built-in rewrite / proxying support](https://nextjs.org/docs/api-reference/next.config.js/rewrites#rewriting-to-an-external-url) 

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

@@ -116,7 +116,7 @@ To create the `MyProject` solution:
 
   > You can customize the parameters passed into the `jss create` command by this template via the `--JSSCreateParams` parameter, e.g.
   > ```
-  > dotnet new sitecore.nextjs.gettingstarted -n MyProject --JSSCreateParams "--fetchWith GraphQL --prerender SSR"
+  > dotnet new sitecore.nextjs.gettingstarted -n MyProject --JSSCreateParams "--fetchWith REST --prerender SSR"
   > ```
   > For more information on `jss create` parameters see [the JSS CLI reference](/docs/fundamentals/cli).
 

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

@@ -17,7 +17,7 @@ To quickly scaffold a JSS Next.js application with default configuration, run th
 
 ```
 npm install -g @sitecore-jss/sitecore-jss-cli
-jss create my-first-jss-app nextjs
+jss create my-first-jss-app nextjs --fetchWith REST
 cd my-first-jss-app
 jss start
 ```
@@ -43,13 +43,12 @@ To create a JSS application, you must:
 3. Run:
 
    ```
-    jss create my-first-jss-app nextjs [--fetchWith {REST|GraphQL}] [--prerender {SSG|SSR}]
+    jss create my-first-jss-app nextjs --fetchWith REST [--prerender {SSG|SSR}]
    ```
 
    The command will create the JSS Next.js application and install the required packages. 
 
-   > For more information on `jss create` see [the JSS CLI reference](/docs/fundamentals/cli).
-
+   > For more information on `jss create` see [the JSS CLI reference](/docs/fundamentals/cli). `--fetchWith REST` is required to run the application in [disconnected developer mode](/docs/fundamentals/application-modes#disconnected-developer-mode). You will be able to [switch to GraphQL](/docs/nextjs/data-fetching/switching-fetch-method) if desired when you [connect to Sitecore](#connect-to-sitecore).
 
 
    > To ensure that your new JSS application is compatible with your licensed Sitecore XP version, consult the [compatibility table](https://support.sitecore.com/kb?id=kb_article_view&sysparm_article=KB0541788).  

docs/data/routes/docs/nextjs/getting-started-nextjs/why-nextjs/en.md

@@ -27,7 +27,7 @@ The latest JSS SDK leverages many of Next.js' [features](https://nextjs.org/#fea
 - Next.js client-side routing support for Sitecore link and rich text fields.
 - Internationalization support via Sitecore language versions and Next.js internationalized routing.
 - Component-level data fetching for Sitecore-driven components.
-- Sitecore analytics and personalization support (SSR-only).
+- Sitecore analytics and personalization support (SSR with Sitecore Layout Service REST API only).
 - Support for JSS code-first workflow and mock Sitecore services.
 - A sample/starter TypeScript-enabled implementation template which demonstrates common use cases.
 - Containerized starter template for Windows-based developers.

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 [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.
+* 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/tracking-and-analytics/configuration/en.md

@@ -11,7 +11,7 @@ This topic will guide you through the steps required to enable full Sitecore tra
 
 > 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.
 
-JSS supports tracking and analytics only for server-side rendered applications using the REST fetch method. You can not currently use tracking and analytics with the Sitecore GraphQL "Edge" schema.
+JSS supports tracking and analytics only for server-side rendered applications using the REST fetch method. You can not currently use tracking and analytics with the Sitecore GraphQL Edge schema.
 
 ## Pre-requisites
 
@@ -20,7 +20,9 @@ JSS supports tracking and analytics only for server-side rendered applications u
 
 > You can choose the pre-rendering form and the fetch method when creating the project with the JSS CLI. For details, consult the [JSS CLI reference](/docs/fundamentals/cli).
 
-> If your application currently uses SSG, you can [switch the `[[..path]].tsx` route from SSG to SSR](/docs/nextjs/page-routing/switching-to-ssr).
+> If your application currently uses SSG, you can [switch to SSR](/docs/nextjs/page-routing/switching-to-ssr).
+
+> If your application currently uses the Sitecore GraphQL Edge schema, you can [switch to the Sitecore Layout Service REST API](/docs/nextjs/data-fetching/switching-fetch-method).
 
 ## Layout Service requests
 

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

@@ -116,7 +116,7 @@ export default {
         },
         {
           url: 'switching-fetch-method',
-          displayName: 'Switching between REST and GraphQL',
+          displayName: 'Switching between GraphQL and REST',
         }
       ],
     },

samples/nextjs/jss-create.js

@@ -23,7 +23,7 @@ module.exports = function createJssProject(argv, nextSteps) {
   if (!argv.fetchWith || !argv.prerender) {
     nextSteps.push(
       `* Did you know you can customize the Next.js sample app using ${chalk.green('jss create')} parameters?`,
-      `*  ${chalk.green('--fetchWith {REST|GraphQL}')} : Specifies how Sitecore data (layout, dictionary) is fetched. Default is REST.`,
+      `*  ${chalk.green('--fetchWith {GraphQL|REST}')} : Specifies how Sitecore data (layout, dictionary) is fetched. Default is GraphQL.`,
       `*  ${chalk.green('--prerender {SSG|SSR}')} : Specifies the Next.js pre-rendering form for the optional catch-all route. Default is SSG.`,
     );
   }
@@ -36,39 +36,39 @@ module.exports = function createJssProject(argv, nextSteps) {
 
 /**
  * Sets how Sitecore data (layout, dictionary) is fetched.
- * @param {string} [fetchWith] {REST|GraphQL} Default is REST. 
+ * @param {string} [fetchWith] {GraphQL|REST} Default is GraphQL. 
  */
 function setFetchWith(fetchWith) {
   const defaultDsfFile = path.join(__dirname, 'src/lib/dictionary-service-factory.ts');
-  const graphqlDsfFile = path.join(__dirname, 'src/lib/dictionary-service-factory.graphql.ts');
+  const restDsfFile = path.join(__dirname, 'src/lib/dictionary-service-factory.rest.ts');
   const defaultLsfFile = path.join(__dirname, 'src/lib/layout-service-factory.ts');
-  const graphqlLsfFile = path.join(__dirname, 'src/lib/layout-service-factory.graphql.ts');
+  const restLsfFile = path.join(__dirname, 'src/lib/layout-service-factory.rest.ts');
   const FetchWith = {
-    REST: 'rest',
     GRAPHQL: 'graphql',
+    REST: 'rest',
   };
-  let value = fetchWith ? fetchWith.toLowerCase() : FetchWith.REST;
+  let value = fetchWith ? fetchWith.toLowerCase() : FetchWith.GRAPHQL;
 
   if (value !== FetchWith.REST && value !== FetchWith.GRAPHQL) {
-    console.warn(chalk.yellow(`Unsupported fetchWith value '${fetchWith}'. Using default 'REST'.`));
-    value = FetchWith.REST;
+    console.warn(chalk.yellow(`Unsupported fetchWith value '${fetchWith}'. Using default 'GraphQL'.`));
+    value = FetchWith.GRAPHQL;
   }
 
   console.log(
-    chalk.cyan(`Applying ${value === FetchWith.REST ? 'REST' : 'GraphQL'} fetch...`)
+    chalk.cyan(`Applying ${value === FetchWith.GRAPHQL ? 'GraphQL' : 'REST'} fetch...`)
   );
 
   switch (value) {
-    case FetchWith.REST:
-      fs.unlinkSync(graphqlDsfFile);
-      fs.unlinkSync(graphqlLsfFile);
+    case FetchWith.GRAPHQL:
+      fs.unlinkSync(restDsfFile);
+      fs.unlinkSync(restLsfFile);
       break;
 
-    case FetchWith.GRAPHQL:
+    case FetchWith.REST:
       fs.unlinkSync(defaultDsfFile);
-      fs.renameSync(graphqlDsfFile, defaultDsfFile);
+      fs.renameSync(restDsfFile, defaultDsfFile);
       fs.unlinkSync(defaultLsfFile);
-      fs.renameSync(graphqlLsfFile, defaultLsfFile);
+      fs.renameSync(restLsfFile, defaultLsfFile);
       break;
   }
 }

samples/nextjs/src/lib/dictionary-service-factory.graphql.ts → samples/nextjs/src/lib/dictionary-service-factory.rest.ts

@@ -1,10 +1,10 @@
-import { DictionaryService, GraphQLDictionaryService } from '@sitecore-jss/sitecore-jss-nextjs';
+import { DictionaryService, RestDictionaryService } from '@sitecore-jss/sitecore-jss-nextjs';
 import config from 'temp/config';
 
 export class DictionaryServiceFactory {
   create(): DictionaryService {
-    return new GraphQLDictionaryService({
-      endpoint: config.graphQLEndpoint,
+    return new RestDictionaryService({
+      apiHost: config.sitecoreApiHost,
       apiKey: config.sitecoreApiKey,
       siteName: config.jssAppName,
     });

samples/nextjs/src/lib/dictionary-service-factory.ts

@@ -1,10 +1,10 @@
-import { DictionaryService, RestDictionaryService } from '@sitecore-jss/sitecore-jss-nextjs';
+import { DictionaryService, GraphQLDictionaryService } from '@sitecore-jss/sitecore-jss-nextjs';
 import config from 'temp/config';
 
 export class DictionaryServiceFactory {
   create(): DictionaryService {
-    return new RestDictionaryService({
-      apiHost: config.sitecoreApiHost,
+    return new GraphQLDictionaryService({
+      endpoint: config.graphQLEndpoint,
       apiKey: config.sitecoreApiKey,
       siteName: config.jssAppName,
     });

samples/nextjs/src/lib/layout-service-factory.graphql.ts → samples/nextjs/src/lib/layout-service-factory.rest.ts

@@ -1,10 +1,10 @@
-import { LayoutService, GraphQLLayoutService } from '@sitecore-jss/sitecore-jss-nextjs';
+import { LayoutService, RestLayoutService } from '@sitecore-jss/sitecore-jss-nextjs';
 import config from 'temp/config';
 
 export class LayoutServiceFactory {
   create(): LayoutService {
-    return new GraphQLLayoutService({
-      endpoint: config.graphQLEndpoint,
+    return new RestLayoutService({
+      apiHost: config.sitecoreApiHost,
       apiKey: config.sitecoreApiKey,
       siteName: config.jssAppName,
     });

samples/nextjs/src/lib/layout-service-factory.ts

@@ -1,10 +1,10 @@
-import { LayoutService, RestLayoutService } from '@sitecore-jss/sitecore-jss-nextjs';
+import { LayoutService, GraphQLLayoutService } from '@sitecore-jss/sitecore-jss-nextjs';
 import config from 'temp/config';
 
 export class LayoutServiceFactory {
   create(): LayoutService {
-    return new RestLayoutService({
-      apiHost: config.sitecoreApiHost,
+    return new GraphQLLayoutService({
+      endpoint: config.graphQLEndpoint,
       apiKey: config.sitecoreApiKey,
       siteName: config.jssAppName,
     });