Next.js 13 - Notion Database 사용하기(1)

노션 API를 활용하여 Next js 프로젝트에 노션 데이터베이스를 연결시켜 컨텐츠를 생성하고, 저장하는 방법을 간단하게 정리한 내용입니다.

💁🏻‍♀️ 1. 노션 계정, 페이지 생성하기

노션 아이디가 없으신 분들은 먼저 노션 계정을 만들어야 합니다. 노션 아이디를 만들었다면 로그인 후 프로젝트의 데이터베이스로 활용할 빈 페이지를 하나 생성합니다. 해당 빈 페이지에 데이터베이스 - 전체페이지 항목을 선택하여 표를 만들어 줍니다.

💁🏻‍♀️ 2. integration 생성하기

노션 페이지까지 생성 완료 되었다면 노션 개발자 사이트에 접속합니다. 해당 사이트에 자세한 Guides가 나와있으니 참고해 주시면 됩니다.
integration을 만들어주기 위해 옆의 링크를 클릭 후 API 통합 만들기를 진행합니다.

노션 계정이나 워크스페이스를 여러개 가지고 있을 경우 연결된 워크스페이스 항목에 반드시 데이터베이스로 활용하기 위해 만들어놓은 노션 페이지가 있는 계정을 선택해줍니다.

원하는 이름으로 설정 후 제출을 클릭하면 시크릿 코드가 주어지는데 이 코드를 복사해 둡니다.

기능 탭에서 자신이 원하는 기능들을 알맞게 설정해 줄 수 있습니다.

💁🏻‍♀️ 3. 프로젝트에 설정하기

프로젝트 터미널에서 npm i @notionhq/client 명령어를 입력해 노션과 프로젝트를 연결시켜 줄 수 있는 라이브러리를 설치해줍니다.

위의 1번에서 만들어 준 노션 페이지에서 오른쪽 최상단의 점 세개를 클릭하면 +연결추가 항목이 보이고 2번에서 만들어 놓은 api를 찾아 클릭하여 연결해줍니다.

💁🏻‍♀️ 4. app / page.tsx

메인 페이지에서 간단하게 테스트 해보기 위하여 button과 input 태그를 만들어 줍니다.
클릭 이벤트 함수로 input 태그에 텍스트를 작성하고 버튼 클릭시 노션 데이터베이스에 추가가 잘 되었는지 확인하는 기능을 생성했습니다.

'use client';
import { useRef } from 'react';

export default function Home() {
  const inputRef = useRef<HTMLInputElement>(null);
  const handleClick = async () => {
    if (inputRef.current === null || inputRef.current.value === '') {
      alert('name을 넣어주세요'); //input 태그에 텍스트가 없는 경우 리턴
      return;
    }
    // 노션 api fetch
    await fetch(
      `http://localhost:3000/api/notion?name=${inputRef.current?.value}`,
    )
      .then((res) => res.json())
      .then((data) => alert(data.message));
  };

  return (
    <input ref={inputRef} type="text" placeholder="name" />
    <button onClick={handleClick}>add jacket</button>
  );
}

💁🏻‍♀️ 5. pages / api / notion.ts

pages - api 폴더 생성 후 notion.ts 파일을 만들어줍니다. 해당 파일 안에 notion Client를 생성하고 데이터베이스에 아이템을 추가할 수 있는 함수와, 성공과 실패 여부 메세지를 띄워주는 기능을 만들어 줍니다.

import { NextApiRequest, NextApiResponse } from 'next';
import { Client } from '@notionhq/client';

const notionSecret = process.env.NOTION_SECRET; // 📌노션 api 시크릿 코드
const notionDatabaseId = process.env.NOTION_DATABASE_ID; 
// 📌노션 데이터베이스 페이지 url에서  www.notion.so/ 뒤의 주소부터 ?v 전까지 32글자

const notion = new Client({
  auth: notionSecret,
});

async function addItems(name: string) {
  try {
    const response = await notion.pages.create({
      parent: { database_id: notionDatabaseId || '' },
      properties: {
        title: [
          {
            text: {
              content: name, // 📌input에 작성한 텍스트가 표에 들어가게 됨
            },
          },
        ],
      },
    });
    console.log(response);
  } catch (error) {
    console.error(JSON.stringify(error));
  }
}

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse,
) {
  const { name } = req.query;
  if (name === null) {
    return res.status(400).json({ message: 'No name' });
  }
  try {
    await addItems(String(name));
    // 📌 성공 또는 실패시 보여질 메세지
    res.status(200).json({ message: `Success ${name} added` });
  } catch (error) {
    res.status(400).json({ message: `Failed ${name} added` });
  }
}