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 SitecoreAI environment and start developing your front-end solution immediately.
-
You must have a running SitecoreAI instance.
This walkthrough describes how to:
-
Create a JSS Next.js application.
-
Integrate your app with SitecoreAI.
Create a JSS Next.js application
To create a JSS application based on the Next.js template:
-
In a console, run the following command:
-
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 SitecoreAI 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.
XM Cloud is now SitecoreAISome code examples, images, and UI labels may still use XM Cloud while engineering assets are being updated.
-
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 SitecoreAI
Developing a front-end application for SitecoreAI 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:
-
A SitecoreAI 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 SitecoreAI Pages to your local SitecoreAI instance.