[NextJs] Sample app configuration options for 'jss create'

samples/nextjs/jss-create.js

@@ -1,3 +1,6 @@
+const fs = require('fs');
+const path = require('path');
+const chalk = require('chalk');
 const { applyNameToProject } = require('@sitecore-jss/sitecore-jss-cli/dist/create');
 
 /**
@@ -17,5 +20,91 @@ module.exports = function createJssProject(argv, nextSteps) {
 
   applyNameToProject(__dirname, argv.name, argv.hostName, 'JssNextWeb');
 
+  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('--prerender {SSG|SSR}')} : Specifies the Next.js pre-rendering form for the optional catch-all route. Default is SSG.`,
+    ]);
+  }
+
+  setFetchWith(argv.fetchWith);
+  setPrerender(argv.prerender);
+
   return nextSteps;
 };
+
+/**
+ * Sets how Sitecore data (layout, dictionary) is fetched.
+ * @param {string} [fetchWith] {REST|GraphQL} Default is REST. 
+ */
+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 defaultLsfFile = path.join(__dirname, 'src/lib/layout-service-factory.ts');
+  const graphqlLsfFile = path.join(__dirname, 'src/lib/layout-service-factory.graphql.ts');
+  const FetchWith = {
+    REST: 'rest',
+    GRAPHQL: 'graphql',
+  };
+  let value = fetchWith ? fetchWith.toLowerCase() : FetchWith.REST;
+
+  if (value !== FetchWith.REST && value !== FetchWith.GRAPHQL) {
+    console.warn(chalk.yellow(`Unsupported fetchWith value '${fetchWith}'. Using default 'REST'.`));
+    value = FetchWith.REST;
+  }
+
+  console.log(
+    chalk.cyan(`Applying ${value === FetchWith.REST ? 'REST' : 'GraphQL'} fetch...`)
+  );
+
+  switch (value) {
+    case FetchWith.REST:
+      fs.unlinkSync(graphqlDsfFile);
+      fs.unlinkSync(graphqlLsfFile);
+      break;
+
+    case FetchWith.GRAPHQL:
+      fs.unlinkSync(defaultDsfFile);
+      fs.renameSync(graphqlDsfFile, defaultDsfFile);
+      fs.unlinkSync(defaultLsfFile);
+      fs.renameSync(graphqlLsfFile, defaultLsfFile);
+      break;
+  }
+}
+
+/**
+ * Sets the Next.js pre-rendering form for the optional catch-all route.
+ * @param {string} [prerender] {SSG|SSR} Default is SSG.
+ */
+function setPrerender(prerender) {
+  const defaultRouteFile = path.join(__dirname, 'src/pages/[[...path]].tsx');
+  const ssrRouteFile = path.join(__dirname, 'src/pages/[[...path]].SSR.tsx');
+  const sitemapFile = path.join(__dirname, 'src/lib/sitemap-fetcher.ts');
+  const Prerender = {
+    SSG: 'ssg',
+    SSR: 'ssr',
+  };
+  let value = prerender ? prerender.toLowerCase() : Prerender.SSG;
+
+  if (value !== Prerender.SSG && value !== Prerender.SSR) {
+    console.warn(chalk.yellow(`Unsupported prerender value '${prerender}'. Using default 'SSG'.`));
+    value = Prerender.SSG;
+  }
+
+  console.log(
+    chalk.cyan(`Applying ${value.toUpperCase()} prerender...`)
+  );
+
+  switch (value) {
+    case Prerender.SSG:
+      fs.unlinkSync(ssrRouteFile);
+      break;
+
+    case Prerender.SSR:
+      fs.unlinkSync(defaultRouteFile);
+      fs.renameSync(ssrRouteFile, defaultRouteFile);
+      fs.unlinkSync(sitemapFile);
+      break;
+  }
+}

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

@@ -0,0 +1,9 @@
+import { DictionaryService } from '@sitecore-jss/sitecore-jss-nextjs';
+
+export class DictionaryServiceFactory {
+  create(): DictionaryService {
+    throw new Error('GraphQLDictionaryService not implemented!');
+  }
+}
+
+export const dictionaryServiceFactory = new DictionaryServiceFactory();

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

@@ -0,0 +1,14 @@
+import { DictionaryService, RestDictionaryService } from '@sitecore-jss/sitecore-jss-nextjs';
+import config from 'temp/config';
+
+export class DictionaryServiceFactory {
+  create(): DictionaryService {
+    return new RestDictionaryService({
+      apiHost: config.sitecoreApiHost,
+      apiKey: config.sitecoreApiKey,
+      siteName: config.jssAppName,
+    });
+  }
+}
+
+export const dictionaryServiceFactory = new DictionaryServiceFactory();

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

@@ -0,0 +1,9 @@
+import { LayoutService } from '@sitecore-jss/sitecore-jss-nextjs';
+
+export class LayoutServiceFactory {
+  create(): LayoutService {
+    throw new Error('GraphQLLayoutService not implemented!');
+  }
+}
+
+export const layoutServiceFactory = new LayoutServiceFactory();

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

@@ -0,0 +1,14 @@
+import { LayoutService, RestLayoutService } from '@sitecore-jss/sitecore-jss-nextjs';
+import config from 'temp/config';
+
+export class LayoutServiceFactory {
+  create(): LayoutService {
+    return new RestLayoutService({
+      apiHost: config.sitecoreApiHost,
+      apiKey: config.sitecoreApiKey,
+      siteName: config.jssAppName,
+    });
+  }
+}
+
+export const layoutServiceFactory = new LayoutServiceFactory();

samples/nextjs/src/lib/page-props-factory.ts

@@ -4,16 +4,15 @@ import {
   ComponentPropsService,
   DictionaryPhrases,
   DictionaryService,
-  RestDictionaryService,
   LayoutServiceData,
   LayoutService,
-  RestLayoutService,
   editingDataService,
 } from '@sitecore-jss/sitecore-jss-nextjs';
 import { SitecorePageProps } from 'lib/page-props';
+import { dictionaryServiceFactory } from 'lib/dictionary-service-factory';
+import { layoutServiceFactory } from 'lib/layout-service-factory';
 import { componentModule } from 'temp/componentFactory';
 import { config as packageConfig } from '../../package.json';
-import config from 'temp/config';
 
 /**
  * Extract normalized Sitecore item path from query
@@ -50,19 +49,8 @@ export class SitecorePagePropsFactory {
 
   constructor() {
     this.componentPropsService = new ComponentPropsService();
-
-    // Note we're using our standard REST-based dictionary and layout services here,
-    // but in the very near future we'll also have GraphQL-based counterparts available (for Sitecore Experience Edge).
-    this.dictionaryService = new RestDictionaryService({
-      apiHost: config.sitecoreApiHost,
-      apiKey: config.sitecoreApiKey,
-      siteName: config.jssAppName,
-    });
-    this.layoutService = new RestLayoutService({
-      apiHost: config.sitecoreApiHost,
-      apiKey: config.sitecoreApiKey,
-      siteName: config.jssAppName,
-    });
+    this.dictionaryService = dictionaryServiceFactory.create();
+    this.layoutService = layoutServiceFactory.create();
   }
 
   /**