Next.js로 블로그 만들기

1. Next.js란 무엇인가?

Next.js는 React 애플리케이션 개발을 위한 프레임워크입니다. React만으로도 블로그를 만들 수 있지만, Next.js는 다음과 같은 기능을 제공해 훨씬 효율적인 개발이 가능합니다.

• 파일 기반 라우팅: pages 폴더에 파일을 추가하는 것만으로 자동 라우팅
• SSR(서버사이드 렌더링) & SSG(정적 사이트 생성) 지원 → SEO 최적화
• API Routes → 별도 백엔드 없이 간단한 API 구현 가능
• 이미지 최적화 → 성능 개선

👉 즉, 블로그와 같은 콘텐츠 중심 웹사이트를 구축하는 데 최적화된 프레임워크입니다.

---

2. 개발 환경 설정

프로젝트 생성

npx create-next-app@latest my-blog
cd my-blog
npm run dev

http://localhost:3000에 접속하면 기본 Next.js 앱이 실행됩니다.

폴더 구조

my-blog/
 ├─ pages/         # 라우팅되는 페이지
 ├─ public/        # 정적 파일(이미지, favicon 등)
 ├─ styles/        # CSS, 글로벌 스타일
 └─ package.json

---

3. 블로그 페이지 만들기

1) 홈 페이지

pages/index.js 수정:

export default function Home() {
  return (
    <div>
      <h1>개발지식소 블로그</h1>
      <p>Next.js로 만든 나만의 개발 블로그</p>
    </div>
  );
}

2) 글 상세 페이지 (파일 기반 라우팅)

pages/posts/first-post.js 생성:

export default function FirstPost() {
  return (
    <article>
      <h1>첫 번째 블로그 글</h1>
      <p>Next.js를 활용한 블로그 만들기 튜토리얼입니다.</p>
    </article>
  );
}

👉 /posts/first-post 경로로 접속 가능!

---

4. Markdown 지원하기

블로그라면 글을 Markdown으로 작성하고 싶을 때가 많습니다. gray-matter와 remark 라이브러리를 사용하면 쉽게 구현할 수 있습니다.

npm install gray-matter remark remark-html

posts/hello.md 파일 작성:

---
title: "Hello Next.js"
date: "2025-08-21"
---

이것은 마크다운으로 작성된 첫 블로그 글입니다.

lib/posts.js에서 Markdown 파싱:

import fs from "fs";
import path from "path";
import matter from "gray-matter";

const postsDirectory = path.join(process.cwd(), "posts");

export function getSortedPostsData() {
  const fileNames = fs.readdirSync(postsDirectory);
  return fileNames.map(fileName => {
    const filePath = path.join(postsDirectory, fileName);
    const fileContents = fs.readFileSync(filePath, "utf8");
    const { data } = matter(fileContents);
    return { ...data, id: fileName.replace(/\.md$/, "") };
  });
}

👉 이렇게 하면 posts 폴더에 Markdown 파일을 추가하는 것만으로 새로운 글이 자동 반영됩니다.

---

5. 블로그 레이아웃 꾸미기

블로그는 단순히 글만 보여주는 게 아니라, 레이아웃과 스타일링도 필요합니다.

1) 전역 스타일

styles/globals.css 수정:

body {
  font-family: sans-serif;
  margin: 0;
  padding: 20px;
  background: #fafafa;
}
h1 {
  color: #333;
}

2) 레이아웃 컴포넌트

components/Layout.js:

export default function Layout({ children }) {
  return (
    <div>
      <header>
        <h2>개발지식소 블로그</h2>
      </header>
      <main>{children}</main>
      <footer>
        <p>© 2025 개발지식소</p>
      </footer>
    </div>
  );
}

👉 각 페이지에서 <Layout>으로 감싸주면 블로그 일관성이 유지됩니다.

---

6. 배포하기

Next.js 블로그를 완성했다면 Vercel을 통해 배포할 수 있습니다.

1. Vercel 가입 → GitHub 연동
2. my-blog 레포지토리 push
3. Vercel에서 프로젝트 Import → 자동 빌드 및 배포

👉 몇 초 만에 https://my-blog.vercel.app 주소로 전 세계 어디서든 접속할 수 있습니다.

---

7. 마무리

Next.js는 블로그 제작에 최적화된 프레임워크입니다.

• 파일 기반 라우팅으로 손쉽게 페이지 추가
• Markdown 지원으로 글 작성 편리
• Vercel 배포로 즉시 배포

이 튜토리얼을 따라 했다면 기본적인 블로그 뼈대가 완성되었을 겁니다. 이후에는 댓글 기능, 검색, 태그 분류, 다크 모드 등 다양한 기능을 추가하며 자신만의 블로그로 발전시킬 수 있습니다.