Walkthrough: Creating a JSS Next.js application with the JSS initializer
If you are a front-end/JavaScript developer, who doesn't need to customize the CMS functionality or you use an operating system other than Windows, you can scaffold a JSS Next.js app quickly with the JSS app initializer.
Use this application to connect directly to your XM Cloud environment and start developing your front-end solution immediately.
-
You must have a running XM Cloud instance.
This walkthrough describes how to:
-
Create a JSS Next.js application.
-
Integrate your app with XM Cloud.
Create a JSS Next.js application
To create a JSS application based on the Next.js template:
-
In a console, run the following command:
RequestResponsenpx create-sitecore-jss nextjs -
If prompted to install the
create-sitecore-jss@<latest-version>package, answer y. -
Enter the folder path for the JSS 21.6 Next.js app. For example, ./my-first-jss-app to create the app folder in your current working directory.
-
For the data fetching strategy, select
GraphQL. -
For the rendering strategy, choose
SSGorSSR, depending on your needs. -
To connect to your XM Cloud environment, you must install the XM Cloud add-on. When asked if you are building for Sitecore XM Cloud, answer y to install the XM Cloud add-on.
-
Select the add-ons you might need in your application-
nextjs-sxaand/ornextjs-multisiteand press Enter.
The command creates the JSS Next.js application for the latest version of JSS and installs the necessary packages.
Integrate your app with XM Cloud
Developing a front-end application for XM Cloud requires a running XM instance. The instance can run in the cloud or locally.
You must connect your application to that instance's environment to bootstrap your integration configurations and fetch content and layout data.
To connect your application to:
-
An XM Cloud instance: follow the walkthrough to connect your application directly to Experience Edge.
-
A local XM instance: configure the editing host if you plan on deploying items, components, and templates to the instance. You can also connect XM Cloud Pages to your local XM Cloud instance.