Published on

1단계: Pliny 소개 및 설치

Pliny 소개 및 설치

Pliny는 Next.js 기반으로 설계된 오픈소스 블로그 템플릿입니다.
MDX 기반 콘텐츠, Tailwind CSS, Contentlayer를 통합해 빠르게 기술 블로그를 구축할 수 있습니다.

1-1. Pliny란?

Pliny는 Next.js + MDX + Tailwind CSS + Contentlayer를 조합한 완성형 블로그 템플릿입니다.

주요 특징

  • 다크모드, 태그 시스템, RSS, sitemap, SEO 등 블로그에 필요한 기능을 기본 제공
  • MDX 기반 콘텐츠 작성 (마크다운 + JSX)
  • Contentlayer를 통해 타입 안전한 정적 콘텐츠 로딩
  • Next.js 기반으로 커스터마이징이 쉬움

1-2. 설치 방법

1) GitHub에서 클론

git clone https://github.com/timlrx/pliny.git my-blog
cd my-blog

2) 패키지 설치

pnpm install  # 또는 yarn, npm 사용 가능
  • Pliny는 pnpm을 권장하지만, yarn 또는 npm도 사용할 수 있습니다.

3) 개발 서버 실행

pnpm dev

브라우저에서 http://localhost:3000 접속

1-3. 초기 설정 파일 확인

  • siteMetadata.ts: 블로그 이름, 설명, 작성자, SNS 링크 등을 설정
  • .env.example → .env 복사
cp .env.example .env
  • contentlayer.config.ts: Contentlayer 설정 파일

1-4. 초기 화면 구조 이해

  • /content/blog/*.mdx: 블로그 글 목록
  • /pages/index.tsx: 메인 홈 화면 (글 목록 출력)
  • /layouts/PostLayout.tsx: 포스트 상세 페이지 템플릿

요약

  • Pliny는 Next.js 기반 기술 블로그 템플릿으로 필수 기능이 내장되어 있습니다.
  • GitHub에서 클론하고 패키지를 설치하면 바로 실행 가능합니다.
  • 커스터마이징은 siteMetadata와 contentlayer 설정부터 시작하면 됩니다.

심화학습

Q1. Pliny는 왜 Contentlayer를 사용하는 걸까? 단순 MDX import와 어떤 차이가 있을까?

A: Contentlayer는 정적 타입 생성(TypeScript), 경로 자동 매핑, computed 필드 생성 등 MDX를 정적으로 관리하기 위한 기능을 제공합니다. 직접 import 방식보다 유지보수성과 확장성이 뛰어납니다.

Q2. 초기 실행 시 오류가 난다면 어떤 부분부터 점검해야 할까?

A: .env 파일 누락, contentlayer 설정 문제, content/blog 폴더의 MDX 형식 오류 등을 우선 점검해야 합니다.

Q3. 기존 Next.js 프로젝트에 Pliny 구조만 일부 도입하려면 어떤 방식으로 분리/추출해야 할까?

A: contentlayer 설정, layouts 폴더, siteMetadata.ts, content/blog 구조 등 핵심 구성 요소만 추출해 기존 프로젝트에 통합하면 됩니다. 경로와 타입 설정에 유의해야 합니다.