Steps to Consider: Connect JSS Next.js Project with Sitecore XM Cloud

In this blog, I will show how you can connect your local JSS Next.js App with XM Cloud Deploy. If you are wondering how to setup NextJs App with XM Cloud then do visit this blog.

Please note, this blog refers to some steps which I have done previously while setting up my site on the portal. I would suggest you to just a have look into steps so that you can understand the further stated steps better.

Since we will be running our local instance with XM Cloud, it would be better to create any component, lets say XM Cloud Component using component builder, and bind on home page to confirm and test the changes.

If you are seeking to know How to create a component in XM Cloud then follow this guide.

Prerequisites

  1. You must have cloned your NextJs app on your machine.
  2. Nodejs/Git must be installed.
  3. Any code editor, Visual Studio Code preferred.
  4. Site must be created on XM Cloud Portal.

Exploring XM Cloud Deploy

Lets begin with grabbing the environment variables which will be used while setting up our project Next.js JSS App.

Step 1: Login into your XM Cloud Project and Click XM Cloud Deploy Option

Remember, you can simply click on XM Cloud Deploy, you don't have to select your site.

Step 2: Click on your project

Note: You would see ellipses on most of the items, keep on looking into options available as they might be needed in further setups.


 Step 3: Viewing environment list

If you have setup your project, then you might know that at some point XM Cloud setup asks you about naming your environment. That same value will be visible here.

So click on the Development option.

Step 4: Manage your environment

Note: By default, the environment which you have created is binding with Master Branch in git or azure. In case if you want to change the branch then it can be done at this level.

In that case, click on options and select env to another branch

Step 5: Linking environment to another branch (Optional)

You will notice, the branches you created in the project repo are visible here. Hence, I have changed the branch from master to develop with auto deployment option.

Step 6: Goto Developer Settings

This is a very important step because there are configuration changes between JSS version before 21.5 and after 21.6

Below is for JSS 21.5 and earlier version.

So, How you can check your version?

Goto your source code, and find package.json file

Step 7: Grab the Environment Variable values

Since, I am using the latest version of JSS, so grab the SITECORE_EDGE_CONTEXT_ID, SITECORE_SITE_NAME and JSS_EDITING_SECRET values.

Step 8: Create XM Cloud Component

This topic i have already covered in another blog, which you can follow here. 

Below is how home page is looking in XM Cloud Page Builder:


Step 9: Configure Next.js Project


Open Terminal and run below commands:
 > git clone https://github.com/ArjunAroraDA/xmcloud-nextjs-app.git
 > cd xmcloud-nextjs-app\headapps\nextjs-starter
 > npm install

Step 10: Create new environment file

This step dependend on the JSS version you are using. So based on the Step 6, you need to keep the properties value ready.

Now, Copy existing .env and create with name .env.local file. Provide the values for  properties SITECORE_EDGE_CONTEXT_ID, SITECORE_SITE_NAME, JSS_EDITING_SECRET.

For GRAPH_QL_ENDPOINT, you can go Deploy App and open Details tab.


Once you click on Launch IDE, you can use the same url which gets open in new tab.

Finally your file should look like below:



Step 11: Configure package.json

Open your package.json file and replace appName value from nextjs-starter to company-a.
In my case i have kept site name as company-a.

Step 12: Run application
Goto Terminal again and run npm run start:connected


If you are running for first time, then it might take few minutes.

Step 13: Open App

Once build is done, your localhost should get up. Url: http://localhost:3000


Conclusion:

In this blog, I have explained how you can configure and run your Next.js app with XM Cloud instance. The key point is to check the JSS Version and their related config values.

Comments

Post a Comment

Popular posts from this blog

Working with Device Detection Module in Sitecore

Image
  What is Device Detection in Sitecore? Sitecore has an in-built feature called Device Detection which helps to detect at which device the content is shown into. When I say in-built that means its included as a standard feature in Sitecore XP 9.0 and later. This feature is also present in Sitecore XM Cloud , hence you do not need to buy a separate add-on or module to utilize device detection features.   The information gather from Device Detection Module can help content makers, allowing them to tailor the website experience based on the device type they are accessing it with, such as by displaying different layouts or content depending on screen size and capabilities. For Example, An iPhone and Android users might be looking at different content on same page.   Moreover, developers uses the same mechanism to personalize the components based on the device specific audience. They can setup Device Layout based on specific device parameters or can use the in-built rules...
Read more

Setup A/B Testing in Sitecore - Part 1

Image
  Setup A/B Testing in Sitecore - Part 1 In this article we will understand What is A/B Testing, Types of Testing in Sitecore, Actual Use Case and later we will see how we can setup A/B Testing in Sitecore XP solution with Rendering having different data source items.   Before we go further, lets understand WHAT IS A/B Testing ? A/B testing, also known as split testing, is a method used in marketing and product development to compare two versions of something to determine which one performs better. In an A/B test, two versions, A and B, are created, with one varying element between them. This element could be anything from the wording of an email subject line, the design of a web page, the placement of a button, or even the pricing of a product.   The versions, A and B, are then randomly  shown to similar audiences or users, and their responses are measured and compared. The version that performs better in terms of predefined metrics (such as click-through rate, conv...
Read more

Working with Webhooks in Sitecore - Part 1

Image
  Working with Webhooks in Sitecore - Part 1 In this blog we will understand the concept of Webhooks and how we can use them in Sitecore. So before jumping into Webhooks in Sitecore, first lets understand what webhooks are?   What is a Webhook? They are typically created to connect/link different applications. They are much like API but different from them. Webhooks are one way that apps can send automated messages or information to other apps.   Consider an example below:     Suppose, there is a user facing front application which showcase the product catalogs to its customers. This application is responsible for booking an order from its users. BUT the logistics is handle by different application.   The second application (logistic app) has setup a webhook which is exposed over http and waiting to receive any confirmed orders. Once someone place any order which can be called as an event for the first application, then along with its operation it is passin...
Read more