Skip to main content

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

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 CLI command jss create.

The resulting project is optimized for code-first development. If you do not have a Sitecore instance or do not plan to develop against it, you can work disconnected from Sitecore.

You can create a JSS Next.js application by using the JSS command-line tool (CLI).

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 wish to evaluate the JSS developer experience without installing Sitecore.

Before you can create JSS applications using the JSS CLI, you must install the JSS CLI globally.

This walkthrough describes how to:

  • Create a JSS Next.js application.

  • Run the JSS Next.js application.

  • Steps after app creation.

Create a JSS Next.js application

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

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

        jss create my-first-jss-app nextjs [--fetchWith {REST|GraphQL}] [--prerender {SSG|SSR}]

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

Tip

To create an application using a previous version of JSS, see an example in the JSS CLI reference for jss create.

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

You can now start developing in disconnected mode.

Integrate your app with Sitecore

Activities such as deploying your code-first artifacts and content to Sitecore, WYSIWYG editing, 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.