[Next.js] Next.js 사이트에서 노션 Api 사용하기

노션 api를 사용한다는 것은 노션에서 database를 만들어 사용한다는 것을 말한다. 노션에서 db를 만들어 사용한 것을 글로 작성하고자 한다.

로그인하기

내 경우에는 미리 notion에 대한 아이디가 있어서 바로 사용이 가능하였다. 만약 notion에 대한 아이디가 존재하지 않는다면 만들어야 한다.

데이터베이스 만들기

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

notion api 사용하기

💡 https://developers.notion.com/

Notion API

반응형

위의 사이트에 들어가면 View my integration이 있다. 이곳을 들어간다. 그러면 내 api 통합이라는 것이 나온다. 여기서 새로운 api를 만든다.

api 만들기

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

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

.env.local파일 만들기

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

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

클릭 버튼

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

데이터 베이스 만들기

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

데이터 사용하기

데이터베이스를 내 사이트에 연결해주기 위해서 notion에서 제공해주는 docs에 들어간다. 그러면 api referenece라는 탭이 있는데, 이를 클릭해준다. 그러면 검색창에 retrieve a database가 있는데 이를 클릭한다.

언어 javascript를 클릭하고, fetch로 하여 데이터베이스에 있는 데이터를 가져온다. 내 경우 Next.js로 사이트를 만들었다. 그래서 SSR기능을 이용한다.

공식문서에 설명이 나와 있는 getStaticProps기능을 써줄려고 한다. 해당 코드는 아래와 같고, 공식문서에 더 자세히 설명되어 있다.

export async function getStaticProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  }
}

export async function getStaticProps() {
	const options = {
		method: "POST",
		headers: {
			Accept: "application/json",
			"Notion-Version": "2022-02-22",
			"Content-Type": "application/json",
			Authorization: `Bearer ${TOKEN}`,
		},
		body: JSON.stringify({
			sorts: [
				{
					property: "name",
					direction: "ascending",
				},
			],
			page_size: 100,
		}),
	};

	const response = await fetch(
		`https://api.notion.com/v1/databases/${DATABASE__ID}/query`,
		options
	);

	const projects = await response.json();

	return {
		props: { projects }, // will be passed to the page component as props
	};
}

위의 .env.local파일에서 만든 변수들을 가져와서 위의 코드에 써준다.

사이트에서 사용하기

export default function Test({projects}) {
  return (
    <div>{projects}</div>
  )
}

페이지에서 보여주기 위해 props로 가져와서 해당 데이터를 쓰면 된다.

👇🏻 참고

https://nextjs.org/docs/basic-features/data-fetching/get-static-props