[Next.js] Next14 notion api를 활용하여 사이트 업데이트하기

 

next로 만들어놨던 사이트가 Next.js가 업데이트를 하다보니, 성에 안 차서 이번 기회에 공부도 할 겸 업데이트를 하게 되었다. 업데이트하면서 얻은 지식을 공유하고자 글을 쓴다.

1. Notion api 만들기

notion api를 가지고 홈페이지를 생성했다. 이를 활용해서 페이지를 만들려면 아래와 같이 따라하면 된다.

1) 데이터베이스 만들기

노션을 만든 후에 빈 페이지를 만든다. 그리고나서 데이터베이스를 만든다. 여기서 말하는 데이터베이스는 표를 의미한다. 자신이 원하는 데이터를 데이터베이스에 작성하여 준다.

2)notion api 사용하기

💡 https://developers.notion.com/

 

위의 사이트에 들어가면 오른쪽 상단에 View my integration이라는 버튼이 있다. 버튼을 클릭해 들어간다. 그러면 내 api 통합이 나오는데, 여기서 새로운 api를 만든다.

api 만들기

• 이름 : 자신이 임의로 작성한다.
• 워크페이스 : 내가 만든 데이터베이스가 있는 곳으로 지정한다.
• 기능 : 이것은 CRU를 말하는 것으로, 본인에 맞게 선택을 한다. 내 경우에는 콘텐츠 읽기만 선택하였다. 그리고 나중에 해당 기능을 선택하지 않았더라도 수정할 수 있다.

그리고 나면 sercets이 나온다. internal integration token이다. 이를 사이트에 연결할 경우에 따로 보관해둔다.

3) .env.local파일 만들기

.env.local파일을 만들어 따로 보관한다. 여기에는 두가지를 보관한다.

• token : 위에서 말한 노션 api에서 만든 시크릿 키를 여기에 넣는다.
• database_id : 빈페이지에 만든 데이터베이스의 url이 나온다. 여기서 제일 중요한 것이 데이터베이스 상단의 오른쪽에 보면 버튼같은 것들이 여러개가 나온다. 여기서 Open as full page를 눌러서 나오는 url를 활용해야 한다. 이 url에서 중간에 인코딩된 문자가 나온다. 이것이 데이터베이스의 id이다.

db 탭 사진

🤩 4) 데이터베이스를 사이트와 연결하기

add connections

위에서 notion api에서 등록한 이름을 찾으면 된다. 그래서 add connection를 하면 된다.

2. 만든 api 활용하기

1) api 생성하기

next 13부터 앱 라우터가 조금 변경되었다. 그래서 기존 pages/디렉토리에 만든 파일을 넣고 그 파일 라우터되던 형식에서 app/디렉토리를 만들어 라우터되는 형식으로 변경되었다.

그래서 내 경우 src/app/api폴더를 만들고, 각각의 api마다 쓰는 메소드와 코드가 다르므로 이를 분리하기 위해 폴더를 하나 더 생성해줬다. notion 폴더를 만들고 아래에 route.ts를 생성해주었다.

/src/app/api/notion/route.ts

폴더 사진

2) api 활용하기

npm install @notionhq/client

notion api를 사용하려면 notionhq 라이브러리를 사용해야 한다. 다른 라이브러리도 존재하니 제일 밑에 있는 참고 사이트를 참고하기를 바란다. 위의 명령어를 따라쳐서 설치해준다.

@notionhq/client

1. v1 API 를 호출할 때 사용하는 클라이언트 라이브러리이다. (구체적인 엔드포인트는 api.notion.com/v1)
2. 꾸준히 관리되고 있다. (24년 4월까지 변경사항을 올라왔다.)
3. 데이터베이스의 데이터들을 filter, sort를 이용해 가져온다.
4. docs 주소

Notion API Overviewhttps://developers.notion.com/docs/getting-started

Notion API Overview

 

/// src/app/api/notion/route.ts
import { NextResponse } from "next/server";

const { Client } = require("@notionhq/client");

const NOTION_API_KEY = process.env.NOTION_API_KEY;
const NOTION_DB_ID = process.env.NOTION_TEMP_DB_ID;
const notion = new Client({ auth: NOTION_API_KEY });

export async function GET() {
  try {
    const response = await notion.databases.query({
      database_id: NOTION_DB_ID,
    });

    return NextResponse.json(response);
  } catch (error) {
    console.error(error);
  }
}

위에서 만든 .env.local값들을 가져와서 위와 같이 적용해준다. 그리고 get method로 해서 노션 데이터를 가져와야 한다. Post나 다른 메소드를 사용해서 가져오면 페이지에서 메소드가 잘못되었다고 뜬다. 그리고 나서 route.ts에 있는 값을 page.js에 적용해주고자 하였다.

// src/app/project/page.js
"use client";
import React, {useState, useEffect} from "react";
import axios from "axios";

export default function gpt() {
  const [projects, setProjects] = useState([]);

  useEffect(() => {
    axios.get(`http://localhost:3000/api/notion`)
            .then(response => {
                const project = response.data.results;
                setProjects(project);
            })
            .catch(error => {
                console.error("Error fetching data: ", error);
            });
    
  }, []);
  return (
    <>
    </>
    )
}

위에서 axios를 사용했지만, axios나 fetch를 사용해서 데이터를 패칭해준다. 노션의 데이터를 가져올려면 next.js를 돌리고 있는 로컬 url을 작성하고 엔드포인트는 위에서 생성 폴더위치로 설정해준다.

그리고 데이터베이스에 데이터가 많을수록 대량의 데이터가 넘어오므로 console.log로 하여금 데이터 파싱을 해준다.

3. 결과화면

결과 화면

👇🏻 참고 사이트

https://cjy00n.tistory.com/m/198

https://www.metistech.me/posts/98d7f7b5-b883-49cc-bcdb-499ebd583500