Tag: NextJS

XM Cloud Dev Error: Hydration failed – while using XMC with Nextjs

Recently, I started receiving error-

Unhandled Runtime Error

Error: Hydration failed because the initial UI does not match what was rendered on the server.

This error was specifically while using RichText field.

Resolution-

Hyderation is when React converts the pre-rendered HTML from the server into fullly interactive application by attaching event handlers.

The common casue of this issue is incorrect nesting of HTML tags.

RichText is wrapped in div tag and received this error when the RichText was wrapped in <p> tag

Example where React throws error-

Incorrect way of wrapping RichText-
<p className="page-desc text-white mb-0"> 
   <RichText field={props.fields.Description} />
</p>

Remove the <p> tag or wrap RichText in <div> tag

Correct way-
<RichText className="page-desc text-white mb-0" field={props.fields.Description} />

Remvoing <p> might removing spacing between fields/components, this needs to be adjusted using CSS.

Reference-

https://nextjs.org/docs/messages/react-hydration-error

Loading

Setting up a Sitecore JSS development environment with the Containers template for Next.js

Follow steps in this link —

https://doc.sitecore.com/xp/en/developers/hd/211/sitecore-headless-development/walkthrough–setting-up-a-development-environment-with-the-sitecore-containers-template-for-next-js.html

Following are thre pre-requisite for setting on your local machine-

Apart from this also install Sitecore JSS CLI-

npm install -g @sitecore-jss/sitecore-jss-cli

Install the template

dotnet new -i Sitecore.DevEx.Templates --nuget-source https://sitecore.myget.org/F/sc-packages/api/v3/index.json

dotnet new sitecore.nextjs.gettingstarted -n samplejss

Should first Restores dotnet local tools for the solution and Initializes the JSS project

What is your Sitecore hostname (used if deployed to Sitecore)? (samplejss.dev.local) << leave blank or provide the host name>>

How would you like to fetch Layout and Dictionary data? 
GraphQL
REST

How would you like to prerender your application?
SSG
SSR

Which additional language do you want to support (en is already included and required)? << leave blank or type the language you want. should select da-DK by default and additional language>>

JSS application is now ready and updated for continerized environment.

Navigate to project folder and initialize the environment.

.\init.ps1 -InitEnv -LicenseXmlPath "<C:\path\to\license.xml>" -AdminPassword "<desired password>"
setx NODE_EXTRA_CA_CERTS C:\Users\sandeep\AppData\Local\mkcert\rootCA.pem

Execute up.ps1 to create containers-

.\up.ps1

Error-

CM is not coming up-

Checked the docker logs, and found this error-

The path is not set correctly. Need to escape the characters-

Resolution-

Change – entrypoint: powershell.exe -Command “& C:\tools\entrypoints\iis\Development.ps1” to entrypoint: powershell.exe -Command “& C:\\tools\\entrypoints\\iis\\Development.ps1” in docker-compose.override.yml file for xm1, xp0 and xp1

Take down all the containers and build again.

Now this should look fine-

Enter CM admin credentials and allow the access-

CM and App should load –

As of writing this post, this setup installed Sitecore 10.3.

Loading

Setup Sitecore 10.2 JSS using next js in secured and connected mode

Sitecore 10.2 uses Sitecore Headless Rendering 19.0.0. See link here

See this blog for prerequisites and setting jss using next js in disconnected mode.

Follow below steps after the steps completed in above blog

Download Sitecore Headless Services for Sitecore XM

Prerequisite

Install Sitecore 10.2 XP0 on local development environment. See hte blog here if not already installed

Install downloaded package for Headless Service

https://dev.sitecore.net/Downloads/Sitecore_Headless_Rendering/19x/Sitecore_Headless_Rendering_1900.aspx OR

https://dev.sitecore.net/Downloads/Sitecore_Headless_Rendering/20x/Sitecore_Headless_Rendering_2000.aspx

Run the next js app in connected mode

Before working on connected mode create API Key

Navigate to – /sitecore/system/Settings/Services/API Keys

Create a new API Key e.g.:- nextjsservice

API key here is Item ID

Create a custom binding-

For this create a self signed certificate with a custom domain name in this case – next-jss-prj.dev.local

New-SelfSignedCertificate -CertStoreLocation C:\certificates -DnsName "next-jss-prj.dev.local" -FriendlyName "My First Next JSS App" -NotAfter (Get-Date).AddYears(10)

Create a new https binding and assign the newly create SSL certificate

Add domain to the host file – next-jss-prj.dev.local

Inititate JSS

Run the command

npm init sitecore-jss nextjs

