leerob/next-mdx-blog
Next.js와 MDX로 만드는 현대적인 블로그 템플릿
7,556+0이번 주1,4430TypeScript
데모·홈페이지 열기next-blog-mdx.vercel.app중간맛 분석
스택: Next.js 14+ (TypeScript), MDX, Tailwind CSS, Vercel Analytics, 선택적 Postgres
난이도: Node.js 18.17+ 필요. pnpm install 후 즉시 pnpm dev로 로컬 실행 가능한 프로덕션급 템플릿입니다.
바로 쓸 수 있나: 네. 클론 → 설치 → 실행만으로 작동합니다. 선택적으로 Postgres를 연결하면 리다이렉트 관리도 가능합니다.
데모: Vercel 배포 버튼 제공으로 클릭 한 번에 자신의 인스턴스 생성 가능합니다.
이런 레포예요
이럴 때 쓰면 좋아요
- 개인 블로그나 포트폴리오 사이트 빠르게 구축
- 기술 문서나 뉴스레터를 React 컴포넌트와 함께 게시
- Vercel로 SEO 최적화된 정적 사이트 배포
핵심 기능
MDX로 마크다운 + React 컴포넌트 혼합Tailwind CSS 사전 스타일링Vercel Analytics 통합선택적 Postgres 리다이렉트 관리
대안 대비 차별점
Vercel VP 개인 블로그의 실제 운영 구조를 템플릿화하여, 단순 보일러플레이트가 아닌 프로덕션급 아키텍처 패턴을 학습할 수 있습니다.
준비물
- Node.js 18.17 이상
- pnpm 또는 npm
바로 시작하기
- 저장소를 클론합니다.
git clone https://github.com/leerob/next-mdx-blog.git
cd next-mdx-blog
- 의존성을 설치합니다.
pnpm install
- 개발 서버를 시작합니다.
pnpm dev
- (선택사항) 데이터베이스를 사용하려면
.env.local파일을 만들고 Postgres URL을 추가합니다.
echo 'POSTGRES_URL=your_postgres_url' > .env.local
- (선택사항) Postgres에 리다이렉트 테이블을 생성합니다.
CREATE TABLE redirects (
id SERIAL PRIMARY KEY,
source VARCHAR(255) NOT NULL,
destination VARCHAR(255) NOT NULL,
permanent BOOLEAN NOT NULL
);
별 추이 · 7일
7,556+0 / 7일
활용성 · 따라 만들기 좋은가
샘플 점수 8/100
- 관대한 라이선스
- 테스트 있음
- 예제 디렉토리
- 최근 활동
- AGENTS.md
- llms.txt
- 템플릿
⚪ 최근 활동 정보 없음 · 2018년 생성
AI가 README 기반으로 요약했습니다 · 원문 보기