Vercel deployment
Njideka Akunyili Crosby
Created: Sep 04, 2024
The best way to deploy this Next.js app is to use the Vercel Platform from the creators of Next.js.
Vercel provides pre-production features that couple perfectly with Headlesshost staging sites. These features enable users to preview content changes in real time and collaborate with the Vercel inline commenting tools.
If you haven't already deployed, click on the link below where you will be guided through the Vercel deploy.
All going well the application should be running on the Vercel environment and the content should look similar to this site.
Click Visit inside your Vercel project site to verify the application is running.
We now need to login or create an account in Headlesshost so we can create our own content.
Headlesshost account setup
We are now going to login or create a Headlesshost account. Once logged in we can create a new content site and connect the Next.js template.
Login or create
Click on the login button.
Once signed into Headlesshost select the option to create a new content site.
Choose "React - Next.js - Documentation sample"
Now that the content site is created we want to copy the content site Id.
Back in the Vercel project, click on Settings and choose Environment Variables.
Add a new variable called HEADLESSHOST_SITEID and set its value to be your newly created content site id.
Now navigate to the deployments tab and redeploy the latest version of your application. Doing this will apply your variable change.
Your site should have updated to look like the image below. The next stage is to add your own content and set the staging site instance for hot reloading.
Final configuration
The next step is to configure your staging site and add content.
Note: It is important to complete the next steps to enable hot reloading.
Final config
