create-sitecore-jss 20.0.0-canary.78

package/dist/templates/nextjs/tsconfig.json

@@ -0,0 +1,42 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "components/*": ["src/components/*"],
+      "lib/*": ["src/lib/*"],
+      "temp/*": ["src/temp/*"],
+      "assets/*": ["src/assets/*"]
+    },
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "strictFunctionTypes": false,
+    "forceConsistentCasingInFileNames": true,
+    "downlevelIteration": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "allowSyntheticDefaultImports": true,
+    "noImplicitReturns": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

package/dist/templates/nextjs/tsconfig.scripts.json

@@ -0,0 +1,6 @@
+{
+	"extends": "./tsconfig.json",
+	"compilerOptions": {
+		"module": "commonjs"
+	}
+}

package/dist/templates/nextjs-styleguide/data/component-content/Styleguide/ContentReuse/LoremIpsumContentBlock/en.yml

@@ -0,0 +1,9 @@
+# We can reuse this content definition in multiple places because it:
+# - has an ID
+# - is under component-content (normally) or content
+# Reuse is accomplished by referencing the content by ID in a route definition.
+id: lorem-ipsum-content-block
+componentName: ContentBlock
+displayName: Lorem Ipsum Dolor Sit Amet
+fields:
+  content: <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque felis mauris, pretium id neque vitae, vulputate pellentesque tortor. Mauris hendrerit dolor et ipsum lobortis bibendum non finibus neque. Morbi volutpat aliquam magna id posuere. Duis commodo cursus dui, nec interdum velit congue nec. Aliquam erat volutpat. Aliquam facilisis, sapien quis fringilla tincidunt, magna nulla feugiat neque, a consectetur arcu orci eu augue.</p>

package/dist/templates/nextjs-styleguide/data/content/Styleguide/ContentListField/Item1/en.yml

@@ -0,0 +1,6 @@
+id: styleguide-content-list-field-shared-1
+displayName: Styleguide Content List Item 1 (Shared)
+# Template defines the available fields. See /sitecore/definitions/templates/Styleguide-ContentList-Template.sitecore.js
+template: <%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-ContentList-Item-Template
+fields:
+  textField: ContentList Demo (Shared) Item 1 Text Field

package/dist/templates/nextjs-styleguide/data/content/Styleguide/ContentListField/Item2/en.yml

@@ -0,0 +1,6 @@
+id: styleguide-content-list-field-shared-2
+displayName: Styleguide Content List Item 2 (Shared)
+# Template defines the available fields. See /sitecore/definitions/templates/Styleguide-ContentList-Template.sitecore.js
+template: <%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-ContentList-Item-Template
+fields:
+  textField: ContentList Demo (Shared) Item 2 Text Field

package/dist/templates/nextjs-styleguide/data/content/Styleguide/ItemLinkField/Item1/en.yml

@@ -0,0 +1,6 @@
+id: styleguide-item-link-field-shared-1
+displayName: Styleguide Item Link Item 1 (Shared)
+# Template defines the available fields. See /sitecore/definitions/templates/Styleguide-ItemLink-Template.sitecore.js
+template: <%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-ItemLink-Item-Template
+fields:
+  textField: ItemLink Demo (Shared) Item 1 Text Field

package/dist/templates/nextjs-styleguide/data/content/Styleguide/ItemLinkField/Item2/en.yml

@@ -0,0 +1,6 @@
+id: styleguide-item-link-field-shared-2
+displayName: Styleguide Item Link Item 2 (Shared)
+# Template defines the available fields. See /sitecore/definitions/templates/Styleguide-ItemLink-Template.sitecore.js
+template: <%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-ItemLink-Item-Template
+fields:
+  textField: ItemLink Demo (Shared) Item 2 Text Field

package/dist/templates/nextjs-styleguide/data/dictionary/en.yml

@@ -0,0 +1,4 @@
+styleguide-sample: This is a dictionary entry in English as a demonstration
+Documentation: Documentation
+Styleguide: Styleguide
+GraphQL: GraphQL

package/dist/templates/nextjs-styleguide/data/dictionary/{{language}}.yml

@@ -0,0 +1,4 @@
+styleguide-sample: '[<%- language %>] This is a dictionary entry in English as a demonstration'
+Documentation: '[<%- language %>] Documentation'
+Styleguide: '[<%- language %>] Styleguide'
+GraphQL: '[<%- language %>] GraphQL'

