Deploying Next.js Commerce to Vercel

The easiest way to deploy a Next.js website to production is to use Vercel from the creators of Next.js. Vercel is an all-in-one platform with Global CDN supporting static & Jamstack deployment and Serverless Functions. You can get your Next.js and Agility CMS website deployed with a Preview Environment setup within minutes from your Agility CMS Manager!

What We'll Cover

Deploy Via Vercel Integration

Updating the Search Products API

Updating the Custom Field UI Extension in Agility

Deploy Via Vercel integration

We've made it super easy for you to deploy your Next.js and Agility projects to Vercel with the integration built-in to the Agility CMS Manager.

Note

You will need to have a GitHub and a Vercel account to get your project deployed.

To start, head by going into Settings > Sitemaps, then click Setup Deployment.

Screen_Shot_2021-03-11_at_12.57.25_PM.png

Select the Vercel Automated Deployment to connect to Vercel and deploy your Next.js website.

Screen_Shot_2021-03-11_at_12.58.19_PM.png

First, create a Git Repository for your project to ensure you can easily update your project after deploying it.

Screen_Shot_2021-08-19_at_3.01.05_PM.png

Next, Install the Agility CMS integration that will authorize access between Vercel and your Agility CMS content so that we can automatically configure your Production and Preview domains, as well as set up your Environment Variables.

Screen_Shot_2021-08-19_at_3.07.46_PM.png

Lastly, Vercel will fetch the source code for the nextjs-commerce-agilitycmsand it will be cloned into your Git repository. Vercel will also build your project and upload/deploy your build output.

Screen_Shot_2021-08-19_at_3.12.14_PM.png

When the build is complete, you should see a deployed version of the Next.js Commerce site on Vercel.

Screen_Shot_2021-08-19_at_3.17.12_PM.png

It is important to note that NO Ecommerce integration is configured during this deployment process. Depending on the Ecommerce provider decide to use, you'll need to add the corresponding Environment Variables to your Vercel Deployment. On the initial deployment, the Next.js Commerce site will display sample products as an example.

Updating the Search Products API

With the Next.js Commerce starter, we provide a Custom Field that allows you to search and select a product to add to any Page Module or Content Model, however you'll need to update the API URL Route within the code for the Next.js Commerce starter.

When deploying to Vercel, a new GitHub Repository will be created on your GitHub account containg the code for the Next.js Commerce starter, clone this to your local machine.

In the public directory, open up the custom-fields.js file and update the ajax url in the ChooseProductCustomField function to contain the domain of your deployed Next.js Commerce site on Vercel:

ajax: { 
  url: "https://ecommerce-svf5.vercel.app/api/search-products",
  //url: "http://localhost:3000/api/search-products",
},

Updating the Custom Field UI Extension in Agility

You will also want to update the Custom Field Script URL in the Agility Content Manager to point to the Custom Field script within your Next.js Commerce Site.

In Agility, head to Settings > UI Extensions. From there, update the Custom Fields Script URL with the URL from your Deployed Next.js Commerce site on Vercel.

Screen_Shot_2021-08-20_at_11.19.34_AM.png

0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.