Next.js Contentful Blog

Next.js Contentful Blog is a starter template for a personal blog and portfolio website that uses Next.js as the React framework, Contentful as the headless CMS backend, and Tailwind CSS for styling.

What is this template?

This template is a full blog and portfolio starter built with Next.js, Tailwind CSS, and Contentful. It connects to a Contentful space, pulls content defined by custom content types, and statically generates a website. The input is your Contentful space with content types and entries; the output is a deployable Next.js static site. The author runs a live demo at willsaaada.com and wrote a setup guide at willsaaada.com/blog/nextjs-contentful-blog-setup.

Key Features

• Contentful CMS integration — Content is stored and edited in Contentful, which acts as the backend CMS; content types define the structure for blog posts and portfolio items.
• Static generation with Next.js — Next.js fetches Contentful content at build time to produce a static website that can be hosted on any static host.
• Tailwind CSS styling — The interface is styled with Tailwind CSS utility classes, making layout and theme changes fast without writing custom CSS.
• Auto-provisioning script — The npm run add-content command uses your Contentful CMA token to create the expected content types and placeholder entries automatically.
• Two API key support — The template requires one Contentful preview API key for draft content and one delivery API key for published content.
• Personal blog and portfolio sections — The site demonstrates both a blog and a portfolio, showing how multiple content types render on different pages.
• TypeScript codebase — The repository topics list TypeScript, indicating the Next.js code is written with TypeScript for type safety.

Who is it for?

• Developers launching a personal site — Clone the repo, connect your Contentful space, run the setup script, and replace the placeholder content with your own writing and projects.
• Content creators who prefer a CMS — Instead of editing Markdown files, publish posts and portfolio updates from the Contentful web dashboard.
• Next.js learners — The project is a complete, readable example of Server-side fetching from a headless CMS, static generation, and environment variable setup.

What can you do with this template?

• Publish blog posts: Write articles in Contentful and they are automatically fetched and rendered on the blog pages of the Next.js site.
• Manage a portfolio: Define portfolio content types and display project information, images, and links in a dedicated portfolio section.
• Customize the design: Since all styling is Tailwind utility classes, you can change colors, spacing, and typography by editing the classes in the components.
• Model new content types: Use Contentful's content type builder to add new structures and render them by adding new Next.js pages or components.

How does this template work?

The setup process is documented in the README. After creating a free Contentful account and a space, you generate a CMA token and two API keys (preview and delivery). You store these credentials in a .env.local file as CONTENTFUL_URL, CONTENTFUL_API_KEY, and CMA_TOKEN. Then running npm install and npm run add-content creates the content types and sample data, and npm run dev starts the local development server.