Introduction
Next.js has become one of the most popular frameworks for building fast and SEO-friendly websites. When paired with Markdown, it becomes an excellent solution for creating lightweight and easy-to-manage blogs. Markdown simplifies content writing, while Next.js ensures optimal performance. Businesses looking to build such solutions can hire Next.js developers to create scalable, high-performing blogs with ease.
Why Use Next.js and Markdown for a Blog
Next.js offers server-side rendering (SSR), static site generation (SSG), and excellent SEO support. Markdown, on the other hand, allows authors to write content quickly using plain text formatting. Together, they provide a balance of performance, simplicity, and scalability.
Step 1: Set Up a Next.js Project
Start by creating a new Next.js application. Use the following command:
npx create-next-app my-blog
Navigate to your project folder and run the development server:
cd my-blog
npm run dev
This creates a boilerplate Next.js project ready for customization.
Step 2: Install Dependencies for Markdown
To work with Markdown files, install the following packages:
npm install gray-matter remark remark-html
- gray-matter extracts metadata (front matter) from Markdown.
- remark and remark-html help parse and convert Markdown into HTML.
Step 3: Create a Posts Directory
Inside your project, create a posts folder in the root directory. Add your Markdown files here. Example:
---
title: "My First Blog Post"
date: "2025-09-15"
---
This is my first blog post using Next.js and Markdown!
Step 4: Fetch Markdown Content
Use Node.js to read Markdown files from the posts directory. Create a helper function in lib/posts.js:
import fs from 'fs'
import path from 'path'
import matter from 'gray-matter'
const postsDirectory = path.join(process.cwd(), 'posts')
export function getAllPosts() {
const fileNames = fs.readdirSync(postsDirectory)
return fileNames.map(fileName => {
const slug = fileName.replace(/\.md$/, '')
const fullPath = path.join(postsDirectory, fileName)
const fileContents = fs.readFileSync(fullPath, 'utf8')
const { data, content } = matter(fileContents)
return {
slug,
...data,
content
}
})
}
Step 5: Create Blog Pages with Dynamic Routing
In Next.js, create dynamic routes for each blog post. Add a [slug].js file under pages/posts/:
import { getAllPosts } from '../../lib/posts'
import Head from 'next/head'
export async function getStaticPaths() {
const posts = getAllPosts()
const paths = posts.map(post => ({ params: { slug: post.slug } }))
return { paths, fallback: false }
}
export async function getStaticProps({ params }) {
const posts = getAllPosts()
const post = posts.find(p => p.slug === params.slug)
return { props: { post } }
}
export default function Post({ post }) {
return (
<>
<Head>
<title>{post.title}</title>
</Head>
<article>
<h1>{post.title}</h1>
<p>{post.date}</p>
<div>{post.content}</div>
</article>
</>
)
}
Step 6: Convert Markdown to HTML
To render Markdown properly, update your code using remark:
import { remark } from 'remark'
import html from 'remark-html'
export async function markdownToHtml(markdown) {
const result = await remark().use(html).process(markdown)
return result.toString()
}
Update the post component to use converted HTML.
Step 7: Create an Index Page
Add a blog index page to list all posts. In pages/index.js:
import { getAllPosts } from '../lib/posts'
import Link from 'next/link'
export async function getStaticProps() {
const posts = getAllPosts()
return { props: { posts } }
}
export default function Home({ posts }) {
return (
<div>
<h1>My Blog</h1>
<ul>
{posts.map(post => (
<li key={post.slug}>
<Link href={`/posts/${post.slug}`}>{post.title}</Link>
</li>
))}
</ul>
</div>
)
}
Step 8: Deploy Your Blog
Once your blog is ready, deploy it on Vercel, the official platform for Next.js. Vercel offers seamless integration and automatic optimizations for Next.js projects.
Conclusion
Building a blog with Next.js and Markdown combines speed, SEO optimization, and simplicity. Developers enjoy flexibility, while content creators get an easy way to manage articles. With a professional setup from a trusted Next.js development company, your blog can scale as your audience grows, offering an excellent digital experience.
