> For the complete documentation index, see [llms.txt](https://book.hajoeun.dev/friendly-next-js/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://book.hajoeun.dev/friendly-next-js/part-3-next.js/undefined-2/next.js.md).
# 일반적인 Next.js 블로그
## 컨텐츠 데이터 관리
`md`라는 확장자를 갖는 파일에 마크다운 형태로 글을 작성합니다. 해당 파일은 크게 두가지 영역을 갖습니다.
### Front Matter
상단에 3개의 하이픈으로 구분된 영역에 작성되는 값입니다. 이 형식으로 지정된 값은 이후 메타데이터 정보로 활용됩니다. 아래의 예시에서는 제목, 설명, 날짜 정보가 작성되었습니다.
```markdown
---
title: 'post title'
description: 'this is post description'
date: '2024-08-15'
---
```
### Content
Front Matter 아래에는 실제 글의 내용이 담깁니다. 마크다운 형태로 작성합니다. 이렇게 작성된 파일이 파싱 함수에 의해 분석됩니다.
```markdown
# post title
hello world!
```
### Parsing
예시에서는 `getPostData`라는 이름을 가진 함수입니다.
```typescript
export async function getPostData(id) {
const fullPath = path.join(postsDirectory, `${id}.md`);
const fileContents = fs.readFileSync(fullPath, 'utf8');
const matterResult = matter(fileContents);
const processedContent = await remark()
.use(html)
.process(matterResult.content);
const contentHtml = processedContent.toString();
return {
id,
contentHtml,
...matterResult.data,
};
}
```
`getPostData`는 파일시스템에 접근해 마크다운 파일을 읽어 날것의 데이터 찾아냅니다.
이 데이터를 `matter`라는 함수에 전달합니다. 해당 함수는 `gray-matter`와 같은 라이브러리에서 제공하는 함수입니다. 앞서 보셨던 마크다운 파일에서 Front Mattter와 Content 영역을 나눠주는 역할을 합니다. 그렇게 반환된 값은 `matterResult`에 저장됩니다.
`matterResult`에 있는 content는 마크다운 형태로 존재합니다. 이제 브라우저에 전달하기 전에 HTML로 전환하는 과정을 거칩니다. 코드를 보시면 `remark`라는 라이브러리와 플러그인을 이용해서 마크다운을 HTML로 파싱하고 있습니다.
이렇게 만들어진 HTML 문자열과 메타데이터 등의 값이 `getPostData`의 결과값으로 반환됩니다.
## 라우팅과 렌더링
보통 Dynamic Routes 기법을 사용합니다. `pages/post/[id].tsx` 와 같은 형태로 파일을 만듭니다. 대괄호에 담긴 id가 게시글 조회의 단서로 사용됩니다.
렌더링은 정적 사이트 생성, SSG를 사용합니다.
```typescript
export async function getStaticProps({ params }) {
const postData = await getPostData(params.id);
return {
props: {
postData,
},
};
}
```
`getStaticProps`라는 함수에서 정적으로 사용할 데이터를 조회합니다. 앞서 컨텐츠 데이터 관리에서 살펴 본 `getPostData` 함수가 등장하네요. 파라미터로 전달된 id 값을 전달하면 게시글의 데이터를 찾아냅니다. 그 데이터를 반환하구요.
반환된 값을 UI 컴포넌트에서 활용하게 됩니다.
```tsx
export default function Post({ postData }) {
return (
{postData.title}
{postData.id}
{postData.date}
);
}
```
`getPostData`에서 만들어낸 `contentHtml`을 `dangerouslySetInnerHTML`에 그대로 넣어 사용합니다. 이게 일반적인 Next.js 블로그의 라우팅, 렌더링 방식입니다.
## 메타데이터
작성된 마크다운 파일에서 Front Matter 영역을 작성합니다. `getPostData`에서 만들어낸 Front Matter 영역을 Next.js에서 제공하는 `Head` 컴포넌트에 `title`, `meta` 태그로 넣으면 메타데이터로 인식됩니다.
```html
{title}
```