Colin's Blog
Next.js로 블로그 플랫폼 개발하기

개요

이번 포스트에서는 Next.js를 사용하여 블로그 플랫폼을 개발하는 방법에 대해 알아보겠습니다. Next.js는 React 기반의 서버 사이드 렌더링을 지원하는 프레임워크로, 효율적이고 빠른 웹 애플리케이션을 개발할 수 있습니다.

1. 프로젝트 세팅

먼저, Next.js 프로젝트를 생성하고 필요한 패키지를 설치해야 합니다. 아래 명령어를 터미널에 입력하여 프로젝트를 생성합니다.

npx create-next-app blog-platform

프로젝트 생성 후, 필요한 패키지를 설치합니다.

cd blog-platform
npm install react-markdown gray-matter

2. 블로그 포스트 작성하기

Next.js에서는 Markdown 파일로 블로그 포스트를 작성할 수 있습니다. 프로젝트 루트 디렉토리에 posts 폴더를 생성하고, 아래와 같이 Markdown 파일을 생성합니다.

---
title: "첫 번째 블로그 포스트"
date: "2022-01-01"
---

# 안녕하세요!

첫 번째 블로그 포스트입니다.

Markdown 파일의 상단에 YAML 형식의 메타데이터를 작성할 수 있습니다. 여기서는 제목과 날짜를 지정했습니다.

3. 포스트 목록 생성하기

이제 블로그 포스트의 목록을 보여주는 페이지를 생성해보겠습니다. pages 디렉토리에 index.js 파일을 생성하고, 아래 코드를 작성합니다.

import fs from 'fs';
import matter from 'gray-matter';
import Link from 'next/link';

export default function Home({ posts }) {
  return (
    <div>
      <h1>블로그 포스트 목록</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.slug}>
            <Link href={`/posts/${post.slug}`}>
              <a>{post.title}</a>
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

export async function getStaticProps() {
  const files = fs.readdirSync('posts');
  const posts = files.map((file) => {
    const markdownWithMeta = fs.readFileSync(`posts/${file}`, 'utf-8');
    const { data: meta } = matter(markdownWithMeta);
    const slug = file.replace('.md', '');

    return {
      slug,
      title: meta.title,
      date: meta.date,
    };
  });

  return {
    props: {
      posts,
    },
  };
}

위 코드는 getStaticProps 함수를 사용하여 Markdown 파일에서 메타데이터를 가져오고, 이를 기반으로 포스트 목록을 생성합니다. Link 컴포넌트를 사용하여 각 포스트에 링크를 걸어줍니다.

4. 포스트 페이지 생성하기

이제 실제 포스트 내용을 보여주는 페이지를 생성해보겠습니다. pages 디렉토리에 posts 폴더를 생성하고, 아래 코드를 slug.js 파일로 저장합니다.


import fs from 'fs';
import matter from 'gray-matter';
import marked from 'marked';

export default function Post({ htmlString, meta }) {
  return (
    <div>
      <h1>{meta.title}</h1>
      <p>작성일: {meta.date}</p>
      <div dangerouslySetInnerHTML={{ __html: htmlString }}></div>
    </div>
  );
}

export async function getStaticPaths() {
  const files = fs.readdirSync('posts');

  const paths = files.map((file) => ({
    params: {
      slug: file.replace('.md', ''),
    },
  }));

  return {
    paths,
    fallback: false,
  };
}

export async function getStaticProps({ params }) {
  const markdownWithMeta = fs.readFileSync(`posts/${params.slug}.md`, 'utf-8');
  const { data: meta, content } = matter(markdownWithMeta);
  const htmlString = marked(content);

  return {
    props: {
      htmlString,
      meta,
    },
  };
}

위 코드는 getStaticPaths 함수를 사용하여 모든 포스트에 대한 경로를 생성하고, getStaticProps 함수를 사용하여 Markdown 파일에서 포스트 내용과 메타데이터를 가져옵니다. 가져온 Markdown 내용을 marked 패키지를 사용하여 HTML로 변환하여 페이지에 표시합니다.

결론

위에서 소개한 방법을 통해 Next.js를 사용하여 간단한 블로그 플랫폼을 개발할 수 있습니다. Markdown 파일을 이용해 포스트를 작성하고, Next.js의 기능을 활용하여 목록과 페이지를 생성할 수 있습니다. Next.js의 다양한 기능을 활용하여 더욱 풍부한 블로그 플랫폼을 개발해보세요.

© 2018 Colin. All rights reserved.