Create a JSS app locally

Version: 22.x

If you want to create a JSS app locally before connecting it to your XM Cloud instance, you can do so using the command line. This method gives you precise control over your initial app, letting you choose a framework for your app (either Angular or Next.js) and specify various other settings.

After creating an app this way, you can use it to replace the one generated automatically for your XM Cloud instance.

Creating an app from the command line is also the quickest way to upgrade your existing app to a newer version, because you can use files from the new app to replace any older unmodified versions in your current app.

Before you begin

Install Node.js. We recommend using the most recent long-term support (LTS) version.

To create a JSS app locally based on your preferred framework:

Next.js

In a terminal, start the initializer using your preferred package manager:
RequestResponse
```
npx create-sitecore-jss nextjs
```
RequestResponse
```
npm init sitecore-jss nextjs
```
RequestResponse
```
yarn create sitecore-jss nextjs
```
Tip

If you're using npx, you can include additional parameters to manually configure the JSS initializer. Doing so can save you time by skipping some or all of the remaining steps in this process.
If prompted to install the create-sitecore-jss@<latest-version> package, answer y.
Enter the folder path for your new app.

Tip

This will default to ./nextjs-starter/.

The simplest approach is to use the default, but if you want to use a different name you can either copy your new JSS app's files into the ./headapps/nextjs-starter/ folder in your XM Cloud app or reconfigure the XM Cloud app to use a different path.
Specify whether to use the pre-push hook for linting check, which validates all TypeScript types and code formatting each time you push changes to your remote repository.
Enter a name for your app.
Specify your Sitecore hostname or use the default value.
For the data fetching strategy, select GraphQL.
For the rendering strategy, select SSG or SSR, depending on your needs.
When asked if you are building for XM Cloud, answer y. This installs additional functionality including the XM Cloud add-on.
When asked if you want to install other add-ons, take the following actions:
- nextjs-sxa - always select this add-on, because it provides various core services and middleware for working with XM Cloud, such as redirects, robots.txt, and sitemaps. It also provides samples components to help you quickly build your site content with Next.js.
- nextjs-multisite - select this add-on if you want to include a sample Next.js configuration for working with environments that have multiple sites.

When you finish making your choices, the initializer will create your app in the specified directory. You can then use the new app to replace the one in your locally cloned XM Cloud app as needed. The default name and location used for these apps by XM Cloud are as follows, and we recommend you use these unless you want to reconfigure the default paths yourself:

App name	Path
`nextjs-starter`	`./headapps/`

Do you have some feedback for us?

If you have suggestions for improving this article,