[Next.js] Notion API + Next.js 데이터베이스 연동 / 데이터 목록 불러오기, @notionhq/client

 

[Next_ Notion API]

 

---

Next.js로 블로그를 만들던 중 어차피 노션에 프로젝트를 정리해 놓으니

게시글을 노션의 데이터베이스와 연결해서 가져오면 좋을 것 같다는 생각을 하게 되었다!

 

그래서 발견한 것이 바로 Notion API였는데 막상 시작해보니 생각보다 많이 복잡했다..

방법도 여러가지가 있었는데 역시나 한번에 성공하는 법은 없었고..!

이런 저런 방법을 시도해 본 결과 드디어..! 성공했다 ㅠㅠ

막상 성공하니까 어려운 것도 아니었는데 처음 시도해본 일이어서 헤맸던 것 같다..ㅎㅎ

 

---

 

<STUDY>

 

※ 설치할 라이브러리

- @notionhq/client를 이용하여 notion과 연결할 예정!!

npm install @notionhq/client

 

1️⃣ 노션 API 통합 만들기

연동할 노션 워크스페이스의 통합 API Key 생성하기

👉 통합 API 생성 : https://www.notion.so/my-integrations

 

📌 순서

1. 워크스페이스 생성 or 선택

2. 내 API 통합 → 새 API 통합

3. 워크스페이스 선택 및 제출

4. 시크릿 키 복사 (secret_ 으로 시작하는 key)

 

API Key

 

2️⃣ 데이터베이스 ID

연결할 데이터베이스를 생성하고 ID를 복사하기

데이터베이스 예시

📌 순서

1. 데이터베이스 페이지로 이동

2. 공유 → 링크 복사

3. https://www.notion.so/[database id]?v=51bxxxxxxxxxx → 빨간 부분 복사!

⇒ notion.so/ 이후부터 ?v= 전까지가 database id!!

 

 

3️⃣ 데이터베이스 연결 추가

 

📌 순서

1. 데이터베이스 페이지

2. 옵션 → 연결 추가

3. 생성한 통합 API 연결

 

4️⃣ 환경변수 설정

- 변수 이름은 원하는 이름으로 설정

// .env.local

NOTION_API_KEY=my_api_key(secret_xxx)
NOTION_DATABASE_ID=my_database_id

 

 

5️⃣ 노션 database 연동

// lib/notion.js

import { Client } from "@notionhq/client";

const notionClient = new Client({
  auth: process.env.NOTION_API_KEY,
});

export async function getPosts() {
  const response = await notionClient.databases.query({
    database_id: process.env.NOTION_DATABASE_ID,
    sorts: [
      {
        property: "period", // 정렬의 기준이 될 데이터베이스 속성
        direction: "descending", // 내림차순 : descending, 오름차순 : ascending 
      },
    ],
  });

  return response.results;
}

 

 

---

 

노션 데이터베이스 연동은 fetch로도 가능하다.

처음에 fetch로 연결했다가 @notionhq/client로 하는 것이 훨씬 간편한 것 같아서 바꿨다 ㅎㅎ

 

나는 노션의 테마까지 가져오는 것보다 데이터 목록만 받아와서 내가 원하는 테마로 적용하고 싶었기 때문에

일단 포스트 목록만 받아왔다.

 

results를 콘솔창에 띄워보면 이런 형태로 나오는데

생각보다 많이 복잡해서 노션 테마 라이브러리를 사용하지 않고 커스텀한다면 꽤나 복잡했다.

 

 

현재는 필요한 데이터만 사용하기 위해 데이터를 추출하는 함수를 따로 정의해서 사용하고 있다.

// 필요한 데이터 추출

export function getPostsInfo(posts) {
  return posts.map((p) => {
    const { title, description } = p.properties;
    return {
      id: p.id,
      createAt: p.created_time.substring(0, 10),
      title: title.title[0].plain_text,
      description: description.rich_text[0].plain_text,
    };
  });
}

import { getPosts, getPostsInfo } from "@/lib/notion";

// 컴포넌트 ...

export async function getStaticProps() {
  const data = await getPosts();
  const posts = getPostsInfo(data);

  return {
    props: { posts },
    revalidate: 600,
  };
}

 

 

📌 오류
에러가 발생하는 경우가 있다.
예를들면... 

{"object":"error","status":401,"code":"unauthorized","message":"API token is invalid."}{"object":"error","status":400,"code":"validation_error","message":"Could not find sort property with name or id: name"}

이런 오류들..!

두 가지 모두 데이터베이스 연동을 진행하면서 발생했는데
401-unauthorized 오류가 발생한 경우 API Key를 확인해야한다.
간혹 띄어쓰기 때문에 오류가 나는 경우가 있는데 그게 나였다...
끝 부분에도 띄어쓰기가 없는지 꼭꼭 확인하기!

400-validation_error 오류가 발생한 경우에는 message를 잘 확인해야 하는데
property가 언급된 경우 데이터베이스의 속성 이름과 property로 입력한 키워드가 맞지 않아서 발생하는 오류이다!
만약 database가 언급된 경우 데이터베이스 ID를 확인해 보는 것을 추천한다.

 

---

 

<자세한 내용은 Notion API 공식문서를 참고해 주세요.>

 

Introduction

 

 

🔆내가 보려고 정리하는 Next.js🔆

 

👉ez1n github 구경하기👈 

 

ez1n - Overview