Next.js Git Blog (5): MDX 도입과 데이터 독립성에 대한 고찰

# 새로운 MDX 파서 설치
pnpm install next-mdx-remote
 
# 기존 마크다운 라이브러리 삭제
pnpm uninstall remark-html remark

// markdown-utils.ts
 
export const getAllSlugs = (section: string): string[] => {
	const sectionPath = path.join(contentRoot, section);
	if (!fs.existsSync(sectionPath)) return [];
 
	return (
		fs
			.readdirSync(sectionPath)
			// 1. .md 또는 .mdx로 끝나는 파일만 필터링
			.filter((file) => /\.mdx?$/.test(file))
			.sort((a, b) => b.localeCompare(a))
			// 2. 확장자 부분을 제거 (.md 또는 .mdx)
			.map((file) => file.replace(/\.mdx?$/, ''))
	);
};
 
export const getMarkDown = async (section: string, slug: string) => {
	// 후보 파일 경로 생성
	const mdxPath = path.join(contentRoot, section, `${slug}.mdx`);
	const mdPath = path.join(contentRoot, section, `${slug}.md`);
 
	// 실제 존재하는 파일 경로로 선택
	const fullPath = fs.existsSync(mdxPath) ? mdxPath : mdPath;
 
	const fileContents = fs.readFileSync(fullPath, 'utf8');
 
	// 마크다운의 메타데이터도 함께 포함됨
	const mdxSource = await serialize(fileContents, {
		parseFrontmatter: true, // 이 옵션이 gray-matter 역할을 대신함
		mdxOptions: {
			// 확장자에 따라 포맷을 유연하게 지정
			format: fullPath.endsWith('.mdx') ? 'mdx' : 'md',
		},
	});
 
	return {
		section,
		slug,
		mdxSource,
	};
};

// [slug].tsx
 
export const getStaticProps: GetStaticProps = async ({ params }) => {
	const { section, slug } = params as { section: string; slug: string };
 
	try {
		const post = await getMarkDown(section, slug);
		return { props: { ...post, section } };
	} catch (err) {
		return { notFound: true };
	}
};
 
const SlugPage = ({ mdxSource }: SlugPageProps) => {
	return (
		<article>
			<h1>{mdxSource?.frontmatter?.title || ''}</h1>
			<time>{mdxSource?.frontmatter?.date || ''}</time>
			<hr />
			{/* 파싱된 HTML을 렌더링 */}
			<div>{mdxSource && <MDXRemote {...mdxSource} />}</div>
		</article>
	);
};

---
title: 'MDX 연습'
date: '2025-07-25'
---
 
마크다운 본문 안에서 바로 버튼 컴포넌트를 만들고 이벤트를 할당해 보도록하자.
 
<div className='p-4 bg-gray-100 rounded-lg text-center w-[50%]'>
	<button
		className='bg-black text-white rounded-full py-2 px-6 hover:bg-gray-800'
		onClick={() => alert('MDX 내에서 클릭 이벤트가 발생했습니다')}
	>
		클릭
	</button>
</div>
 
위 버튼은 React 컴포넌트로 렌더링된 결과물이다.