package/dist/templates/nextjs-styleguide/data/routes/en.yml

@@ -0,0 +1,63 @@
+# This is a route layout definition.
+# The route definition defines which Sitecore components are present on a route,
+# what their content data is, and which _placeholder_ they are placed in.
+
+# This particular route definition is for the home route - '/', so it defines the
+# components shown on the initial page of the app.
+
+# You may use equivalent JSON files instead of YAML if you prefer;
+# however YAML is simpler to read and allows comments like this one :)
+
+# Setting an ID is optional, but it will allow referring to this item in internal links
+# the ID can be a app-wide-unique string, or a GUID value.
+id: home-page
+
+# Route-level fields are appropriate for page level data like <title> contents
+# Define route level fields in /sitecore/definitions/routes.sitecore
+fields:
+  pageTitle: Welcome to Sitecore JSS
+# Define the page layout starting at the root placeholder - in this case, '<%- helper.getAppPrefix(appPrefix, appName) %>jss-main'
+# root placeholder names are defined in the package.json config section (required for Sitecore deployment)
+placeholders:
+  <%- helper.getAppPrefix(appPrefix, appName) %>jss-main:
+    - componentName: ContentBlock
+      fields:
+        heading: Welcome to Sitecore JSS
+        # to author content in YAML, use _multi-line values_ (prefixed with | + endline)
+        # as long as the same indent is preserved at the beginning of each line, no escaping
+        # is required at all in the value, making it easy to read
+        content: |
+          <p>Thanks for using JSS!! Here are some resources to get you started:</p>
+
+          <h3><a href="https://jss.sitecore.com" rel="noopener noreferrer">Documentation</a></h3>
+          <p>The official JSS documentation can help you with any JSS task from getting started to advanced techniques.</p>
+
+          <h3><a href="/styleguide">Styleguide</a></h3>
+          <p>The JSS styleguide is a living example of how to use JSS, hosted right in this app.
+          It demonstrates most of the common patterns that JSS implementations may need to use,
+          as well as useful architectural patterns.</p>
+
+          <h3><a href="/graphql">GraphQL</a></h3>
+          <p>JSS features integration with the Sitecore GraphQL API to enable fetching non-route data from Sitecore - or from other internal backends as an API aggregator or proxy.
+          This route is a living example of how to use an integrate with GraphQL data in a JSS app.</p>
+
+          <div class="alert alert-dark">
+            <h4>This app is a boilerplate</h4>
+            <p>The JSS samples are a boilerplate, not a library. That means that any code in this app is meant for you to own and customize to your own requirements.</p>
+            <p>Want to change the lint settings? Do it. Want to read manifest data from a MongoDB database? Go for it. This app is yours.</p>
+          </div>
+
+          <div class="alert alert-dark">
+            <h4>How to start with an empty app</h4>
+            <p>To start with a fresh app with no boilerplate, run <code>jss create {name of your app} nextjs --empty</code>. Note, disconnected mode is not supported this way</p>
+            <p>To remove all of the default sample content (the Styleguide and GraphQL routes) and start out with an empty JSS app:</p>
+            <ol>
+              <li>Delete <code>/data/dictionary/*.yml</code></li>
+              <li>Delete <code>/data/routes/styleguide</code> and <code>/data/routes/graphql</code></li>
+              <li>Delete <code>/data/content/Styleguide</code></li>
+              <li>Delete <code>/data/component-content/Styleguide</code></li>
+              <li>Delete <code>/sitecore/definitions/components/Styleguide*</code>, <code>/sitecore/definitions/templates/Styleguide*</code>, and <code>/sitecore/definitions/components/GraphQL*</code></li>
+              <li>Delete <code>graphql-let</code> command from <code>bootstrap</code> npm command in <code>package.json</code> until you create <code>.graphql</code> files</li>
+              <li>Delete <code>/src/components/*</code></li>
+            </ol>
+          </div>

package/dist/templates/nextjs-styleguide/data/routes/graphql/en.yml

@@ -0,0 +1,27 @@
+fields:
+  pageTitle: GraphQL | Sitecore JSS
+placeholders:
+  <%- helper.getAppPrefix(appPrefix, appName) %>jss-main:
+    - componentName: ContentBlock
+      fields:
+        heading: Using GraphQL with JSS
+        content: |
+          <p>This is a live example of using Integrated GraphQL and Connected GraphQL with a JSS app.
+          For more information on GraphQL use in JSS, please see <a href="https://jss.sitecore.com" target="_blank" rel="noopener noreferrer">the documentation</a>.</p>
+    - componentName: GraphQL-Layout
+      placeholders:
+        <%- helper.getAppPrefix(appPrefix, appName) %>jss-graphql-layout:
+          - componentName: GraphQL-IntegratedDemo
+            fields:
+              sample1: Hello integrated GraphQL world!
+              sample2:
+                href: https://www.sitecore.com
+                target: _blank
+                text: GraphQL lets you get structured field data too
+          - componentName: GraphQL-ConnectedDemo
+            fields:
+              sample1: Hello connected GraphQL world!
+              sample2:
+                href: https://www.sitecore.com
+                target: _blank
+                text: GraphQL lets you get structured field data too

package/dist/templates/nextjs-styleguide/data/routes/graphql/sample-1/en.yml

@@ -0,0 +1,9 @@
+fields:
+  pageTitle: Sample 1 Page Title
+placeholders:
+  <%- helper.getAppPrefix(appPrefix, appName) %>jss-main:
+    - componentName: ContentBlock
+      fields:
+        heading: GraphQL Sample 1
+        content: |
+          <p>A child route here to illustrate the power of GraphQL queries. <a href="/graphql">Back to GraphQL route</a></p>

package/dist/templates/nextjs-styleguide/data/routes/graphql/sample-2/en.yml

@@ -0,0 +1,9 @@
+fields:
+  pageTitle: Sample 2 Page Title
+placeholders:
+  <%- helper.getAppPrefix(appPrefix, appName) %>jss-main:
+    - componentName: ContentBlock
+      fields:
+        heading: GraphQL Sample 2
+        content: |
+          <p>A child route here to illustrate the power of GraphQL queries. <a href="/graphql">Back to GraphQL route</a></p>

package/dist/templates/nextjs-styleguide/data/routes/styleguide/custom-route-type/en.yml

@@ -0,0 +1,12 @@
+# Using a Custom Route Type enables adding more field data to the route level.
+template: <%- helper.getAppPrefix(appPrefix, appName) %>ExampleCustomRouteType
+fields:
+  # Note that custom route types inherit from the default route type automatically.
+  # This is what makes the `pageTitle` field available here, when it's not defined on the custom route type.
+  pageTitle: Custom Route Type | Sitecore JSS
+  headline: A Treatise on Route-Level Fields in JSS
+  author: Myrtle
+  content: <p>Custom route type fields are good for things like articles, where you may wish to have a filter UI on content fields, such as author or category. Route level fields are easy to query against, whereas component-level fields are not because it's possible to remove a component from a route. Note that route level fields <em>cannot be personalized</em> because you cannot conditionally swap out the route item for a different content item.</p>
+placeholders:
+  <%- helper.getAppPrefix(appPrefix, appName) %>jss-main:
+    - componentName: Styleguide-CustomRouteType

package/dist/templates/nextjs-styleguide/data/routes/styleguide/en.yml

@@ -0,0 +1,246 @@
+fields:
+  pageTitle: Styleguide | Sitecore JSS
+placeholders:
+  <%- helper.getAppPrefix(appPrefix, appName) %>jss-main:
+    - componentName: ContentBlock
+      fields:
+        heading: JSS Styleguide
+        content: |
+          <p>This is a live set of examples of how to use JSS. For more information on using JSS, please see <a href="https://jss.sitecore.com" target="_blank" rel="noopener noreferrer">the documentation</a>.</p>
+          <p>The content and layout of this page is defined in <code>/data/routes/styleguide/en.yml</code></p>
+    - componentName: Styleguide-Layout
+      placeholders:
+        <%- helper.getAppPrefix(appPrefix, appName) %>jss-styleguide-layout:
+          - componentName: Styleguide-Section
+            fields:
+              heading: Content Data
+            placeholders:
+              <%- helper.getAppPrefix(appPrefix, appName) %>jss-styleguide-section:
+                - componentName: Styleguide-FieldUsage-Text
+                  fields:
+                    heading: Single-Line Text
+                    sample: This is a sample text field. <mark>HTML is encoded.</mark> In Sitecore, editors will see a <input type="text">.
+                    sample2: This is another sample text field using rendering options. <mark>HTML supported with encode=false.</mark> Cannot edit because editable=false.
+                - componentName: Styleguide-FieldUsage-Text
+                  fields:
+                    heading: Multi-Line Text
+                    description: '<small>Multi-line text tells Sitecore to use a <code>textarea</code> for editing; consumption in JSS is the same as single-line text.</small>'
+                    sample: This is a sample multi-line text field. <mark>HTML is encoded.</mark> In Sitecore, editors will see a textarea.
+                    sample2: This is another sample multi-line text field using rendering options. <mark>HTML supported with encode=false.</mark>
+                - componentName: Styleguide-FieldUsage-RichText
+                  fields:
+                    heading: Rich Text
+                    sample: <p>This is a sample rich text field. <mark>HTML is always supported.</mark> In Sitecore, editors will see a WYSIWYG editor for these fields.</p>
+                    # YAML can use multiline definitions (a pipe followed by an indented block) to make writing rich text content easier.
+                    # As long as the indent remains consistent, no escaping is required.
+                    sample2: |
+                      <p>Another sample rich text field, using options. Keep markup entered in rich text fields as simple as possible - ideally bare tags only (no classes). Adding a wrapping class can help with styling within rich text blocks.</p>
+                      <marquee>But you can use any valid HTML in a rich text field!</marquee>
+                - componentName: Styleguide-FieldUsage-Image
+                  fields:
+                    heading: Image
+                    sample1:
+                      src: /data/media/img/sc_logo.png
+                      alt: Sitecore Logo
+                    sample2:
+                      src: /data/media/img/jss_logo.png
+                      alt: Sitecore JSS Logo
+                - componentName: Styleguide-FieldUsage-File
+                  fields:
+                    heading: File
+                    description: |
+                      <small>Note: Sitecore does not support inline editing of File fields. The value must be edited in Experience Editor by using the edit rendering fields button (looks like a pencil) with the whole component selected.</small>
+                    file:
+                      src: /data/media/files/jss.pdf
+                      title: Example File
+                      description: This data will be added to the Sitecore Media Library on import
+                - componentName: Styleguide-FieldUsage-Number
+                  fields:
+                    heading: Number
+                    description: '<small>Number tells Sitecore to use a number entry for editing.</small>'
+                    sample: 1.21
+                - componentName: Styleguide-FieldUsage-Checkbox
+                  fields:
+                    heading: Checkbox
+                    description: |
+                      <small>Note: Sitecore does not support inline editing of Checkbox fields. The value must be edited in Experience Editor by using the edit rendering fields button (looks like a pencil) with the whole component selected.</small>
+                    checkbox: true
+                    checkbox2: false
+                - componentName: Styleguide-FieldUsage-Date
+                  fields:
+                    heading: Date
+                    description: |
+                      <p><small>Both <code>Date</code> and <code>DateTime</code> field types are available. Choosing <code>DateTime</code> will make Sitecore show editing UI for time; both types store complete date and time values internally. Date values in JSS are formatted using <a href="https://en.wikipedia.org/wiki/ISO_8601#Combined_date_and_time_representations" target="_blank">ISO 8601 formatted strings</a>, for example <code>2012-04-23T18:25:43.511Z</code>.</small></p>
+                      <div class="alert alert-warning"><small>Note: this is a JavaScript date format (e.g. <code>new Date().toISOString()</code>), and is different from how Sitecore stores date field values internally. Sitecore-formatted dates will not work.</small></div>
+                    date: '2012-05-04T00:00:00Z'
+                    dateTime: '2018-03-14T15:00:00Z'
+                - componentName: Styleguide-FieldUsage-Link
+                  fields:
+                    heading: General Link
+                    description: <p>A <em>General Link</em> is a field that represents an <code>&lt;a&gt;</code> tag.</p>
+                    externalLink:
+                      href: https://www.sitecore.com
+                      text: Link to Sitecore
+                    # absolute URLs to known routes are converted into 'internal links'
+                    # when imported to Sitecore. Note: target route must have an explicitly specified ID value.
+                    internalLink:
+                      href: /
+                      # 'text' is optional if the link is rendered with a custom body (e.g. child HTML)
+
+                    # Will be linked to Sitecore media item on import
+                    mediaLink:
+                      href: /data/media/files/jss.pdf
+                      text: Link to PDF
+                    emailLink:
+                      href: mailto:foo@bar.com
+                      text: Send an Email
+                    # All possible link parameters
+                    paramsLink:
+                      href: https://dev.sitecore.net
+                      text: Sitecore Dev Site
+                      target: _blank
+                      class: font-weight-bold
+                      title: <a> title attribute
+                - componentName: Styleguide-FieldUsage-ItemLink
+                  fields:
+                    heading: Item Link
+                    description: |
+                      <p>
+                        <small>
+                          Item Links are a way to reference another content item to use data from it.
+                          Referenced items may be shared.
+                          To reference multiple content items, use a <em>Content List</em> field.<br />
+                          <strong>Note:</strong> Sitecore does not support inline editing of Item Link fields. The value must be edited in Experience Editor by using the edit rendering fields button (looks like a pencil) with the whole component selected.
+                        </small>
+                      </p>
+                    # A shared item link gets its available items from a folder of shared content items.
+                    # Common usages for such a field might be choosing from a controlled list of options,
+                    # perhaps theme colors, alignment options, or switchable shared content blocks (author bios, for example)
+                    sharedItemLink:
+                      # see /data/content/Styleguide/ItemLinkField for definition of this IDs
+                      id: styleguide-item-link-field-shared-1
+                    localItemLink:
+                      template: <%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-ItemLink-Item-Template
+                      fields:
+                        textField: Referenced item textField
+                - componentName: Styleguide-FieldUsage-ContentList
+                  fields:
+                    heading: Content List
+                    description: |
+                      <p>
+                        <small>
+                          Content Lists are a way to reference zero or more other content items.
+                          Referenced items may be shared.
+                          To reference a single content item, use an <em>Item Link</em> field.<br />
+                          <strong>Note:</strong> Sitecore does not support inline editing of Content List fields. The value must be edited in Experience Editor by using the edit rendering fields button (looks like a pencil) with the whole component selected.
+                        </small>
+                      </p>
+                    # A shared content list gets its available items from a folder of shared content items.
+                    # NOTE: items referenced here are only the _selected items_, not the whole corpus of available options.
+                    # Common usages for such a field might be choosing data items for repeating structures like
+                    # multicolumnar promos or tabs, or shared content pieces like linking one or more authors to an article.
+                    sharedContentList:
+                      # see /data/content/Styleguide/ContentListField for definitions of these IDs
+                      - id: styleguide-content-list-field-shared-1
+                      - id: styleguide-content-list-field-shared-2
+                    localContentList:
+                      # You can also define content lists using an _array of local item definitions_
+                      # note that names are default auto-generated to be unique. Explicitly specified names must be unique.
+                      # NOTE: local item definitions cannot be shared with other content list fields, and are
+                      # generally not preferable compared to using shared definitions.
+                      - template: <%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-ContentList-Item-Template
+                        fields:
+                          textField: Hello World Item 1
+                      - template: <%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-ContentList-Item-Template
+                        fields:
+                          textField: Hello World Item 2
+                - componentName: Styleguide-FieldUsage-Custom
+                  fields:
+                    heading: Custom Fields
+                    description: |
+                      <p>
+                        <small>
+                          Any Sitecore field type can be consumed by JSS.
+                          In this sample we consume the <em>Integer</em> field type.<br />
+                          <strong>Note:</strong> For field types with complex data, custom <code>FieldSerializer</code>s may need to be implemented on the Sitecore side.
+                        </small>
+                      </p>
+                    customIntField: 31337
+          - componentName: Styleguide-Section
+            fields:
+              heading: Layout Patterns
+            placeholders:
+              <%- helper.getAppPrefix(appPrefix, appName) %>jss-header:
+                - componentName: Styleguide-Layout-Reuse
+              <%- helper.getAppPrefix(appPrefix, appName) %>jss-styleguide-section:
+                - componentName: Styleguide-Layout-Reuse
+                  fields:
+                    heading: Reusing Content
+                    description: <p>JSS provides powerful options to reuse content, whether it's sharing a common piece of text across pages or sketching out a site with repeating <em>lorem ipsum</em> content.</p>
+                  placeholders:
+                    <%- helper.getAppPrefix(appPrefix, appName) %>jss-reuse-example:
+                      # Reference shared content using its ID (this is defined in /data/component/content/Styleguide/ContentReuse/LoremIpsumContentBlock/en.yml)
+                      # Shared content is an 'edit once, reflected everywhere' operation for a content author.
+                      - id: lorem-ipsum-content-block
+                      - id: lorem-ipsum-content-block
+                      # Referencing shared content with `copy: true` will cause it to be shared while disconnected, but _copied on import_.
+                      # Use this for quickly comping layouts with FPO content that will not be shared once actual content is entered.
+                      - id: lorem-ipsum-content-block
+                        copy: true
+                      - componentName: ContentBlock
+                        fields:
+                          content: <p>Mix and match reused and local content. Check out <code>/data/routes/styleguide/en.yml</code> to see how.</p>
+                - componentName: Styleguide-Layout-Tabs
+                  fields:
+                    heading: Tabs
+                    description: <p>Creating hierarchical components like tabs is made simpler in JSS because it's easy to introspect the layout structure.</p>
+                  placeholders:
+                    <%- helper.getAppPrefix(appPrefix, appName) %>jss-tabs:
+                      - componentName: Styleguide-Layout-Tabs-Tab
+                        fields:
+                          title: Tab 1
+                          content: <p>Tab 1 contents!</p>
+                      - componentName: Styleguide-Layout-Tabs-Tab
+                        fields:
+                          title: Tab 2
+                          content: <p>Tab 2 contents!</p>
+                      - componentName: Styleguide-Layout-Tabs-Tab
+                        fields:
+                          title: Tab 3
+                          content: <p>Tab 3 contents!</p>
+          - componentName: Styleguide-Section
+            fields:
+              heading: Sitecore Patterns
+            placeholders:
+              <%- helper.getAppPrefix(appPrefix, appName) %>jss-styleguide-section:
+                - componentName: Styleguide-SitecoreContext
+                  fields:
+                    heading: Sitecore Context
+                    description: <p><small>The Sitecore Context contains route-level data about the current context - for example, <code>pageState</code> enables conditionally executing code based on whether Sitecore is in Experience Editor or not.</small></p>
+                - componentName: Styleguide-RouteFields
+                  fields:
+                    heading: Route-level Fields
+                    description: <p><small>Route-level content fields are defined on the <em>route</em> instead of on a <em>component</em>. This allows multiple components to share the field data on the same route - and querying is much easier on route level fields, making <em>custom route types</em> ideal for filterable/queryable data such as articles.</small></p>
+                - componentName: Styleguide-ComponentParams
+                  fields:
+                    heading: Component Params
+                    description: <p><small>Component params (also called Rendering Parameters) allow storing non-content parameters for a component. These params should be used for more technical options such as CSS class names or structural settings.</small></p>
+                  params:
+                    cssClass: alert alert-success
+                    # IMPORTANT: while params can be defined in the manifest as non-string types,
+                    # they are always sent to the component as strings.
+                    columns: 5
+                    useCallToAction: true
+                - componentName: Styleguide-Tracking
+                  fields:
+                    heading: Tracking
+                    description: <p><small>JSS supports tracking Sitecore analytics events from within apps. Give it a try with this handy interactive demo.</small></p>
+          - componentName: Styleguide-Section
+            fields:
+              heading: Multilingual Patterns
+            placeholders:
+              <%- helper.getAppPrefix(appPrefix, appName) %>jss-styleguide-section:
+                - componentName: Styleguide-Multilingual
+                  fields:
+                    heading: Translation Patterns
+                    sample: This text can be translated in en.yml

package/dist/templates/nextjs-styleguide/data/routes/styleguide/{{language}}.yml

@@ -0,0 +1,25 @@
+fields:
+  pageTitle: Styleguide | Sitecore JSS
+placeholders:
+  <%- helper.getAppPrefix(appPrefix, appName) %>jss-main:
+    - componentName: ContentBlock
+      fields:
+        heading: JSS Styleguide
+        content: |
+          <div class="alert alert-primary">
+            This is a partial <%- language %> translation of the JSS Styleguide to demonstrate translation functionality.
+            Use the <a href="/en/styleguide">English version</a> for full content.
+          </div>
+          <p>The content and layout of this page is defined in <code>/data/routes/styleguide/<%- language %>.yml</code></p>
+    - componentName: Styleguide-Layout
+      placeholders:
+        <%- helper.getAppPrefix(appPrefix, appName) %>jss-styleguide-layout:
+          - componentName: Styleguide-Section
+            fields:
+              heading: Multilingual Patterns
+            placeholders:
+              <%- helper.getAppPrefix(appPrefix, appName) %>jss-styleguide-section:
+                - componentName: Styleguide-Multilingual
+                  fields:
+                    heading: Translation Patterns
+                    sample: This text can be translated in <%- language %>.yml

package/dist/templates/nextjs-styleguide/data/routes/{{language}}.yml

@@ -0,0 +1,4 @@
+# in order to demonstrate translation on the Styleguide page, we need to have a stub on the homepage for that language.
+# this can be deleted safely if not using multiple languages.
+name: home
+id: home-page

package/dist/templates/nextjs-styleguide/package.json

@@ -0,0 +1,13 @@
+{
+  "dependencies": {
+    "bootstrap": "^4.3.1",
+    "nprogress": "~0.2.0"
+  },
+  "devDependencies": {
+    "@sitecore-jss/sitecore-jss-dev-tools": "^20.0.0-canary"
+  },
+  "scripts": {
+    "start": "cross-env-shell JSS_MODE=disconnected \"npm-run-all --serial bootstrap --parallel next:dev start:disconnected-proxy start:watch-components\"",
+    "start:disconnected-proxy": "ts-node --project tsconfig.scripts.json ./scripts/disconnected-mode-proxy.ts"
+  }
+}

package/dist/templates/nextjs-styleguide/scripts/disconnected-mode-proxy.ts

@@ -0,0 +1,48 @@
+/*
+  When the app runs in disconnected mode, and Sitecore is not present, we need to give
+  the app copies of the Sitecore APIs it depends on (layout service, dictionary service, content service)
+  to talk to so that the app can run using the locally defined disconnected data.
+
+  This is accomplished by spinning up a small Express server that mocks the APIs, and then
+  telling the dev server to proxy requests to the API paths to this express instance.
+*/
+
+/* eslint-disable no-console */
+
+import fs from 'fs';
+import path from 'path';
+import { createDefaultDisconnectedServer } from '@sitecore-jss/sitecore-jss-dev-tools';
+import { config } from '../package.json';
+
+const touchToReloadFilePath = 'src/temp/config.js';
+
+const serverOptions = {
+  appRoot: path.join(__dirname, '..'),
+  appName: config.appName,
+  // Prevent require of ./sitecore/definitions/config.js, because ts-node is running
+  requireArg: null,
+  watchPaths: ['./data'],
+  language: config.language,
+  port: Number(process.env.PROXY_PORT) || 3042,
+  onManifestUpdated: () => {
+    // if we can resolve the config file, we can alter it to force reloading the app automatically
+    // instead of waiting for a manual reload. We must materially alter the _contents_ of the file to trigger
+    // an actual reload, so we append "// reloadnow" to the file each time. This will not cause a problem,
+    // since every build regenerates the config file from scratch and it's ignored from source control.
+    if (fs.existsSync(touchToReloadFilePath)) {
+      const currentFileContents = fs.readFileSync(touchToReloadFilePath, 'utf8');
+      const newFileContents = `${currentFileContents}\n// reloadnow`;
+      fs.writeFileSync(touchToReloadFilePath, newFileContents, 'utf8');
+
+      console.log('Manifest data updated. Reloading the browser.');
+    } else {
+      console.log('Manifest data updated. Refresh the browser to see latest content!');
+    }
+  },
+};
+
+// Need to customize something that the proxy options don't support?
+// createDefaultDisconnectedServer() is a boilerplate that you can copy from
+// and customize the middleware registrations within as you see fit.
+// See https://github.com/Sitecore/jss/blob/master/packages/sitecore-jss-dev-tools/src/disconnected-server/create-default-disconnected-server.ts
+createDefaultDisconnectedServer(serverOptions);