Next.js와 Notion API를 기반으로 Notion 워크스페이스를 블로그, 포트폴리오, 문서 사이트, 랜딩 페이지 등 맞춤형 공개 웹사이트로 만들어 줍니다.
leerob/next-mdx-blog
MDX 게시물을 Tailwind CSS와 TypeScript로 렌더링하며 Vercel에 바로 배포할 수 있는 Next.js 블로그 템플릿입니다.
- 스타
- 7,575
- 포크
- 1,446
- 열린 이슈
- 0
- 마지막 커밋
- 지난달
어떤 프로젝트인가요?
next-mdx-blog는 개인 블로그를 위한 스타터 템플릿입니다. Next.js와 TypeScript를 기반으로 하고 Tailwind CSS로 스타일을 적용했으며, React 컴포넌트를 Markdown 콘텐츠에 포함할 수 있도록 게시물을 MDX로 작성합니다.
Vercel 배포에 맞게 설정되어 있고 Vercel Analytics가 포함되어 있습니다. 선택 사항인 Postgres 데이터베이스에는 리디렉션 규칙을 저장할 수 있으며, 규칙은 source, destination, permanent 필드로 구성된 redirects 테이블에 정의됩니다.
로컬에서 실행하려면 저장소를 clone하고 pnpm으로 의존성을 설치한 다음 개발 서버를 시작하면 됩니다. Node.js v18.17 이상이 필요합니다.
핵심 기능
- 01Markdown과 React 컴포넌트를 함께 사용해 게시물을 MDX로 작성합니다.
- 02애플리케이션의 기반으로 Next.js와 TypeScript를 사용합니다.
- 03Tailwind CSS로 스타일을 적용했습니다.
- 04Vercel Analytics와 원클릭 Vercel 배포 버튼이 포함되어 있습니다.
- 05선택적으로 Postgres에 리디렉션 규칙을 저장할 수 있습니다.
활용 사례
- Markdown 기반 게시물로 개인 개발자 블로그를 시작합니다.
- MDX와 Tailwind CSS가 필요한 Next.js 콘텐츠 사이트를 구축합니다.
- 분석 기능이 기본 제공되는 블로그를 Vercel에 배포합니다.
빠른 시작
- 1
저장소를 클론합니다
git clone https://github.com/leerob/next-mdx-blog.git - 2
프로젝트 폴더로 이동합니다
cd next-mdx-blog - 3
pnpm으로 종속성을 설치합니다
pnpm install - 4
개발 서버를 시작합니다
pnpm dev
사용 전 알아둘 점
- 라이선스가 지정되어 있지 않아 재사용 가능 여부가 불분명합니다.
토픽
자주 묻는 질문
- next-mdx-blog은(는) 무엇인가요?
- MDX 게시물을 Tailwind CSS와 TypeScript로 렌더링하며 Vercel에 바로 배포할 수 있는 Next.js 블로그 템플릿입니다. next-mdx-blog는 개인 블로그를 위한 스타터 템플릿입니다. Next.js와 TypeScript를 기반으로 하고 Tailwind CSS로 스타일을 적용했으며, React 컴포넌트를 Markdown 콘텐츠에 포함할 수 있도록 게시물을 MDX로 작성합니다.
- next-mdx-blog은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
- next-mdx-blog에는 명시된 라이선스가 없습니다. 코드는 공개되어 있지만 라이선스가 없으면 재사용 허가가 명확하지 않으므로, 사용 전에 작성자에게 문의하는 것이 좋습니다.
- next-mdx-blog은(는) 아직 유지보수되고 있나요?
- 6개월 이내 업데이트. next-mdx-blog의 마지막 커밋은 2026년 9월 16일입니다.
- next-mdx-blog은(는) 어디에 사용할 수 있나요?
- Markdown 기반 게시물로 개인 개발자 블로그를 시작합니다. MDX와 Tailwind CSS가 필요한 Next.js 콘텐츠 사이트를 구축합니다. 분석 기능이 기본 제공되는 블로그를 Vercel에 배포합니다.
- next-mdx-blog는 어떻게 설치하나요?
- 저장소를 클론합니다: git clone https://github.com/leerob/next-mdx-blog.git 프로젝트 폴더로 이동합니다: cd next-mdx-blog pnpm으로 종속성을 설치합니다: pnpm install 개발 서버를 시작합니다: pnpm dev
- next-mdx-blog은(는) 어디서 받을 수 있나요?
- 소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/leerob/next-mdx-blog
요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.
관련 프로젝트
Next.js, Astro, Vite 기반 React 프레임워크를 지원하는 React.js 문서 사이트 구축 프레임워크입니다.
Next.js 또는 shadcn/ui 앱에 복사해 넣어 사용할 수 있는 애니메이션 UI 컴포넌트와 효과 모음입니다.
TypeScript, Tailwind CSS v4, 테스트, 린트, 선택적 AWS 배포 인프라를 갖춘 프로덕션용 Next.js 15 스타터 템플릿입니다.
Clerk 인증, 멀티테넌시, RBAC, i18n, Drizzle ORM, Tailwind CSS를 갖춘 오픈소스 Next.js SaaS 스타터입니다.
Tailwind CSS와 motion 기반의 React 및 Next.js용 재사용 가능한 커서 애니메이션 라이브러리입니다.