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. -
Select the add-ons you might need in your application, such as
nextjs-personalize.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 SitecoreAI instance.
Furthermore, 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 environment:
-
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.