Creating a simple and scalable Static Site with Next.JS and Contentful CMS

First things first, what is the tech stack and why do we use it?

1. Next.JS is a React framework developed by Vercel that enables several extra features, including server-side rendering and generating static SEO friendly websites. We would be using 11.1.0 as our main framework.
2. Vercel is a platform for static sites and frontend frameworks, built to integrate with your headless content, commerce, or database.
3. Contentful is the platform where you can update the content of your website, a mobile app or any other platform that displays content.

Let’s start

Step 1. Create your account and a space

First of all, create an account on Contentful. For now, you can go for a free trial version.

Create a new empty area from the dashboard once you’ve created an account and give it whatever name you choose.

Step 2. Setup your content model and types

The data structures of your application/websites are defined by the content model. The structures are adaptable, allowing you to customize them to your requirements.

Create a content model that defines an author and a post content type for this example:

• Create a content type called Author.
• Go to the content model and add a new content type from your contentful space.
• Give it the name Articles, and make the API Identifier articles.

Add below fields to your newly created content type:

• Title - Text field (type short text)
• Content - Rich text field
• Cover - Media field (type one file and validation to be only one file time i.e “Image”)
• Publish Date- Date and time field
• Author - Text field (type short text)

Continue after saving the content type.

Step 3. Publish Content

Go to the Content page from navigation bar and create 3 records for the content type Article. Use dummy data for Content, and a dummy image and author name for Cover and Author fields respectively.

Step 4. Get API keys and setup environment variables

From your contentful space, go to Settings > API keys, get your content delivery key. The content delivery key and space id will be used in your Next.JS application as environment variables in the .env file, which will be ignored by .gitignore, to fetch contentful data via Contentful Content Delivery API.

Step 5. Setup Next.JS Application

Run create-next-app with npm or Yarn to create a new Next.JS application.

Since we are creating a static site here. So, once your Next.JS application is ready, create a new page and fetch the records by using the getStaticProps function of Next.JS, and display these records on the page in tabular format.

Step 6. Deploy on Vercel and setup webhook

Vercel is the simplest way to deploy a production-ready, highly available Next.js website, with static assets served automatically through the CDN and built-in support for Next.js’ automatic static optimization and API routes. Deploy Webhooks allow you to create URLs that accept HTTP POST requests in order to trigger deployments and re-run the Build Step.

The project should then be pushed to GitHub/GitLab/Bitbucket and imported into Vercel for deployment. You can directly set the environment variables while deploying the application using the official documentation.

Now, get a deploy webhook from vercel and go to your contentful application.

On the contentful application navigate to Contentful > Settings > Webhooks. From the Webhook Templates, add a webhook for Vercel, enter the webhook URL copied from vercel to this webhook and submit.

This webhook will now trigger the static site generation and deployment on vercel whenever you publish new content on contentful.

And here we have, a powerful blog generated in few hours and ready to scale up your business.

Using the Compose app with Contentful, which we may cover in future articles, makes creating pages even easier.

All the best!

Thank you for reading

Sahil

Credits:

https://www.contentful.com/

https://vercel.com/

https://nextjs.org/