최근에 노션 데이터베이스에 저장된 데이터를 기반으로 Next.js 프로젝트를 만들었던 경험을 토대로, Next.js 프로젝트에서 노션 데이터베이스를 사용하는 방법을 공유하려고 해요.
1. 노션 데이터베이스 생성
먼저, 노션에 접속해서 새 페이지를 생성하고, 그 안에 프로젝트에서 사용할 데이터베이스를 생성해줄게요.
2. API Key 발급
데이터베이스가 준비되었다면, 데이터베이스를 Next.js 프로젝트에 연동하기 위해서는 API Key가 필요해요.
- https://www.notion.com/my-integrations에 접속해주세요.
- 새 API key 생성을 누르고, 기본 정보를 입력해서 API를 생성해요.
- secret key를 확인하고, 복사해서 로컬에 저장해요.
3. Next.js 프로젝트 생성
- npx create-next-app@latest 명령어로 Next.js 프로젝트를 생성해요.
- VsCode로 생성한 프로젝트를 열고, root 폴더에 .env 파일을 생성해요.
- .env 파일에 발급받은 API key와 데이터베이스 주소를 추가해요.
- .gitignore에 .env를 추가해서, key가 서버에 노출되지 않도록 해요.
- 완료되었으면, npm run dev 명령어로 프로젝트가 잘 실행되는지 확인해요.
- 문제없이 실행된다면, 이제 노션 데이터베이스의 데이터를 가져와서 보여주고 배포하면 되요.
5. 노션 데이터베이스 연결
노션 데이터베이스의 데이터를 가져오기 위해, 아래 패키지를 설치해줄게요.
npm install @notionhq/client @notion-render/client
- @notionhq/client: Notion API 사용을 위해 설치
- @notion-render/client: 가져온 데이터 렌더링을 위해 설치
utils폴더를 생성하고, 그 안에 notion.ts 파일을 생성해서, 노션 데이터베이스의 데이터를 가져오기 위한 함수를 구현해요.
6. 페이지 렌더링
데이터가 정상적으로 들어온다면, 페이지와 컴포넌트를 구현하면 되요.
7. 배포
프로젝트가 정상적으로 동작하고, 빌드도 성공하는지 확인해요.
문제가 없다면, 배포할 준비가 완료되었으므로, 배포를 진행하면 되요.
만약, 전체적인 코드가 궁금하다면, 여기에서 확인할 수 있어요 :)
감사합니다. 👍
의견을 남겨주세요