1️블로그 아키텍처 선택하기

블로그 아키텍처 선택하기

App Router를 활용했을 때 두 가지 방식으로 블로그를 만들 수 있다는 사실을 배웠습니다. 이 중에 하나를 선택해 블로그를 만들기 시작할 수 있습니다.

	Guillermo	Lee
데이터 관리	글을 코드로	글을 데이터로
라우팅	Route Groups	Dynamic Routes
렌더링	Incremental Static Regeneration	Partial Prerendering
메타데이터	Static Metadata	Dynamic Metadata

Guillermo 블로그의 단점

글을 데이터로 다루지 않기 때문에 중복으로 데이터로 사용할 값을 정의해야 합니다. 글 목록을 그리기 위해 JSON 파일을 정의하는 게 대표적입니다. 수동으로 게시글에 대한 데이터를 작성해야 하기 때문에 데이터가 일치하지 않을 수도 있습니다. 그리고 무엇보다 관리가 번거롭습니다.

app/posts.json

{
  "posts": [
    {
      "id": "making-the-web-faster",
      "date": "June 23, 2021",
      "title": "Making the Web. Faster."
    },
    {
      "id": "next-for-vercel",
      "date": "December 16, 2020",
      "title": "Next for Vercel"
    },
    {
      "id": "books-people-reread",
      "date": "August 2, 2020",
      "title": "Books people re-read"
    }
  ]
}

특별한 단점이 없는 Lee 블로그

Lee의 방식은 글을 데이터로 보기 때문에 글을 데이터로 활용하기에 더 편합니다. 덕분에 동적으로 메타데이터를 생성할 수 있는 것이죠. 글을 작성하기 위해 굳이 IDE나 코드 편집기를 사용하지 않아도 된다는 점 역시 장점입니다. 글을 데이터로 조회하기만 하면 되니 코드와 같은 저장소에 있을 필요도 없습니다.

선택

그래서 저희는 Lee의 방식을 선택합니다. 특별한 단점이 없고 마이그레이션 등에 용이한 방식이기 때문입니다.

공통 환경 설정

1. Node 20.17.0 버전을 사용합니다. (24년 9월 기준 LTS)

   1. 설치 방법: https://nodejs.org/en/download/package-manager

2. pnpm을 사용합니다.

   1. 설치 방법: https://pnpm.io/installation#using-homebrew

3. TypeScript 5 이상의 버전을 사용합니다.

4. VSCode를 사용합니다.

Next.js 블로그 템플릿 사용하기

우리가 선택한 Lee의 방식은 Next.js에서 템플릿으로 제공하는 방식입니다. 덕분에 간단한 명령어로 블로그를 시작할 수 있습니다.

pnpm create next-app --example https://github.com/vercel/examples/tree/main/solutions/blog blog