Next.js 블로그에 글 추가하는 법 — posts.ts 파일 하나로 끝납니다

들어가며

Next.js로 만들어진 블로그를 처음 다뤄봤습니다. 프레임워크 자체가 낯설어서 파일 구조를 보자마자 살짝 긴장했는데, 막상 글을 추가해보니 생각보다 훨씬 단순한 구조였어요.

다른 블로그 플랫폼들과 비교해도 훨씬 직관적이었고, 무엇보다 내가 작성한 내용이 로컬 서버에 즉시 반영되는 걸 눈으로 확인할 수 있다는 게 큰 장점이었습니다.

블로그 글이 저장되는 곳 — posts.ts

이 블로그의 모든 글 데이터는 `src/data/posts.ts` 파일 하나에 저장됩니다. 데이터베이스나 외부 CMS 없이, TypeScript 배열 하나로 모든 글을 관리하는 구조예요.

처음엔 "이게 맞나?" 싶었는데, 오히려 단순해서 좋았습니다. 파일 하나만 알면 글 추가, 수정, 삭제가 전부 가능하거든요.

글 하나의 구조

배열 안에 들어가는 글 객체는 아래와 같은 형태입니다.

{
  slug: "my-first-post",
  title: "글 제목",
  summary: "글 요약 (목록에서 보이는 설명)",
  category: "it",
  tags: ["태그1", "태그2"],
  readTime: "5분",
  publishedAt: "2026-03-05",
  content: `## 본문 내용`,
}

각 항목의 역할은 이렇습니다.

• slug — URL 주소가 됩니다. 영문 소문자와 하이픈만 사용하세요
• title — 글 제목
• summary — 목록 페이지에서 보이는 한 줄 요약
• category — it, finance, daily 중 하나
• tags — 글 하단에 표시되는 태그 배열
• readTime — 예상 읽기 시간
• publishedAt — 발행일 (YYYY-MM-DD 형식)
• content — 마크다운 형식의 본문

글 추가하는 방법

VSCode에서 `src/data/posts.ts` 파일을 열면 `export const posts: Post[] = [` 로 시작하는 배열이 보입니다.

배열 맨 앞에 새 글 객체를 추가하면 끝입니다.

export const posts: Post[] = [
  {
    slug: "new-post",
    title: "새로운 글",
    summary: "새 글 요약",
    category: "it",
    tags: ["태그"],
    readTime: "3분",
    publishedAt: "2026-03-05",
    content: `## 본문 내용을 여기에 작성합니다.`,
  },
  // 기존 글들...
];

로컬 서버에서 바로 확인

글을 추가하고 파일을 저장(`Cmd + S`)하면 개발 서버가 자동으로 변경을 감지합니다. 브라우저에서 `http://localhost:3000`을 새로고침하면 바로 반영된 걸 확인할 수 있어요.

데이터베이스에 저장하거나 배포를 기다릴 필요 없이, 저장 즉시 눈으로 확인할 수 있다는 점이 정말 편리했습니다. 처음 반영되는 걸 봤을 때 "이게 이렇게 쉬워도 되나?" 싶을 정도였어요.

이미지 추가하는 법

글에 이미지를 넣고 싶다면 `public/images/` 폴더에 이미지 파일을 넣고, content 안에 마크다운 이미지 문법으로 불러오면 됩니다.

![이미지 설명](/images/파일명.png)

파일명은 영문 소문자와 하이픈으로 작성하는 게 좋아요. 한글 파일명은 경로 오류가 날 수 있습니다.

마치며

Next.js를 처음 다뤄봤지만 글 추가 자체는 정말 단순했습니다. 배열에 객체 하나 추가하고 저장하면 끝이에요. 복잡한 CMS나 관리자 페이지 없이도 충분히 블로그를 운영할 수 있다는 걸 직접 경험했습니다.

다음 포스팅에서는 홈 화면에서 글이 날짜순으로 자동 정렬되도록 코드를 수정한 과정을 공유해 드릴게요.