Setting Up Sitecore XM Cloud with Next.js and deploy to Vercel
This guide will help you set up your Sitecore XM Cloud project integrated with Next.js and deploy it using Vercel for streamlined hosting and efficient development workflows.
1. Getting Started with XM Cloud Deploy
– Log in to the [Sitecore Portal](https://portal.sitecorecloud.io/) and select “XM Cloud Deploy” from the quick links.
– Create a new project under the Projects section and assign a unique name to your project.
– Connect Source Control: Link your project to a source control system like GitHub. Follow the XM Cloud deployment wizard to set up a new GitHub repository using the XM Cloud template.
2. Setting Up the Authoring Environment
– Create a development environment and enable “Auto deploy on push to repository” for automatic redeployments.
– Review your configurations on the summary screen and start the deployment.
3. Deployment Process Overview
– Repository Creation: XM Cloud generates a new repository with code from the `sitecorelabs/xmcloud-foundation-head` template.
– Infrastructure Provisioning: Sitecore XM Cloud provisions the Content Management (CM) environment.
– Source Code Build: XM Cloud pulls the code, compiles the Sitecore solution and the Next.js front end as part of the integrated build pipeline.
– Deployment of Build Artifacts: The final build artifacts are deployed to the CM instance and the front end is deployed to a hosted rendering environment.
4. Creating a Site
– Go to the Projects tab and select the environment.
– Navigate to the Sites tab and click “Create site.”
– Choose the Basic template for the site and configure its name, language, and unique identifier for analytics.
– Start the site creation, which should complete in about 2 minutes.
5. Local Development Environment Setup
– Clone the project from your repository.
– Install dependencies:
npm install
– Configure Environment Variables:
Copy the necessary variables from the XM Cloud portal and add them to the `.env` file located at `headapps/nextjs-starter/.env`.
– Launch the application:
npm run start:connected
– Verify by opening [http://localhost:3000](http://localhost:3000) in your browser.
6. Deploying with Vercel
– Go to the Sites tab in the Sitecore Portal, find your site, and click the three-dot icon to set up hosting.
– Choose or create a Vercel installation.
– Push your application code to the linked GitHub repository.
– On Vercel, import the project and specify the Root Directory.
– Add Environment Variables:
– `SITECORE_EDGE_CONTEXT_ID`
– `SITECORE_SITE_NAME`
– `JSS_EDITING_SECRET`
– Deploy the application by clicking “Deploy.” The app will go live with Vercel’s automated build and deployment processes.
Takeaway:
By integrating Sitecore XM Cloud with Vercel, you streamline your development and deployment workflows, benefiting from Vercel’s scalable, efficient hosting. This setup ensures real-time previews, continuous deployments, and a high-performance environment for delivering dynamic content experiences.
