Setting Up Sitecore Headless with Next.js in connected Mode

In Disconnected Mode, the Next.js app uses local content stored in static files meaning that the data flow is not dependent on the Sitecore CMS.

In Connected Mode, the Next.js frontend communicates directly with a live Sitecore instance. This setup enables

  • -          Real time content fetching from Sitecore CMS using the Layout Service and
  • -          Support for using Experience Editor for visual page editing

Steps to set Up Sitecore Headless with Next.js in Connected Mode

1.       Create an SSL Certificate

First, generate a new SSL certificate to allow HTTPS connections locally, below PowerShell script helps to generates a new SSL certificate and it is added to trusted certificates. If the certificate doesn’t automatically move to Trusted Root Certification Authorities, manually move it via Manage User Certificates.

New-SelfSignedCertificate -CertStoreLocation cert:\LocalMachine\My -DnsName "mynextjsapp.dev.local"

2.       Add new Binding in IIS

Next, bind the SSL certification to Sitecore CM Instance. To assign the newly created certification to the Sitecore CM instance

  • ·       Open IIS Manager
  • ·       Select the Sitecore CM Site
  • ·       Go to binding section
  • ·       Add a new binding with https type
  • ·       Provide hostname as mynextjsapp.dev.local
  • ·       Select the newly created certificate from SSL certification drop down list

 

A screenshot of a computer AI-generated content may be incorrect.

3.       Update the Hosts File

To map the custom domain to local machine, Open the host file in admin mode from the location

C:\Windows\System32\drivers\etc\hosts

Add the new hostname entry same as we added in binding in previous step mynextjsapp.dev.local as depicted below

A screenshot of a computer program AI-generated content may be incorrect.

 

4.       Create a Sitecore API key

  • -          Open the Sitecore CMS, access Content Editor
  • -          Navigate to the location Sitecore/system/Settings/Services/API Keys
  • -          Create a new API key e.g. NextJSAPI,
  • -          Set the CORS Origins and Allowed Controller Fields to *
  • -          Save and publish the item

A screenshot of a computer AI-generated content may be incorrect.

 

5.       JSS Setup

  • ·       Open the NextJS app folder in VS code
  • ·       Open the new terminal  and run below command

jss setup

A screenshot of a computer program AI-generated content may be incorrect.

After successful setup, scjssconfig.json file will be updated

(e,g. location C:\Learning\NextJS\nextjs\scjssconfig.json)

A screen shot of a computer code AI-generated content may be incorrect.

Now deploy app configuration to Sitecore with below command

Jss deploy config

A screen shot of a computer AI-generated content may be incorrect.

This copies app's configuration files to Sitecore location under /App_Config/Include/zzz/

A screenshot of a computer AI-generated content may be incorrect.

6.       Deploy Items and Content

Before deploying items, get the certificate thumbprint using below command

jss deploy items --includeContent --includeDictionary --acceptCertificate test

A screen shot of a computer program AI-generated content may be incorrect.

Copy the thumbprint from the error message, then run:

jss deploy items --includeContent --includeDictionary --acceptCertificate THUMBPRINT_FROM_THE_ERROR

e.g.

jss deploy items --includeContent --includeDictionary --acceptCertificate F9:63:19:34:F0:27:2D:B1:6C:9D:86:FC:A7:6F:AC:SE:F7:B7:71:CF

A screen shot of a computer AI-generated content may be incorrect.

A screenshot of a computer AI-generated content may be incorrect.

This imports Components, Templates, Renderings and Pages to Sitecore instance under

/sitecore/content/sitecore-jss-app

A screenshot of a computer AI-generated content may be incorrect.

7.       Run the NextJs Application in connected mode

In PowerShell (admin mode), navigate to NextJs app root and run the below commands.

$env:NODE_TLS_REJECT_UNAUTHORIZED=0

jss start:connected

A screen shot of a computer AI-generated content may be incorrect.

Visit http://localhost:3000 in the browser, application will start running in connected mode.

A screenshot of a computer program AI-generated content may be incorrect.

Open the page in the Sitecore and Sitecore experience editor. 

A screenshot of a computer AI-generated content may be incorrect.

Enjoy the connected experience.

Happy coding!

 

Comments

Post a Comment

Popular posts from this blog

Setting Up Sitecore Headless with Next.js in Disconnected Mode

Image
Sitecore Headless CMS offers a flexible way to integrate with different frontend technologies. For developers working with frameworks like Next.js, Sitecore provides various ways to set up the environment, including four distinct modes: Disconnected Mode , Connected Mode , Integrated Mode , and API Mode . Each mode offers unique features for different stages of development and production needs. What Is Disconnected Mode? Disconnected Mode is designed for local development and testing without requiring a direct connection to the Sitecore platform. In this mode, data is typically retrieved from static files (like YAML or JSON), and content updates are done manually. This mode is ideal for frontend developers who want to focus on building the user interface and the site’s functionality without waiting for backend integration. In Disconnected Mode , the data flow is not dependent on the Sitecore CMS. Instead, content is stored locally in static files, which are easier to manage and qu...
Read more

Translating Sitecore items’ field values into different language with PowerShell and Translate API

Image
Recently, we encountered a situation where we needed to translate multiple Sitecore field values across numerous items into different languages. Manually handling each item and field was both time-consuming and complex—especially since actual translation was required, not just copying values between language versions. We explored various approaches to streamline the process. While AI-based solutions seemed promising, but client side Compliances for AI usage ruled out that option. Another practical alternative was to use spreadsheets like Excel or CSV files containing translated content and then import those values into Sitecore using PowerShell scripts. During our exploration, we discovered a freely accessible translation API that doesn't require an API key. By leveraging this in our PowerShell script, we were able to automate the translation process and directly apply the translated content to the appropriate language versions of the Sitecore items—saving both time and effort. ...
Read more

Create Sitecore Ribbon Button using Sitecore PowerShell Extensions

Image
Creating a custom Ribbon button in Sitecore using Sitecore PowerShell Extensions (SPE) involves several steps, which I'll guide you through below. The general process includes Create PowerShell Script Module and Add Integration Point Setup the PowerShell script Library and Add PowerShell script Configuring the Ribbon button and Sync Verify the button in the Ribbon Here's how we can achieve that: Pre-Requisites: Running Sitecore Instance PowerShell ISE to run PowerShell script (Install compatible Sitecore.PowerShell.Extensions if it’s not there) Step-1: Create PowerShell Script Module and Add Integration Point Create PowerShell Script Module: Go to Content Editor . In the content tree, navigate to: System > Modules > PowerShell > Script Library . Right-click on Script Library and select Insert > PowerShell Script Module . Give it a name, su...
Read more