---
title: "Walkthrough: Creating a JSS Next.js application with the JSS initializer"
slug: "walkthrough--creating-a-jss-next-js-application-with-the-jss-initializer"
abstract: "Get started with developing code-first JSS Next.js apps"
---
# Walkthrough: Creating a JSS Next.js application with the JSS initializer

If you are a front-end/JavaScript developer you can scaffold a JSS Next.js app quickly with the [JSS app initializer](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/the-jss-app-initializer.html "The JSS app initializer").

> [!note]
> If you use this approach, you must perform [additional steps to connect to a Sitecore instance](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/walkthrough--connecting-a-code-first-jss-next-js-application-to-sitecore.html "Walkthrough: Connecting a code-first JSS Next.js application to Sitecore").
>
> To ensure that your new JSS application is compatible with your licensed Sitecore XP version, consult [the Sitecore compatibility table](https://support.sitecore.com/kb?id=kb_article_view&sysparm_article=KB0541788).

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:

    ```text
    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](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/working-disconnected-in-jss.html "Working disconnected in JSS"), 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.

> [!tip]
> You can also [create an application for a previous version of JSS and Sitecore](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/create-a-jss-app-for-an-older-version-of-sitecore.html "Create a JSS app for an older version of 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](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/walkthrough--connecting-a-code-first-jss-next-js-application-to-sitecore.html "Walkthrough: Connecting a code-first JSS Next.js application to Sitecore") and [connect to an advanced Sitecore editor](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/walkthrough--connecting-a-next-js-jss-app-to-sitecore-editors.html "Walkthrough: Connecting a Next.js JSS app to Sitecore editors").

If you want to, you can also [switch from the code-first to the Sitecore-first development workflow](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/transitioning-from-code-first-to-sitecore-first.html "Transitioning from code-first to Sitecore-first").

## Run the JSS Next.js application

To run your application:

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

    ```text
    cd my-first-jss-app
    ```

2. In the terminal, run the command:

    ```text
    jss start
    ```

    Alternatively, if your app is connected to Sitecore:

    ```text
    jss start:connected
    ```