How to connect Nextjs app with XM Cloud using Graphql

We have a Nextjs app with sxastarter template.

Please find the below GitHub repo for the solution.

https://github.com/sitecorelabs/xmcloud-foundation-head-staging


Clone the repo into your local disk. 



Note: This repo is a docker-based solution but we don't need to install any docker-related packages.

Open the folder in visual studio code for admin mode. 

Navigate to the Nextjs app source using the below command:
    
PS C:\xm-cloud> cd src/sxastarter



Open the .env.local file and update the following fields.

.env.local is a copy of the .env file and overrides the updated settings and it's ignored by .gitignore for local.


Need to Update :

SITECORE_API_KEY= D732E23E-A7A6-4E4E-87B8-A68B88D51612

Get the key value from your Sitecore path. which is required to authenticate and identify the connections.

 /sitecore/system/Settings/Services/API Keys - here find the item Id and remove the curly braces



JSS_APP_NAME="NextApp"

If "JSS_APP_NAME" is not there in .env.local file then add the key with mentioned and update the Application name of your Sitecore. Like sitename/appname



GRAPH_QL_ENDPOINT={sitecorecmdomain}/sitecore/api/graph/edge

FETCH_WITH=GraphQL (default its Rest, change it to GraphQL)



Run the following command npm run next:dev

When you are running the command it will take from the package.json script section to all the npm-related installations and build the app and run.


Default it will run on http://localhost:3000/

When you open the URL it resolves the content from the home page. 

But you might have gotten an error like the below screenshot


It's because by default Sitecore CDP integration is enabled so expect appropriate fields to configure.

For now, we can disable the CDP integration with the below steps.

Navigate to file: CdpPageView.tsx, here you could find the disable option and set it to true

const disabled = () => {
    return true;
  };




Comments

Post a Comment

Popular posts from this blog

How to Enable Voice Search in Sitecore Content Editor

Image
How to Enable Voice Search in Sitecore Content Editor Voice search is transforming the way users interact with digital content, and integrating it into the Sitecore Content Editor can greatly enhance content management efficiency.  In this blog, we’ll walk you through implementing a voice search feature in Sitecore, enabling content editor to find items faster using speech recognition. Customizing the Sitecore Search Bar in the Content Editor Step 1:  Locate and edit the Default.aspx file, where the search bar of the Content Editor can be found. The file is located at the following path. C:\inetpub\wwwroot\sc.dev.local\sitecore\shell\Applications\Content Manager\Default.aspx You will need to add some custom code to display the voice recognition icon on the search bar. <div class="speech" style="position:relative"> <input id="TreeSearch" class="scSearchInput scIgnoreModified" value="<%= Translate.Text(Texts.SEARCH) %>" ...
Read more

How to Create a Component in Next.js for XM Cloud

Image
Let’s create a component in the Next.js app.  If you want to know how that component is created in XM Cloud, please refer to my previous blog for more information. https://sitecoresathiya.blogspot.com/2024/10/how-to-create-component-in-nextjs-for-xmc.html I have pulled down the startup branch to my local environment. https://github.com/sitecorelabs/xmcloud-foundation-head Refer to the README file to learn how to run the Next.js app locally.  Navigate to the headapps/nextjs-starter folder and execute the following command to scaffold a new component:  jss scaffold "TextCard". Let's check if the component is rendered correctly. Run the command below to start your Next.js app locally in connected mode. npm run start:connected After that, your app will run on http://localhost:3000/ with the default port if the port is not in use.   Yes, it shows what I had in my TextCard.tsx file. How can we display the content from XMC? To map the component fields into my TextCardFields...
Read more

How to Create a Custom Component in XM Cloud.

Image
The best practice for creating a component module is to navigate to Settings -> Project -> [Site Name].  This allows us to use the component across different sites as well.  To create the module, right-click on the project, select "Insert," and then click on "Headless Module." A popup modal will appear.   Specify the module name as the component name. Choose the desired path for grouping the components. The best way to organize them is to select your site name folder under the project. Create a rendering. Instead of creating a rendering, it’s best to clone a rendering and then update it accordingly. For example, clone a Promo rendering and rename it to Text Card. /sitecore/layout/Renderings/Feature/JSS Experience Accelerator/Page Content/Promo To clone the rendering, right-click on the promo, select "Scripts," and then choose "Clone Rendering."   Update the rendering name and select the path to your component folder that was created during ...
Read more