Step 1: Setting up the Project with Next.js
-
Initialize a Next.js project:
npx create-next-app@latest my-headless-blog cd my-headless-blog
-
Install dependencies:
npm install axios react-markdown
Step 2: Configuring Ghost CMS
-
Set up Ghost CMS locally or use Ghost(Pro) for a hosted solution.
-
If local, install Ghost CMS:
npm install ghost-cli@latest -g ghost install local
-
For Ghost(Pro), sign up and create a new site.
-
-
Get the Content API key from Ghost.
- Navigate to
Integrations
in your Ghost admin area. - Create a custom integration named "Next.js Blog" and copy the Content API Key.
- Navigate to
Step 3: Integrating Ghost CMS with Next.js
-
Create a
.env.local
file in your Next.js project root and add your Ghost CMS API URL and key:GHOST_API_URL=
GHOST_API_KEY= -
Create a service to fetch posts from Ghost CMS:
-
In your Next.js project, create a file
services/ghost.js
:import axios from 'axios'; const GHOST_API_URL = process.env.GHOST_API_URL; const GHOST_API_KEY = process.env.GHOST_API_KEY; export const fetchPosts = async () => { const res = await axios.get(
${GHOST_API_URL}/ghost/api/v3/content/posts/?key=${GHOST_API_KEY}&fields=title,slug,custom_excerpt
); return res.data.posts; };
-
Step 4: Displaying Posts in Next.js
-
Modify the
pages/index.js
to display posts:import { fetchPosts } from '../services/ghost'; export default function Home({ posts }) { return (
My Headless Blog
{posts.map(post => ({post.title}
{post.custom_excerpt}
Step 5: Deploying on Heroku and Vercel
-
Deploy Ghost CMS on Heroku:
- Push your local Ghost CMS setup to a GitHub repository.
- Use Heroku to deploy the application from your GitHub repository.
-
Deploy Next.js on Vercel:
- Push your Next.js project to a GitHub repository.
- Use Vercel for deploying Next.js apps directly from your GitHub repository.
- Set up environment variables (
GHOST_API_URL
,GHOST_API_KEY
) in Vercel.
Conclusion
You have now set up a headless blog using Next.js, Ghost CMS, Heroku, and Vercel. This setup allows you to manage content through Ghost CMS and serve it through a fast, modern Next.js frontend, with deployments handled by Heroku and Vercel.