Next.js Ghost CMS Blog Starter

Next.js Ghost CMS Blog Starter is a blog boilerplate template that pairs a Next.js frontend with a Ghost CMS backend and Disqus comments, giving you a ready-to-deploy blog stack.

What is Next.js Ghost CMS Blog Starter?

This template is a starter blog application built on Next.js, using Ghost as its content management system and Disqus for comments. It takes a Ghost Content API key and blog URL from a .env file and renders blog posts from Ghost on a standard create-next-app project. The result is a blog frontend that you can develop locally and deploy to Vercel.

Key Features

• Next.js framework — Built on Next.js with the standard create-next-app setup, enabling React-based server-side rendering and static generation.
• Ghost CMS backend — Connects to any Ghost instance through the Ghost Content API; the README includes a button to deploy a Ghost instance on Heroku from the ghost-on-heroku template.
• Disqus comments — Integrated Disqus service for managing reader comments on blog posts.
• Environment-based configuration — Reads CONTENT_API_KEY and BLOG_URL from a .env file, so pointing the site at a different Ghost blog only requires changing those two variables.
• One-command local development — Install dependencies with yarn install and start a dev server with npm run dev or yarn dev, serving the site at http://localhost:3000.
• One-click Vercel deployment — The repository includes a Vercel deploy button that connects the GitHub repo to a Vercel project for instant hosting.

Who is it for?

This template suits developers who want to launch a blog on a JAMstack-style architecture without building the frontend from scratch. It also helps Ghost users who prefer a Next.js frontend over Ghost's default themes, and anyone learning how to integrate Ghost's Content API with a React framework.

What can you do with this template?

• Developers: Spin up a blog with Next.js and Ghost, then deploy to Vercel in a few clicks.
• Ghost users: Give your Ghost content a custom Next.js frontend while using Ghost's admin for publishing.
• Bloggers: Add Disqus comments to articles without writing any backend code.

How does it work?

The README outlines three steps: first, get a Ghost instance running — the provided button deploys a Ghost instance on Heroku; second, create a .env file with your CONTENT_API_KEY and BLOG_URL from the Ghost setup; third, run yarn install and then npm run dev or yarn dev to start the site at http://localhost:3000.

FAQ

Can I use my own Ghost instance?

Yes, the template only requires a Ghost Content API key and a blog URL, so you can point it at any Ghost instance. The Heroku deploy button in the README is just one way to create a Ghost instance, not a requirement.

How do I deploy this template to Vercel?

The README includes a Vercel deploy button. Clicking it links your GitHub repository to Vercel and walks you through creating a new project, so your blog gets hosted without manual configuration.

What environment variables do I need to set?

You need two variables in a .env file at the project root: CONTENT_API_KEY, which is your Ghost Content API key, and BLOG_URL, which is the URL of your Ghost blog.