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

Current version: 21.x

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:

In a terminal, run the following command, providing the name of the directory and the nextjs template:
RequestResponse
```
    npx create-sitecore-jss@ver<version-number> nextjs
```
Replace <version-number> with the version you wish to use. For example, 21.

Note

To create an application optimized for the code-first workflow, when prompted, choose to add the nextjs-styleguide add-on. When using the add-on, the process creates the data and sitecore/definitions folders necessary for running the application in disconnected mode with the jss start or npm run start command.

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.
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.

Tip

You can also create an application for a previous version of JSS and Sitecore.

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:

In the terminal, go to your application directory. For example:
RequestResponse
```
cd my-first-jss-app
```
In the terminal, run the command:
RequestResponse
```
jss start
```
Alternatively, if your app is connected to Sitecore:
RequestResponse
```
jss start:connected
```

Do you have some feedback for us?

If you have suggestions for improving this article,