이전에 파일을 읽어오는 것 까지 구현했습니다.
이제 github의 markdown 파일을 보는 것처럼 태그를 적용해봅시다.

next-mdx-remote

mdx 콘텐츠를 렌더링을 하고 클라이언트로 전달합니다.

import { MDXRemote } from 'next-mdx-remote';

// 서버 컴포넌트 환경에서 사용할 때
import { MDXRemote } from 'next-mdx-remote/rsc';

export const Post = async({
	params
}:{
	params: Promise<{slug:string[]}>
}) => {
    const filename = path.join(
	    process.cwd(),
	    'mdxfiles/',
	    (await params).slug.join('/')
	)
    const { data, content } = matter.read(filename)
    return (
        <div>
            <div>{JSON.stringify(data, null, 2)}</div>
            <div>{content}</div>
            <br/>
            <MDXRemote
                source={content}
                components={{}}
                options={{
                    parseFrontmatter: true,
                    mdxOptions: {
                        remarkPlugins:[
                            remarkMdx,
                            remarkGfm
                        ],
                        rehypePlugins:[
                            
                        ],
                        format: 'mdx'
                    }
                }}
            />
        </div>
    )
}

이렇게 자동으로 태그들이 적용되어 브라우저에 나타나는 걸 볼 수 있습니다.

cannot use RSC mode at all. #488
2025.3.5 기준으로 Next.js 15.2.x 버전에서 작동이 안된다는 이야기가 있습니다. 이 버전을 사용 중이시라면 다른 방법을 사용하시거나 다운그레이드를 하셔야 합니다.

remarkPlugins, rehypePlugins

MDXRemote를 잘 보시면 mdxOptions 라는 것이 있습니다. 다양한 remark와 rehype의 플러그인을 집어넣을 수 있습니다.

remark
- Markdown을 AST(Abstract Syntax Tree)로 변환하여 다양한 플러그인을 통해 데이터를 분석하거나 변환 가능
- Markdown 파일을 HTML로 변환하거나, 특정 문법을 추가/수정하는 작업에 활용
rehype
- HTML을 AST로 변환하여 플러그인을 통해 HTML을 분석하거나 수정 가능
- HTML 파일을 압축하거나, 특정 태그를 추가/수정하는 작업에 유용

제가 사용해본 플러그인 중 몇 개 추천해 드리겠습니다.

1. remark-gfm

GFM(GitHub Flavored Markdown)을 제공해줍니다.
autolink literals, footnotes, strikethrough, tables, tasklists... 등등 기존 마크다운보다 다양한 기능이 추가되어 있습니다.

npm install remark-gfm

2. remark-breaks

md 파일에서는 공백 2개를 입력해야 줄바꿈이 일어납니다.
해당 플러그인을 사용하시면 마크다운에서 작성한대로 줄바꿈이 적용됩니다.

npm i remark-breaks

3. rehype-prism-plus

prism 기반 테마를 적용할 수 있습니다.
prism-theme 이런 테마를 적용할 수 있습니다.

npm i rehype-prism-plus

4. rehype-toc

게시글에 대한 목차를 생성해줍니다.
목차에 어떤 태그를 포함시킬 것인지, 배치는 어디에 할 것인지.. 등등 다양한 옵션이 존재합니다.

npm i rehype-toc

5. rehype-slug, rehype-autolink-headings

rehype-slug를 사용하여 headings에 id를 심어주면,
rehype-autolink-headings가 id를 통해서 anchor를 생성해줍니다.
이를 이용하면 해당 제목으로 이동하는 링크를 활성화시킬 수 있습니다.

npm install rehype-slug rehype-autolink-headings

2. MDX 플러그인