Contentlayer란? next.js 13에서 활용하기

Next.js의 getStaticPaths 함수는 정적 생성(static generation)을 위한 경로를 동적으로 설정하는 메서드입니다. 이 함수는 Next.js에서 동적 경로를 사용하는 페이지에 사용됩니다.

export async function getStaticPaths() {
  // 경로 데이터를 동적으로 생성하는 로직 작성
  
  return {
    paths: [], // 동적 경로 리스트
    fallback: true/false // fallback 옵션
  };
}

getStaticPaths 함수는 비동기 함수로 작성되어야 하며, 경로 데이터를 동적으로 생성하는 로직을 구현해야 합니다.

이 함수의 반환 값은 객체 형태로, paths와 fallback 두 가지 속성을 포함해야 합니다.

• paths: 동적으로 생성될 경로의 리스트를 포함합니다. 이 경로들은 페이지의 경로에 매칭되어 해당 페이지의 정적 HTML 파일이 생성됩니다.
• fallback: fallback 옵션은 정적 경로가 없는 경우 어떻게 동작할지를 결정합니다. fallback 값으로 false를 설정하면 정적 경로가 아닌 페이지는 404 페이지로 처리됩니다. fallback 값으로 true를 설정하면 정적 경로가 아닌 페이지에 대해서는 요청이 들어올 때 동적으로 생성됩니다.

정적 HTML 파일을 생성!!

위의 말이 중요..

---

Contentlayer란?

Contentlayer는 Next.js와 함께 사용할 수 있는 정적 콘텐츠 관리 도구입니다. Contentlayer를 사용하면 마크다운(Markdown) 파일이나 다른 데이터 소스에서 콘텐츠를 가져와 Next.js 애플리케이션에 쉽게 통합할 수 있습니다.

Contentlayer는 마크다운 파일에 대한 정적 타입 지원을 제공하며, TypeScript와 함께 사용할 수 있습니다. 마크다운 파일을 통해 페이지의 콘텐츠를 작성하고,

Contentlayer는 해당 마크다운 파일을 읽어 데이터 객체로 변환하여 사용할 수 있습니다. 이를 통해 마크다운 파일에서 가져온 콘텐츠를 동적으로 렌더링하고 페이지에 통합할 수 있습니다.

Contentlayer는 데이터를 가져오는 방법을 정의하는 데이터 모델과 마크다운 파일에 대한 데이터 변환기를 사용합니다.

데이터 모델은 마크다운 파일의 각 항목에 해당하는 필드와 데이터 타입을 정의하는 방식으로 작성됩니다. 이를 통해 마크다운 파일의 내용을 구조화된 데이터로 매핑할 수 있습니다.

Contentlayer는 다른 콘텐츠 관리 시스템(CMS)과 비교하여 상대적으로 경량화되어 있으며, Next.js와의 통합이 간편합니다. Contentlayer를 사용하면 마크다운 파일을 통해 콘텐츠를 작성하고, Next.js에서 해당 콘텐츠를 렌더링하고 사용할 수 있습니다.

Contentlayer는 Next.js 애플리케이션에서 정적 콘텐츠 관리를 단순화하고, 개발자들이 쉽게 마크다운 파일을 활용하여 동적인 웹 사이트를 구축할 수 있도록 도와줍니다.

Contentlayer을 next.js와 함께 사용해보기

1. 설치

npm add contentlayer next-contentlayer

2. next config에 contentlayer wrap 해주기

// next.config.js
import { withContentlayer } from 'next-contentlayer'
export default withContentlayer({})

4. typescript config에 추가해주기

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    //  ^^^^^^^^^^^
    "paths": {
      "contentlayer/generated": ["./.contentlayer/generated"]
      // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts",
    ".contentlayer/generated"
    // ^^^^^^^^^^^^^^^^^^^^^^
  ]
}

5. gitignore 추가하기

# .gitignore

# ...

# contentlayer
.contentlayer

6. Content Schema 정의하기 : Contentlayer Config 추가하기

• contentlayer.config.ts 을 루트 디렉토리에 생성하기
• Post라는 document type 정의하기

// contentlayer.config.ts
import { defineDocumentType, makeSource } from 'contentlayer/source-files'

export const Post = defineDocumentType(() => ({
  name: 'Post',
  filePathPattern: `**/*.md`,
  fields: {
    title: { type: 'string', required: true },
    date: { type: 'date', required: true },
  }
}))

export default makeSource({ contentDirPath: 'posts', documentTypes: [Post] })

7. 스키마에 맞는 md파일 생성

---
title: "My First Blog Post"
date: "2023-06-07"
---

This is my first blog post. It's great to be writing on this platform!

8. 실행하기

   npm run dev

이 명령을 실행하면 Contentlayer가 실행되어 마크다운 파일을 기반으로 데이터를 생성합니다. Contentlayer가 데이터를 생성한 후에는 contentlayer/generated 디렉토리에 생성된 데이터 파일이 위치하게 됩니다.

---

https://www.contentlayer.dev/docs/getting-started-cddd76b7#add-contentlayer-config