[Next.js] MDX 기반 개발 블로그 구축하기

// next.config.ts
import type { NextConfig } from "next";
 
const nextConfig: NextConfig = {
  /* config options here */
  transpilePackages: ["next-mdx-remote"],
};
 
export default nextConfig;

// @/content/posts/test-1.mdx
 
---
 
title: "테스트 포스트 1 - React Hooks 기초"
date: "2025-10-13"
description: "useState와 useEffect 기본 사용법"
author: "프론트엔드 개발자 권순용"
parentCategory: "Frontend"
tags: ["React", "Hooks", "JavaScript"]
thumbnail: "/images/thumbnails/nextjs.webp"
 
---
 
## React Hooks란?
 
React 16.8 버전부터 추가된 기능으로, 함수형 컴포넌트에서도 상태 관리와 생명주기 기능을 사용할 수 있게 해줍니다.
 
### useState 예제
 
```jsx
import { useState } from "react";
 
function Counter() {
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <p>카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}
```
 
### useEffect 예제
 
// 생략...

// @/lib/mdx.ts
import fs from "fs";
import path from "path";
import matter from "gray-matter";
import { BlogPost } from "@/types";
import { getTime } from "date-fns";
 
// MDX 파일들이 저장된 디렉토리 경로
const postsDirectory = path.join(process.cwd(), "content/posts");
 
export function getAllPosts(): BlogPost[] {
  // 포스트 디렉토리의 모든 파일명을 배열로 가져오기
  const fileNames = fs.readdirSync(postsDirectory);
 
  // 각 파일을 순회하며 BlogPost 객체로 변환
  const allPostsData = fileNames.map((fileName) => {
    // 파일명에서 .mdx 확장자를 제거하여 slug 생성 (추후 포스팅 컨텐츠 페이지 URL에 사용)
    const slug = fileName.replace(/\.mdx$/, "");
    // 파일의 전체 경로 생성
    const fullPath = path.join(postsDirectory, fileName);
 
    const fileContents = fs.readFileSync(fullPath, "utf8");
 
    // gray-matter로 frontmatter(메타데이터) 추출
    const { data } = matter(fileContents);
 
    return {
      slug,
      title: data.title,
      date: data.date,
      description: data.description,
      parentCategory: data.parentCategory,
      tags: data.tags,
      author: data.author,
      thumbnail: data.thumbnail,
    };
  });
 
  return allPostsData.sort((a, b) => getTime(b.date) - getTime(a.date));
}

// @/app/page.tsx
import { getAllPosts } from "@/lib/mdx";
import PostCard from "@/components/post-card";
 
export default async function Home() {
  const posts = getAllPosts();
 
  return (
    <div className="gap-0 md:flex md:gap-8">
      <div className="flex-1">
        <div className="flex flex-col gap-6 md:grid md:grid-cols-2 lg:flex lg:flex-col">
          {posts.map((post) => (
            <PostCard key={post.slug} post={post} />
          ))}
        </div>
      </div>
    </div>
  );
}

// @/lib/mdx.ts
 
// 생략...
 
export function getPostBySlug(slug: string): BlogPost {
  const fullPath = path.join(postsDirectory, `${slug}.mdx`);
  const fileContents = fs.readFileSync(fullPath, "utf8");
 
  const { data, content } = matter(fileContents);
 
  return {
    slug,
    title: data.title,
    date: data.date,
    description: data.description,
    parentCategory: data.parentCategory,
    tags: data.tags,
    author: data.author,
    thumbnail: data.thumbnail,
    content,
  };
}
 
export function getAllPostSlugs(): string[] {
  const fileNames = fs.readdirSync(postsDirectory);
  // 각 파일명에서 .mdx 확장자를 제거하여 slug만 추출
  return fileNames.map((fileName) => fileName.replace(/\.mdx$/, ""));
}

// @/app/posts/[slug].tsx
export async function generateStaticParams() {
  const slugs = getAllPostSlugs();
  return slugs.map((slug) => ({
    slug,
  }));
}
 
export default async function PostPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const post = getPostBySlug(slug);
 
  if (!post) {
    notFound();
  }
 
  return (
    <article>
      <PostHeader title={post.title} date={post.date} />
      <PostBody content={post.content || ""} />
    </article>
  );
}

import { MDXRemote } from "next-mdx-remote/rsc";
import remarkGfm from "remark-gfm";
import remarkBreaks from "remark-breaks";
import rehypePrettyCode from "rehype-pretty-code";
import { MDXComponents } from "./mdx-components";
 
export default function PostBody({ content }: { content: string }) {
  return (
    <div className="prose prose-lg max-w-none">
      <MDXRemote
        source={content}
        components={MDXComponents}
        options={{
          mdxOptions: {
            remarkPlugins: [remarkGfm, remarkBreaks],
            rehypePlugins: [
              [
                rehypePrettyCode,
                {
                  theme: "one-dark-pro",
                  keepBackground: true,
                },
              ],
            ],
          },
        }}
      />
    </div>
  );
}

export const MDXComponents = {
  h1: (props: React.HTMLAttributes<HTMLHeadingElement>) => (
    <h1
      className="text-8xl font-extrabold text-red-600 border-b-2 border-red-600 pb-2"
      {...props}
    />
  ),
};