Integrate Next Js project Local Setup to XM cloud

Introduction:The objective of this document is to Integrate the Next js  project  created in the git hub  in the previous blog to the XM cloud from your local system.



Prerequisites

  •  Node version 18 or higher.
  • NET Core 6.0 SDK (check your installed version with the dotnet --version command).
  • Install  git on your local system
  • Visual studio code
  • Copy the repository path from git hub  created in the previous blog which will be used later while cloning in local system.


Lets Get started with  Next Js Project set up  in the local environment.

    

  • Clone the repository in your local system. Open the Git CMD and go the project folder where you want to clone  and  execute the below command. 

                Git clone <Repository Path>

  • Go the Project location and open it in visual studio code. In my Case the project is cloned in the mentioned below path.
               D:\XMCloud\XMCloudDemo

  •  In this Next Js project code base Sitecore CLI  installation is already installed by default, just need to restore  it using below command. Please refer to Sitecore documentation to do Sitecore cli setup in any project folder        
               Dotnet tool restore 

Connect the Next Js project in your local system to the XM Cloud Instance 

  you need to use a GraphQL endpoint to query the content coming from XM Cloud. To connect  the endpoint, we have two approach.


Approach 1: Connect using the delivery endpoint of Edge or to the preview endpoint of your CM instance


  1.   Navigate to the .env file within your solution under src\sxastarter, and copy it.   Name it .env.local. 
  2. Populate the  mentioned below keys values  from your  XM Cloud cm instance .Below are the keys need to be populated fin .env.local
  • SITECORE_EDGE_CONTEXT_ID 
  •  SITECORE_SITE_NAME

     
        you will get these values from the XM cloud CM  Instance ad mentioned in the screen shot below   


    Note -There are two context id in the above image .Context Id(Preview ) works without Publishing the content like pointing to master DB in XP. If you use Context ID(Live)  then you need to Publish the content like web database in XP.This is just an analogy to understand both  the different mode.


    if you use live id without Publishing you will get the above error.

        

Approach 2: Connect the XM cloud using generating the Edge access token. 

  1.   Go to the folder where you cloned the project ,in my case it's                            "D:\XMCloud\XMCloudDemo"  and execute the below mentioned command.



        dotnet sitecore cloud login

        Execution of above command will popup the below link in the                browser



        Click confirm
    2.Capture the Environment id through the XM cloud portal which will         help in the token generation as mentioned below



3. using the environment id execute the below mentioned command to generate the edge token. Replace the environment id with the value mentioned above.

.\New-EdgeToken.ps1 -EnvironmentId {environment-id}

Execution of above command will lead the below popup .If you watch closely there is a double forward // in the URL ,remove one of it.

Remove one of the forward  slash from the URL and it will popup the correct URL 


if you see the image at the bottom you will get this key "X-GQL-Token".This Edge token which will be used in the project to connect with XM cloud project.

4.  Navigate to the .env file within your solution under src\sxastarter, and copy it.
   Name it .env.local. 

  • SITECORE_API_KEY: The token we generated in the previous step.
  • GRAPH_QL_ENDPOINT: https://edge.sitecorecloud.io/api/graphql/v1
  • JSS_APP_NAME: The site name we set in XM Cloud .For my demo pupose the site name is "Xmclouddemo"


5 . Go to the below folder and execute the command the below command
    D:\XMCloud\XMCloudDemo\src\sxastarter
  • npm install
  • npm run start:connected

6. Browse http://localhost:3000/

This will Load your home page.


Comments

Post a Comment

Popular posts from this blog

Solrcloud With Zookeeper -Single server setup

Image
Getting Started with SolrCloud: A Beginner’s Guide for First-Time Users If you’ve been diving into search technology and stumbled across SolrCloud , you might think it’s just Apache Solr hosted in the cloud. That’s a common misconception—but SolrCloud is much more powerful than that. In this beginner-friendly guide, we’ll walk you through what SolrCloud actually is, why you might need it, and how to get it up and running on your local machine for development or testing.  What is SolrCloud (and Why Should You Care)? SolrCloud is the distributed, fault-tolerant, and scalable evolution of Apache Solr’s traditional architecture. While the original Solr relied on a master-slave model , SolrCloud is built for modern, large-scale applications that require high availability and real-time indexing.  Key Benefits of SolrCloud: High Availability : Replication ensures your data is always accessible—even if some nodes go down. Scalability : Easily add new nodes as your indexin...
Read more

Render Sitecore Experience Forms Using Sitecore XP 10.4 with a Headless Approach (Next.js + JSS SDK)

Image
  In this blog post, we’ll walk through rendering Sitecore Experience Forms using Sitecore XP 10.4 (Update 1) with a headless (Sitecore-first) approach , leveraging Next.js and Sitecore JSS SDK . This guide assumes you're using connected mode , where your frontend directly interacts with your Sitecore backend. Goal: Enable a fully functional Sitecore Experience Form to render and work within a headless Next.js application. đŸ§± Prerequisites Before getting started, ensure you have the following: Backend: ✅ Sitecore XP 10.4 Update-1 installed ✅ Sitecore Headless Rendering 22.0.0 package installed Frontend: ✅ Node.js and npm installed ✅ Visual Studio Code (or any preferred IDE) 🧭 Step 1: Set Up Sitecore for Headless Forms Since this is a Sitecore-first approach , we begin by configuring everything in Sitecore before moving to Next.js. 🔑 1. Create an API Key Go to Sitecore Content Editor Create a new API Key item (e.g., under /sitecore/system/Mo...
Read more

Next.js with XM Cloud EDGE and GraphQL

Image
  Building a Component with Next.js and GraphQL from Sitecore XM Cloud Edge — No JSS Required Goal: In this blog post, we’ll walk through how to create a simple component in Next.js that fetches data from Sitecore XM Cloud Experience Edge using GraphQL — without using any JSS libraries. đŸ§© What You’ll Need from Your Sitecore XM Cloud Instance Before we start coding, we’ll need a few pieces of information from your Sitecore project: 1. Edge Token and GraphQL Endpoint Log in to your Sitecore XM Cloud project. Select your environment. Go to the "Details" tab. At the bottom, you’ll see Live GraphQL IDE (Experience Edge) . Click "Generate Delivery API Token" — this gives you the Edge API token and the GraphQL endpoint URL. We’ll use this token later in our .env.local file. 🛠️ Project Setup: Next.js + GraphQL 1. Create a Next.js App      Run the following command to bootstrap your app: npx create-next-app@latest xmcloud 2. Install Gr...
Read more