Vercel is a popular hosting platform that provides serverless deployment for NextJS applications. However, it is not the only available option available. In this blog, we outline the steps that need to be followed to set up Sitecore with NextJS without using Vercel.

 

Set Up Your NextJS Project

First, we begin with setting up the Sitecore instance by installing and configuring Sitecore according to our requirements. This includes creating templates, content items, and configuring data access APIs. Now we proceed toward setting up our NextJS project:

• Create a new NextJS project or integrate NextJ into your existing project. You can use the NextJS CLI or follow the manual setup process to configure NextJS. Open your terminal or command prompt, navigate to the desired directory, and run the following command to create a new Next.js project:

  “npx create-next-app my-blog”

  



• Ensure that you have NodeJS installed on your machine. You can download it from the official website (https://nodejs.org) and follow the installation instructions.

  

Integrate Sitecore APIs

Use Sitecore's APIs (such as the Content Delivery API or GraphQL) to retrieve data from your Sitecore instance. You can make API requests from your NextJS components or use data fetching methods like ‘getStaticProps’ or ‘getServerSideProps’ to fetch data during the server-side rendering process. Then, install the required dependencies by running the following command:’

“npm install --save-dev @sitecore-jss/sitecore-jss-cli”

Set up Sitecore JSS

• Follow the Sitecore JSS steps to set up a Sitecore instance and create a new JSS app. Make sure you have the necessary Sitecore JSS CLI tools installed.


• Configure the JSS app in NextJs. Once your JSS app is created in Sitecore, you need to configure it in your NextJS project. Update the Sitecore/config.js file in your project with the appropriate values for your Sitecore instance, including the host, layout service API key, and app name.



• We login into Sitecore and go to /sitecore/system/Settings/Services/API Keys and we create a new item, give it a name, and copy the ID somewhere, this gonna be our API key moving forward.

Now, we run the following command to start setting up it in visual studio code:

“jss setup”

Configure Routing

The next step is to define routes in your NextJS project to handle different pages and content items. You can use NextJS's dynamic routing capabilities to create dynamic routes based on Sitecore data.

Build and Deploy Your Next.js Project

Once your project is ready, build the NextJS application using the appropriate build command:

‘npm run build’

After the build process is complete, you can deploy the built files to any hosting platform of your choice. This can include traditional web servers, cloud platforms like AWS or Azure, or even other serverless platforms. We can now start our JSS App in connected mode using the command:

“jss build”

And finally, run the following command:

“jss start:connected”

This command will start the development server, and you can access your blog by visiting http://localhost:3000 in your browser.

It is important to note here that without Vercel, you may need to set up your infrastructure, handle deployment and scaling, and manage server-side rendering and caching strategies on your own or with the help of other tools. Vercel simplifies this process by providing an integrated hosting and deployment platform specifically designed for NextJS applications.

Conclusion

To integrate Sitecore with NextJS without relying on Vercel for hosting and deployment, you need to follow a series of steps. Begin by setting up your Sitecore instance by configuring templates and data access APIs and then either create a new NextJS project or incorporate NextJS into an existing project.

Continue with installing the Sitecore JSS CLI and configuring the JSS app within your NextJS project using the provided configuration file. Once the configuration is in place, you will have to integrate the Sitecore APIs to fetch data from your Sitecore instance. You can make API requests directly from your NextJS components or utilize data fetching methods like ‘getStaticProps’ or ‘getServerSideProps’.

Now you will build your NextJS application using the appropriate build command. This will generate the necessary production-ready files. You can then deploy these files to your preferred hosting platform or infrastructure of choice. Finally, you'll start your JSS app in connected mode to test and access your blog.

If you are curious to learn more about integrating Sitecore with NextJS without relying on Vercel, then reach out to us.