Published on

Notion API를 사용하여 Next.js블로그 만들기

Authors
  • 테크버킷
    Name
    테크버킷
    Twitter

목차

사용 기술

  • notion API
  • next.js

요약

Notion API를 사용하여 Notion으로 작성된 목록 기반으로 블로그를 만드는 방식을 소개합니다. 이 프로젝트에서는 Next.js 프레임워크를 사용합니다. 이 글을 이해하려면 JavaScript, Node.js 및 Notion API에 대한 기본적인 이해가 필요합니다.

방법

1. 프로젝트 생성

먼저 Next.js 프로젝트를 설정해야 합니다. 터미널에서 다음 명령을 실행하여 이를 수행할 수 있습니다.

npx create-next-app my-blog

2. notion-client 설치

Notion API와 상호 작용하려면 notion-client를 설치해야 합니다 . 터미널에서 다음 명령을 실행하여 설치할 수 있습니다.

npm install notion-client

3.

프로젝트 루트에 .env 파일을 생성하고 Notion API 키를 추가합니다.

https://developers.notion.com/docs/getting-started#step-2-share-a-database-with-your-integration을 방문하여 API 키를 찾을 수 있습니다.

NOTION_API_KEY=your_api_key

4.

Notion API와 통신할 수 있는 api/notion.js 파일을 생성하고 notion-client 패키지를 가져옵니다.

import Notion from 'notion-client';

const notion = new Notion();
notion.auth(process.env.NOTION_API_KEY);

export const getBlogPosts = async () => {
    // code to fetch blog posts goes here
}

5.

getDatabase메서드를 사용하여 블로그 게시물의 데이터를 가져올 수 있습니다 . 데이터베이스 ID는 데이터베이스의 공유 링크(share link)에서 찾을 수 있습니다.

export const getBlogPosts = async () => {
    const blogPostDb = await notion.getDatabase({
        id: 'your_database_id'
    });
    const {results} = blogPostDb;
    return results;
}

6.

getBlogPosts를 사용하여 데이터를 Fetch하여 페이지에 렌더링합니다. pages/index.js 파일에서 getBlogPosts 함수를 import 합니다.

import { getBlogPosts } from '../api/notion';

const Home = ({ posts }) => {
    return (
        <div>
            {posts.map(post => (
                <div key={post.id}>
                    <h2>{post.title}</h2>
                    <p>{post.content}</p>
                </div>
            ))}
        </div>
    );
};

Home.getInitialProps = async () => {
    const posts = await getBlogPosts();
    return { posts };
};

export default Home;

7.

다음 명령을 입력하면 개발 서버가 시작됩니다.

npm run dev

마무리

이 코드는 기본적인 사용 예시이며, 필요에 따라 사용자의 수정 및 응용이 필요할 것입니다. 읽어주셔서 감사합니다.

이 글은 chatGPT의 도움을 받아 작성되었습니다.