Walkthrough: Creating a JSS Next.js application with the JSS initializer

Abstract

Get started with developing code-first JSS Next.js apps

If you are a front-end/JavaScript developer you can scaffold a JSS Next.js app quickly with the JSS app initializer.

Note

If you use this approach, you must perform additional steps to connect to a Sitecore instance.

To ensure that your new JSS application is compatible with your licensed Sitecore XP version, consult the Sitecore compatibility table.

We recommend this approach for Sitecore developers who use the code-first development workflow or want to evaluate the JSS developer experience without installing Sitecore.

This walkthrough describes how to:

  • Create a JSS Next.js application

  • Integrate your app with Sitecore

  • Run the JSS Next.js application

Create a JSS Next.js application

To create a JSS application based on the Next.js template:

  1. In a terminal, run the following command, providing the name of the directory and the nextjs template:

        npx create-sitecore-jss nextjs

    Note

    To create an application optimized for the code-first workflow, when prompted, choose to add the nextjs-styleguide add-on.

    To create an application for working disconnected, when prompted, select REST as your data-fetching method. Otherwise, after initializing the application, modify the application to use REST services when running disconnected from Sitecore.

  2. Follow the prompts to provide options for your application.

The command creates the JSS Next.js application for the latest version of JSS and installs the necessary packages.

Integrate your app with Sitecore

Activities such as deploying your code-first artifacts and content to Sitecore, WYSIWYG editing, fetching data with GraphQL, and using JSS in a production environment require a Sitecore instance.

To deploy your code-first artifacts and content to Sitecore, connect your JSS app to Sitecore and connect to an advanced Sitecore editor.

If you want to, you can also switch from the code-first to the Sitecore-first development workflow.

Run the JSS Next.js application

To run your application:

  1. In the terminal, go to your application directory. For example:

    cd my-first-jss-app
  2. In the terminal, run the command:

    jss start

    Alternatively, if your app is connected to Sitecore:

    jss start:connected