ok

app/(pages)/blogs/[slug]/page.tsx

@@ -0,0 +1,25 @@
+import fs from "fs/promises";
+
+interface PropsParams {
+    slug: string;
+}
+
+interface Props {
+    params: Promise<PropsParams>;
+}
+
+export default async function Page({ params }: Props) {
+    const { slug } = await params;
+    const { default: Post, metadata } = await import(`@/blogs/${slug}.mdx`);
+    return <Post />;
+}
+
+export async function generateStaticParams() {
+    const blogs = (await fs.readdir("blogs")).filter((name) =>
+        name.endsWith(".mdx"),
+    );
+    return blogs.map((name) => ({
+        slug: name.replace(/\.mdx$/, ""),
+    }));
+}
+export const dynamicParams = false;

app/(pages)/layout.tsx

@@ -0,0 +1,16 @@
+import Header from "@/components/ui/header";
+
+interface Props {
+    children: React.ReactNode;
+}
+
+const Layout: React.FC<Props> = ({ children }) => {
+    return (
+        <>
+            <Header />
+            <main className="mx-auto my-6 max-w-3xl px-4">{children}</main>
+        </>
+    );
+};
+
+export default Layout;

blogs/hello.mdx

@@ -0,0 +1,7 @@
+export const metadata = {
+    title: "書き直し",
+    description: "久しぶりに書き直しました。",
+    datetime: "2025/05/03",
+};
+
+# Hello

components/ui/header.tsx

@@ -0,0 +1,30 @@
+const Header: React.FC = () => {
+    return (
+        <header className="border-b border-gray-200 bg-white shadow-sm">
+            <div className="mx-auto flex h-16 max-w-3xl items-center justify-between px-4">
+                <div className="flex items-center">
+                    <h1 className="text-2xl font-bold">tuna2134</h1>
+                </div>
+                <nav className="flex space-x-4">
+                    <a href="/" className="text-gray-700 hover:text-gray-900">
+                        Home
+                    </a>
+                    <a
+                        href="/about"
+                        className="text-gray-700 hover:text-gray-900"
+                    >
+                        About
+                    </a>
+                    <a
+                        href="/contact"
+                        className="text-gray-700 hover:text-gray-900"
+                    >
+                        Blog
+                    </a>
+                </nav>
+            </div>
+        </header>
+    );
+};
+
+export default Header;

lib/blog.ts

@@ -0,0 +1,5 @@
+export interface Metadata {
+    title: string;
+    description: string;
+    datetime: string;
+}

mdx-components.tsx

@@ -0,0 +1,7 @@
+import type { MDXComponents } from "mdx/types";
+
+export function useMDXComponents(components: MDXComponents): MDXComponents {
+    return {
+        ...components,
+    };
+}

next.config.ts

@@ -1,4 +1,5 @@
 import type { NextConfig } from "next";
+import createMDX from "@next/mdx";
 
 const nextConfig: NextConfig = {
     images: {
@@ -9,10 +10,13 @@ const nextConfig: NextConfig = {
             },
         ],
     },
+    pageExtensions: ["js", "jsx", "md", "mdx", "ts", "tsx"],
 };
 
 if (process.env.OUTPUT === "standalone") {
     nextConfig.output = "standalone";
 }
 
-export default nextConfig;
+const withMDX = createMDX();
+
+export default withMDX(nextConfig);

package.json

@@ -10,6 +10,10 @@
     "format": "prettier -w './**/*.{tsx,ts}'"
   },
   "dependencies": {
+    "@mdx-js/loader": "^3.1.0",
+    "@mdx-js/react": "^3.1.0",
+    "@next/mdx": "^15.3.1",
+    "@types/mdx": "^2.0.13",
     "iconoir-react": "^7.11.0",
     "next": "15.3.1",
     "react": "^19.0.0",

tsconfig.json

@@ -22,6 +22,6 @@
       "@/*": ["./*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "blogs/hello.mdx"],
   "exclude": ["node_modules"]
 }