Building Your First Next.js 16 Blog with App Router and MDX

First, make sure you have Node.js 18.18 or newer. Open your terminal:

npx create-next-app@latest neowhisper-blog

Select these options when prompted:

• TypeScript? Yes (Always)
• Tailwind CSS? Yes (Standard in 2026)
• App Router? Yes
• Import Alias? Yes (@/*)

We want the simplicity of Markdown with the power of React. Install the MDX packages:

npm install @next/mdx @mdx-js/loader @mdx-js/react gray-matter date-fns
npm install -D @types/mdx

Then configure next.config.js:

import createMDX from "@next/mdx";

/** @type {import('next').NextConfig} */
const nextConfig = {
  pageExtensions: ["js", "jsx", "md", "mdx", "ts", "tsx"],
};

const withMDX = createMDX({
  options: {
    remarkPlugins: [],
    rehypePlugins: [],
  },
});

export default withMDX(nextConfig);

And create mdx-components.tsx in your root:

import type { MDXComponents } from "mdx/types";

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    h1: ({ children }) => (
      <h1 className="text-4xl font-bold mb-4">{children}</h1>
    ),
    h2: ({ children }) => (
      < =>{children}
    ),
    :  (
      
    ),
    ...components,
  };
}

Keep it clean. Store your posts in src/content/posts.

src/
├── app/              # Routes
├── components/       # UI Components
├── content/          # MDX Files
│   └── posts/
│       └── first-post.mdx
└── lib/              # Utilities
    └── posts.ts

Create your first post: src/content/posts/first-post.mdx:

---
title: "My First Post"
date: "2026-01-13"
excerpt: "Hello world!"
coverImage: "/images/first-post.png"
---

# Hello World

This is my first post.

Create src/lib/posts.ts to read your files. In the App Router, you can just fetch data directly—no complex state needed.

import fs from "fs";
import path from "path";
import matter from "gray-matter";

const postsDirectory = path.join(process.cwd(), "src/content/posts");

export type Post = {
  slug: string;
  title: string;
  date: string;
  excerpt: string;
  coverImage: string;
  content: string;
};

export async function getAllPosts(): Promise<Post[]> {
  const fileNames = fs.readdirSync(postsDirectory);
  const allPostsData = fileNames
    .filter((fileName) => fileName.endsWith(".mdx"))
    .map((fileName) => {
      const slug = fileName.(, );
       fullPath = path.(postsDirectory, fileName);
       fileContents = fs.(fullPath, );
       { data, content } = (fileContents);

       {
        slug,
        content,
        : data.,
        : data.,
        : data.,
        : data.,
      }  ;
    });

   allPostsData.( (a. < b. ?  : -));
}

   (): < | > {
   {
     fullPath = path.(postsDirectory, );
     fileContents = fs.(fullPath, );
     { data, content } = (fileContents);

     {
      slug,
      content,
      : data.,
      : data.,
      : data.,
      : data.,
    }  ;
  }  {
     ;
  }
}

In src/app/page.tsx, fetch and render your posts:

import { getAllPosts } from "@/lib/posts";
import ArticleCard from "@/components/ArticleCard";

export default async function Home() {
  const posts = await getAllPosts();

  return (
    <main className="container mx-auto px-4 py-12">
      <h1 className="text-4xl font-bold mb-8">Latest Thoughts</h1>
      <div className="grid md:grid-cols-2 gap-8">
        {posts.map((post) => (
          <ArticleCard key={post.slug} post={post} />
        ))}
      </div>
    </main>
  );
}

For individual posts (src/app/blog/[slug]/page.tsx), use generateStaticParams to statically generate them at build time:

import { getPostBySlug, getAllPosts } from "@/lib/posts";
import { notFound } from ;
 {  }  ;

   () {
   posts =  ();
   posts.( ({ : post. }));
}

   () {
   post =  (params.);
   (!post)  { :  };
   { : post., : post. };
}

    () {
   post =  (params.);
   (!post) ();

   (
    
  );
}