Where would you like your new app created? C:\projects\nextjs
Initializing ‘nextjs’…
What is the name of your app? next-jss-prj.dev.local
What is your Sitecore hostname (used if deployed to Sitecore)? next-jss-prj.dev.local
How would you like to fetch Layout and Dictionary data? REST
How would you like to prerender your application? SSG
Would you like to include any add-on initializers? nextjs-styleguide – Includes example components and setup for
working disconnected
Initializing ‘nextjs-styleguide’…
Which additional language do you want to support (en is already included and required)? da-DK

Setup JSS

jss setup

Is your Sitecore instance on this machine or accessible via network share? [y/n]: y
Path to the Sitecore folder (e.g. c:\inetpub\wwwroot\my.siteco.re):
Invalid input.
Path to the Sitecore folder (e.g. c:\inetpub\wwwroot\my.siteco.re): C:\inetpub\wwwroot\xp102sc.dev.local
Sitecore hostname (e.g. http://myapp.local.siteco.re; see /sitecore/config; ensure added to hosts): next-jss-prj.dev.local
Invalid input. Must start with http(s)
Sitecore hostname (e.g. http://myapp.local.siteco.re; see /sitecore/config; ensure added to hosts): https://next-jss-prj.dev.local
Sitecore import service URL [https://next-jss-prj.dev.local/sitecore/api/jss/import]: https://next-jss-prj.dev.local/sitecore/api/jss/import
Sitecore API Key (ID of API key item): {2318A20A-6DF1-4AB8-B49E-F933A3B79160}
Please enter your deployment secret (32+ random chars; or press enter to generate one):

Deployment secret– Leave this blank as this will generate new secret key

Deployment secret key is generate and stored in <<jss development folder>>\sitecore\config\next-jss-prj.deploysecret.config

JSS connection settings saved to scjssconfig.json

Connection and the deployment secret is created, now this needs to be deployed to Sitecore instance so the JSS app is able to establish a connection with Sitecoore

To deploy the config setting deploy the config to Sitecore instance-

jss deploy config

Configs are copied to Sitecore instance App_Config\Include\zzz…

Deploy the artifacts to Sitecore instance-

Since we don’t know hte thumbprint use the below command with –acceptCertificate as test

jss deploy app –includeContent –includeDictionary –acceptCertificate test

This will provide the thumbprint. highllighted in red

Copy the certificate and try deploying again-

jss deploy app –includeContent –includeDictionary –acceptCertificate E4:54:12:A0:7E:D5:95:9B:B0:C2:00:17:3A:26:1B:AD:71:73:9F:05

if you see this error while importing – Message: An item name must satisfy the pattern: ^[\w*\$][\w\s-\$]*((\d{1,})){0,1}$ (controlled by the setting ItemNameValidation)

Change the ItemnameValidation to .* while importing and revert back to original in Sitecore.config file. Refer this –

https://sitecore.stackexchange.com/questions/470/an-item-name-must-satisfy-the-pattern-w-w-s-d1-0-1-c

To run the app run following command

jss start:connected

If you receive this error-

Execute following command to get this working on port 3000

$env:NODE_TLS_REJECT_UNAUTHORIZED=0

Execute JSS start again-

jss start:connected

ERROR-

Connection to your rendering host failed with a Not Found error. Ensure the POST endpoint at URL http://localhost:3000/api/editing/render has been enabled.

Copy the deploy secret and update the – value of setting of JavaScriptServices.ViewEngine.Http.JssEditingSecret in Sitecore.JavaScriptServices.ViewEngine.Http with the deploy secret.

This now work in connected mode. Any content changes in Sitecore should reflect localhost:3000 and Sitecore instance (https://next-jss-prj.dev.local/)

Sitecore next js working in connected mode with SSL

Error-

Exception thrown while importing JSS app
Exception: System.UnauthorizedAccessException
Message: The current user does not have write access to this item. User: sitecore\JssImport, Item: ContentBlock ({23CE8001-F405-5E50-AE61-AD3057660BBD})
Source: Sitecore.Kernel

Resolution-

Error-

Resolution-

Check if the API key is correct at the location – /sitecore/system/Settings/Services/API Keys

Also check if the CORS and Allowed Controllers are set correctly

For developement environment put * for both the highlighted fields

Setup Sitecore 10.2 JSS using next js with disconnected mode

Prerequisite

Install Node js – Download the latest node js from here

Install JSS CLI

npm install -g @sitecore-jss/sitecore-jss-cli

Create a new next js app using JSS CLI

Note the project name should be valid as per below error

next-jss-prj1 is not a valid name; you may use lowercase letters, hyphens, and underscores only.

Numbers not allowed in project name

jss create next-jss-prj nextjs

Installs all the required artifacts in the specified folder

Run the next jss app in desconneted mode-

jss start

The app should listen to port 3000

Errors

JSS CLI is running in global mode because it was not installed in the local node_modules folder.

Resolution– Install jss cli locally. Also ensure you are in correct directory. Should be in project directory

npm install @sitecore-jss/sitecore-jss-cli