Prerequisite.

In this case, we prepared the following environment to connect Sitecore and Next.js applications.

• Sitecore Experience Platform 10.1
• Sitecore PowerShell Extensions 6.2
• Sitecore Experience Accelerator 10.1
• Sitecore Headless Services Server for Sitecore 10.1.0 XP 16.0.0

For ease of use, the domain name is set up as follows and a wildcard certificate is used. The server for this work is set up as a virtual machine in a public cloud (the name below is a provisional name, so you may want to use your own domain name or other name for the actual machine at hand).

• jssdemo.cmsdemo.jp ( Sitecore Experience Platform)
• iddemo.cmsdemo.jp ( Sitecore Identity Server )

Prepare API Key

The first step is to create an API key to link the JSS application with Sitecore.

• Open the content editor
• sitecore - system - Settings - Services - API Keys Select item

• Create a new API key by right-clicking on the API Keys button for the screen above, or right-clicking on API Keys in the tree for a different screen
• Enter the name of the API key

• Set * for both CORS Origins and recognized controllers.

The key is the Item ID of the API Key you created. The created item must be made public, so please follow the steps below to make it public.

• Select the desired item in the Content Editor
• Open the Publish tab
• Click ▼ on the Publish icon, click Publish Item

Check the necessary items in the dialog and execute the publish.

When the item has been published, to check if the API Key is valid, access the item using https://yourhostname/sitecore/api/layout/render/jss?item=/&sc_apikey={YOUR_API_KEY_ID} and the URL to which you added the API and check if the JSON data is displayed.

Next.js application settings

Then start the setup using the API key you created: go to the Next.js app folder and run the JSS command.

jss setup

The items that will be asked are as follows

• You will be asked if the Sitecore instance is shared on this machine or on the network.
• In this case, since we are running on a different machine, we select n.
• Information about the host name is then displayed.
• This time, enter https://jss.dev.local
• The URL of the service for import is displayed
• No problem with defaults
• API Key confirmation.
• Enter the pre-created API key
• A confirmation of the private key for deployment will be displayed
• A confirmation of the private key for deployment will be displayed

Once the above process is complete, the required files are generated.

The above message indicates that the secret key for deployment is found in a file in sitecore/config/nextjs-app.deploysecret.config.

Reflect settings in Sitecore

If you have direct network access to the Sitecore instance, the following command will copy the configuration file.

jss deploy config

This time, since we are not connected to the virtual machine by a connection, we copy the two config files in /sitecore/config, which are created after running jss setup.

Create a folder App_Config¥Include¥zzz and copy the two files into the Sitecore configuration folder, you have done the same work as jss deploy config.

Import

Once the above settings have been completed, all that remains is to execute the command.

jss deploy items -c -d 

Once the import is complete, the item will appear in the Sitecore content tree as shown below.

Summary

In this article, we introduced the procedure for importing data held in the Next.js application into Sitecore, and since there are still a few more tips regarding the integration between Next.js and Sitecore, we will introduce them in a few more articles.

• Building a sample site using Next.js SDK - Part. 1
• Building a sample site using Next.js SDK - Part. 2
• Building a sample site using Next.js SDK - Part. 3
• Building a sample site using Next.js SDK - Part. 4

Tags

• Next.js