Notionpresso 빠른 시작 가이드

2.1. 설치 및 셋업

Notionpresso 설치

Notionpresso과 Notion 데이터를 추출할 CLI 도구인 @notionpresso/cli를 설치합니다.

npm install -g @notionpresso/cli
npm install @notionpresso/react

Next.js 프로젝트 설정

Next.js 프로젝트가 없는 경우 새로 생성합니다. Next.js는 정적 사이트 생성과 서버사이드 렌더링을 지원하여 최적의 성능을 제공합니다.

npx create-next-app my-notion-blog
cd my-notion-blog

Notion API 키 생성

Notion 개발자 포털(https://developers.notion.com/)에 접속합니다.
새 통합(integration)을 생성합니다.
생성된 API 키를 안전하게 보관합니다.

2.2. Notion 데이터 추출하기 (@notionpresso/cli)

@notionpresso/cli CLI를 사용하여 Notion 데이터를 JSON 형식으로 추출하고, 이를 웹사이트에 사용할 수 있도록 준비합니다.

데이터 추출 명령어 사용법

Notion 페이지 URL과 API 키를 사용해 데이터를 추출합니다.

npx npresso --page YOUR_PAGE_URL --auth YOUR_API_KEY

@notionpresso/cli 폴더 구조 및 옵션

@notionpresso/cli는 기본적으로 Next.js 프로젝트 구조에 맞춰져 있습니다. 추출된 데이터는 다음과 같은 구조로 저장됩니다:

my-notion-blog/
├── notion-data/
│   ├── page-id-1.json
│   ├── page-id-2.json
│   └── ...
└── public/
    └── images/
        ├── page-id-1/
        │   ├── image1.png
        │   └── image2.jpg
        ├── page-id-2/
        │   └── image1.png
        └── ...

@notionpresso/cli의 주요 옵션:

--dir: JSON 파일이 저장될 디렉토리를 지정합니다. 기본값은 ./notion-data입니다.
--image-dir: 이미지 파일이 저장될 디렉토리를 지정합니다. 기본값은 ./public/images입니다.

예를 들어, 저장 위치를 변경하고 싶다면 다음과 같이 사용할 수 있습니다:

npx npresso --page YOUR_PAGE_URL --auth YOUR_API_KEY --dir ./data --image-dir ./public/assets/images

옵션을 지정하지 않으면 기본값이 사용되며, 이는 Next.js 프로젝트 구조에 최적화되어 있습니다.

2.3. React에서 Notion 데이터 렌더링

추출한 Notion 데이터를 React 컴포넌트를 사용하여 렌더링합니다. 이 단계에서는 기본적인 페이지 구조와 컴포넌트 사용법을 다룹니다.

기본 렌더링 예제 코드

Notion 데이터를 React 컴포넌트로 렌더링하는 간단한 예제입니다.

import { Notion } from "@notionpresso/react";
import pageData from "./notion-data/your-page-id.json";

function NotionPage() {
  return (
    <Notion data={pageData}>
      <Notion.Cover src={pageData.cover} />
      <Notion.Body>
        <Notion.Title title={pageData.title} />
        <Notion.Blocks blocks={pageData.blocks} />
      </Notion.Body>
    </Notion>
  );
}

export default NotionPage;

설명

<Notion> 컴포넌트는 Notion 데이터를 받아 페이지를 구성합니다.
<Cover>, <Title>, <Blocks> 등 Notion의 기본 요소를 그대로 웹에서 표현할 수 있습니다.

2.4. Next.js 통합으로 첫 페이지 만들기

Next.js를 통해 동적 웹페이지를 생성하고, 정적 사이트 생성(SSG)을 활용해 성능을 최적화합니다.

Next.js 페이지 생성 및 동적 라우팅 설정

각 포스트 페이지를 동적 라우팅으로 생성하고, 정적 사이트 생성을 위해 getStaticPaths와 getStaticProps를 사용합니다.

// pages/[slug].js
import { Notion } from "@notionpresso/react";
import posts from "../posts";

export async function getStaticPaths() {
  const paths = posts.map((post) => ({
    params: { slug: post.slug },
  }));
  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  const post = posts.find((p) => p.slug === params.slug);
  return { props: { post } };
}

export default function PostPage({ post }) {
  return (
    <Notion>
      <Notion.Blocks blocks={post.content.blocks} />
    </Notion>
  );
}

설명

getStaticPaths는 포스트의 경로를 미리 생성합니다.
getStaticProps는 각 포스트의 데이터를 받아와 렌더링합니다.

2.5. 블로그 만들기

이 섹션에서는 블로그의 전체 구조를 설정하고, 각 포스트를 어떻게 관리하고 표시할 수 있는지에 대해 설명합니다.

posts/index.js 설정

블로그 포스트 데이터를 중앙에서 관리합니다. 각 포스트의 메타데이터와 콘텐츠를 배열로 정리하여 사용합니다.

// posts/index.js
import post1Content from "../notion-data/post1.json";
import post2Content from "../notion-data/post2.json";

const posts = [
  {
    slug: "post1",
    title: "첫 번째 블로그 포스트",
    date: "2023-10-01",
    description: "첫 번째 블로그 포스트의 설명입니다.",
    content: post1Content,
  },
  {
    slug: "post2",
    title: "두 번째 블로그 포스트",
    date: "2023-10-05",
    description: "두 번째 블로그 포스트의 설명입니다.",
    content: post2Content,
  },
];

export default posts;

데이터 사용하기: 블로그 메인 페이지

posts 배열을 사용하여 메인 페이지에서 포스트 목록을 렌더링합니다.

// pages/index.js
import Link from "next/link";
import posts from "../posts";

export default function Home() {
  return (
    <div>
      <h1>블로그 포스트 목록</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.slug}>
            <Link href={`/${post.slug}`}>
              <a>{post.title}</a>
            </Link>
            <p>{post.description}</p>
            <small>{post.date}</small>
          </li>
        ))}
      </ul>
    </div>
  );
}

개별 포스트 페이지 생성

각 포스트 페이지는 동적 라우팅을 통해 자동 생성됩니다. Notion에서 작성한 글이 그대로 웹사이트에 반영되어, 블로그를 손쉽게 업데이트할 수 있습니다.