App RouterとMDXで作る、初めてのNext.js 16ブログ

まず、Node.js 18.18以降がインストールされていることを確認してください。ターミナルを開きます：

npx create-next-app@latest neowhisper-blog

以下のオプションを選択してください：

• TypeScript? Yes（必須です）
• Tailwind CSS? Yes（2026年の標準です）
• App Router? Yes
• Import Alias? Yes (@/*)

Markdownの手軽さとReactのパワーを両立させます。必要なパッケージをインストールします：

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

次に 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);

そして、ルートディレクトリに mdx-components.tsx を作成します：

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 }) => (
      <h2 className="text-3xl font-bold mb-3 mt-8">{children}
    ),
    :  (
      
    ),
    ...components,
  };
}

コードは綺麗に保ちましょう。記事は src/content/posts に保存します。

src/
├── app/              # ルーティング
├── components/       # UIコンポーネント
├── content/          # MDXファイル
│   └── posts/
│       └── first-post.mdx
└── lib/              # ユーティリティ
    └── posts.ts

最初の記事 src/content/posts/first-post.mdx を作成します：

---
title: "初めての投稿"
date: "2026-01-13"
excerpt: "Hello world!"
coverImage: "/images/first-post.png"
---

# Hello World

これが最初の投稿です。

src/lib/posts.ts を作成してファイルを読み込みます。App Routerでは、単純にデータをフェッチするだけで済みます。複雑な状態管理は不要です。

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.replace(, );
       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.,
    }  ;
  }  {
     ;
  }
}

src/app/page.tsx で記事を取得して表示します：

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">最新の投稿</h1>
      <div className="grid md:grid-cols-2 gap-8">
        {posts.map((post) => (
          <ArticleCard key={post.slug} post={post} />
        ))}
      </div>
    </main>
  );
}

個別記事 (src/app/blog/[slug]/page.tsx) は、ビルド時に静的に生成 (generateStaticParams) します：

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

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

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

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

   (
    
  );
}