2단계: MDX 글 작성 구조 이해

MDX 글 작성 구조 이해

Pliny는 블로그 글을 .mdx 포맷으로 작성하며, 이를 기반으로 자동 라우팅과 SEO 메타 정보, RSS, 태그 등을 생성합니다.

2-1. Pliny에서 글은 어디에 작성하나?

• /content/blog/ 폴더에 .mdx 파일을 추가하면 글이 생성됩니다.

content/
└── blog/
    ├── hello-world.mdx
    ├── nextjs-guide.mdx

2-2. MDX 파일 구조 예시

---
title: "Next.js 입문 가이드"
date: "2025-05-01"
tags: ["nextjs", "react"]
draft: false
summary: "Next.js 초보자를 위한 가이드입니다."
images: ["images/next-cover.png"]
---

## 소개

이 문서는 Next.js 입문자를 위한 문서입니다.

```js
console.log("Hello Next.js");
```

• --- 사이는 Frontmatter: 글의 메타데이터
• 본문은 일반 Markdown + JSX(MDX) 문법 조합

2-3. 주요 frontmatter 필드

draft: true → 개발 중 숨길 수 있음

2-4. 글 추가 시 자동 처리

Pliny는 다음과 같은 작업을 자동으로 처리합니다:

• 최신 순 정렬
• /blog/[slug] 경로 생성
• 태그 페이지 자동 연결
• sitemap.xml / RSS 피드 자동 업데이트
• SEO 메타 태그 자동 삽입

2-5. 슬러그는 어디서 결정되는가?

• .mdx 파일명이 slug로 자동 변환됩니다.

content/blog/nextjs-guide.mdx → /blog/nextjs-guide

• 필요 시 contentlayer.config.ts에서 computedFields.slug로 수동 제어 가능

요약

• 블로그 글은 /content/blog/*.mdx에 작성합니다.
• Frontmatter로 글의 메타데이터를 구성합니다.
• 파일명은 slug로 자동 변환되어 URL로 사용됩니다.
• Pliny는 작성된 글을 자동 정렬, 태그, SEO, sitemap 등으로 처리해줍니다.

심화학습

Q1. Frontmatter에서 draft: true 상태의 글은 배포 시에도 포함될까? 어떻게 완전히 제외시킬 수 있을까?

A: 기본적으로 Contentlayer는 draft 글도 타입으로 생성합니다. computedFields.published를 통해 필터링하거나, build 시 조건 분기로 렌더링에서 제외할 수 있습니다.

Q2. Contentlayer의 computedFields에서 slug나 날짜 정렬 기준을 직접 수정하려면 어떤 방식으로 작성해야 할까?

A: computedFields에서 slug는 slug: { resolve: (doc) => doc._raw.sourceFileName.replace(".mdx", "") } 와 같이 작성하고, 정렬은 date 필드를 기준으로 sort 처리합니다.

Q3. MDX 본문에 JSX 컴포넌트를 삽입하려면 어떤 방식으로 컴포넌트를 불러오고 사용할 수 있을까?

A: components/에 컴포넌트를 만들고, _app.tsx 또는 MDXProvider로 주입하거나 mdxComponents.ts 파일에서 등록 후 자동 사용됩니다.