빠른 시작

템플릿으로 시작하기

카테고리 필터, 다크모드, RSS 등이 포함된 블로그 템플릿을 바로 사용할 수 있습니다.

템플릿 생성

notion-to-jsx-template 에서 Use this template → Create a new repository 클릭

환경 변수 설정

생성된 repo를 clone 후 환경 변수를 설정하세요.


cp .env.example .env.local

.env.local


NOTION_TOKEN=ntn_xxxxxxxxxxxxxxxxxxxx
NOTION_DATABASE_ID=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

실행


pnpm install && pnpm dev

직접 설치

기존 Next.js 프로젝트에 추가하는 경우:

요구사항

Node.js 18 이상
React 19+
Next.js 14+ (권장, 서버 컴포넌트 활용)

패키지 설치

pnpm


pnpm add notion-to-utils notion-to-jsx

npm


npm install notion-to-utils notion-to-jsx

yarn


yarn add notion-to-utils notion-to-jsx

CSS 설정

루트 레이아웃에서 스타일시트를 import하세요:

app/layout.tsx


import 'notion-to-jsx/dist/index.css';
import 'prismjs/themes/prism-tomorrow.css'; // 코드 구문 강조 (선택)

[!IMPORTANT] import 순서가 중요합니다: notion-to-jsx/dist/index.css를 Prism.js 테마와 커스텀 스타일보다 먼저 import해야 오버라이드가 올바르게 동작합니다.

최소 예제

Notion 클라이언트 설정

lib/notion.ts


import { Client } from 'notion-to-utils';
 
export const notionClient = new Client({
  auth: process.env.NOTION_TOKEN,
});

서버에서 블록 가져오기

app/posts/[id]/page.tsx


import { notionClient } from '@/lib/notion';
import PostRenderer from './PostRenderer';
 
export default async function PostPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
 
  const [blocks, properties] = await Promise.all([
    notionClient.getPageBlocks(id),
    notionClient.getPageProperties(id),
  ]);
 
  const title = (properties?.['Name'] as string) || '';
  const cover = (properties?.['coverUrl'] as string) || '';
 
  return <PostRenderer blocks={blocks} title={title} cover={cover} />;
}

클라이언트 컴포넌트로 렌더링

app/posts/[id]/PostRenderer.tsx


'use client';
 
import { Renderer } from 'notion-to-jsx';
import type { NotionBlock } from 'notion-to-jsx';
 
interface Props {
  blocks: NotionBlock[];
  title?: string;
  cover?: string;
}
 
export default function PostRenderer({ blocks, title, cover }: Props) {
  return (
    <Renderer
      blocks={blocks}
      title={title}
      cover={cover}
      showToc
    />
  );
}

Renderer가 모든 블록 렌더링, 스타일링, 목차 생성을 자동으로 처리합니다.