Sitecore jss app quick local set up of headless xm cloud with next.js for xm cloud portal website.

Prerequisite to install the sitecore jss next.js app into system.

1. Latest Node version should be installled.
2. Sitecore JSS Cli should be installed in to system.
3. Create a website in web portal name like: samplejssapp and notedown SITECORE_API_KEY, JSS_APP_NAME, GRAPH_QL_ENDPOINT attributes and thier values for portal and publish, it will publish to edge.
4. Lets come back to vscode and select directory and start creating the Sitecore jss next.js app

Please follow the below steps:

C:\Workdir\XMCDeploy> npx create-sitecore-jss
? Which template would you like to create? nextjs
? Where would you like your new app created? C:\Workdir\XMCDeploy\nextjs
? Directory ‘C:\Workdir\XMCDeploy\nextjs’ not empty. Are you sure you want to continue? No
PS C:\Workdir\XMCDeploy> npx create-sitecore-jss
? Which template would you like to create? nextjs
? Where would you like your new app created? nextjssample
? Would you like to use the pre-push hook for linting check? Yes
Initializing ‘nextjs’…
? What is the name of your app? SampleJssappSampleJssapp is not a valid name; you may use lowercase letters, hyphens, and underscores only.
? What is the name of your app? sampleJssappsampleJssapp is not a valid name; you may use lowercase letters, hyphens, and underscores only.
? What is the name of your app? samplejssapp
? What is your Sitecore hostname (used if deployed to Sitecore)? samplejssapp.dev.local
? How would you like to fetch Layout and Dictionary data? GraphQL
? How would you like to prerender your application? SSG
? Would you like to include any add-on initializers? nextjs-sxa – Includes example components and setup for Headless SXA
projects
Initializing ‘nextjs-sxa’…
Installing packages…

npm install
npm WARN deprecated subscriptions-transport-ws@0.9.19: The subscriptions-transport-ws package is no longer maintained. We recommend you use graphql-ws instead. For help migrating Apollo software to graphql-ws, see https://www.apollographql.com/docs/apollo-server/data/subscriptions/#switching-from-subscriptions-transport-ws For general help using graphql-ws, see https://github.com/enisdenjo/graphql-ws/blob/master/README.md

added 1117 packages, and audited 1118 packages in 5m

186 packages are looking for funding
run npm fund for details

17 vulnerabilities (9 moderate, 5 high, 3 critical)

To address issues that do not require attention, run:
npm audit fix

To address all issues (including breaking changes), run:
npm audit fix –force

Run npm audit for details.
Linting app…

npm run lint — –fix

samplejssapp@21.2.1 lint
eslint ./src//.tsx ./src//.ts ./scripts/*/.ts –fix

Installing pre-push hook…
Pre-push hook installed successfully!

We will navigate to project name directory like : cd nextjssample then code . enter. It will open the project into vs code.

5. We will put the value of SITECORE_API_KEY, JSS_APP_NAME, GRAPH_QL_ENDPOINT to the .env and .env.local file

6. we will start the project, command: jss start:connected it will start the project in localhost:3000