transitive-bullshit/nextjs-notion-starter-kit

어떤 프로젝트인가요?

핵심 기능

• 01공개 Notion 페이지를 콘텐츠 소스로 사용하며, 하나의 파일에서 설정할 수 있습니다.
• 02react-notion-x를 통해 Notion 콘텐츠를 렌더링합니다.
• 03보기 좋은 URL과 소셜 미리보기 이미지를 자동으로 생성합니다.
• 04스크롤 위치를 추적하는 목차와 다크 모드를 제공합니다.
• 05선택적으로 Redis 캐싱과 Fathom 또는 PostHog 분석 기능을 지원합니다.

활용 사례

• Notion에서 글을 작성하는 개인 블로그를 시작할 때.
• Notion 데이터베이스에서 관리하는 포트폴리오나 프로젝트 소개 사이트를 만들 때.
• Notion 페이지를 바탕으로 문서나 공개 지식 베이스를 게시할 때.

빠른 시작

1. 1

   리포지토리를 포크하거나 클론한 다음 site.config.ts에서 rootNotionPageId를 설정합니다

2. 2

   종속성을 설치합니다(Node.js 22 이상 필요)

   pnpm install
3. 3

   로컬 개발 서버를 실행해 테스트합니다

   pnpm dev
4. 4

   Vercel에 배포합니다

   pnpm deploy

사용 전 알아둘 점

• !사이트가 작동하려면 루트 Notion 페이지를 공개해야 합니다.
• !소셜 미리보기 이미지를 사용하려면 Vercel Authentication을 비활성화해야 합니다. 그렇지 않으면 크롤러에 401 오류가 반환됩니다.
• !외부 Redis 인스턴스를 설정하지 않으면 미리보기 이미지 생성에 시간이 오래 걸릴 수 있습니다.

토픽

자주 묻는 질문

nextjs-notion-starter-kit은(는) 무엇인가요?

공개 Notion 페이지를 배포 가능한 블로그나 포트폴리오 사이트로 바꾸는 Next.js 스타터 키트로, react-notion-x와 Vercel을 기반으로 합니다. Next.js Notion Starter Kit은 Notion을 콘텐츠 관리 시스템으로 사용합니다. 공개 Notion 페이지의 ID를 지정하면 앱이 중첩된 페이지와 데이터베이스를 포함한 해당 페이지의 콘텐츠를 웹사이트로 렌더링합니다. Notion 블록 렌더링은 react-notion-x가 담당하며, 사이트는 Vercel 배포를 고려해 설계되었습니다.

nextjs-notion-starter-kit은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

nextjs-notion-starter-kit은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

nextjs-notion-starter-kit은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. nextjs-notion-starter-kit의 마지막 커밋은 2026년 10월 18일입니다.

nextjs-notion-starter-kit은(는) 어디에 사용할 수 있나요?

Notion에서 글을 작성하는 개인 블로그를 시작할 때. Notion 데이터베이스에서 관리하는 포트폴리오나 프로젝트 소개 사이트를 만들 때. Notion 페이지를 바탕으로 문서나 공개 지식 베이스를 게시할 때.

nextjs-notion-starter-kit는 어떻게 설치하나요?

리포지토리를 포크하거나 클론한 다음 site.config.ts에서 rootNotionPageId를 설정합니다 종속성을 설치합니다(Node.js 22 이상 필요): pnpm install 로컬 개발 서버를 실행해 테스트합니다: pnpm dev Vercel에 배포합니다: pnpm deploy

nextjs-notion-starter-kit은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/transitive-bullshit/nextjs-notion-starter-kit