NextJS — Notion entegrasyonu

Bu yazıda Notion kısmında bir database oluşturup bunu NextJS de kullanmayı öğreneceğiz.

Önce Notion kısmını halledelim

Burada ihtiyacımız olan iki şey var. Biri access token diğer ise içerisindeki datalara erişeceğimiz database ( table ) id’si.

Access Token

notion.so/my-integrations a giriş yapıp yeni bir integrations oluşturmamız gerekiyor. Name kısmına website yazıp kaydediyoruz. Ardından bize verdiği Internal Integration Token alıp .env dosyamıza yazıyoruz.

Database Id

Database id’yi almak oldukça basit. Notion’dan bir sayfa oluşturup içine bir database ekliyoruz. Sonrasında share sekmesi altından copy link butonuna tıklıyor ve bu url’i editöre yapıştırıyoruz.

Aşağıdaki formatta bir link elde etmiş olacağız.

<https://www.notion.so/{workspace_name}/{database_id}?v={view_id}>

Burada database id yazan kısımı kullanacağız.

örnek bir database link https://www.notion.so/denizyoldas/243c649241944ebd9cbf6894da4df1e7?v=fd392a4f7e274d2b959eb1797da4803a

burada database id’miz 243c649241944ebd9cbf6894da4df1e7 ama dikkat etmemiz gereken bir nokta var bu format kullanılmaya uygun değil. Burada gördüğünüz id’yi UUIDv4 (8–4–4–4–12) formatında kaydetmemiz gerekiyor.

örnekteki id şu şekilde olmalı

243c6492-4194-4ebd-9cbf-6894da4df1e7

Son olarak database’in üç nokta sekmesinde en altta bulunan integrationslarına tıklayıp websitesini seçmek. Artık kod kısmına geçebiliriz.

Next JS tarafı

Kod yazmaya başlamadan önce kullanacağımız paketi yükleyelim.

yarn add @notionhq/client

Paketimizi indirdikten sonra Notion API bağlantılarını yapacağımız bir dosya oluşturmalıyız. Bunun için notion.ts adında bir dosya oluşturduktan sonra kod kısmına geçebiliriz.

Kod kısmını inceleyelim.

import { Client } from '@notionhq/client' // indirdiğimiz paketi dosyamıza ekliyoruz.
const notion = new Client({
  auth: process.env.NOTION_ACCESS_TOKEN // .env dosyasında olan access token'ımızı kullanıyoruz.
})
// verdiğimiz id'e ait database'i getiren function
export const getDatabase = async (databaseId: string) => {
  const response = await notion.databases.query({
    database_id: databaseId
  })
  return response.results
}

Şimdi ise standart Bir Next.JS sayfasında bunu nasıl kullandığımızı inceleyelim.

export async function getStaticProps() {
	// Database'imizi sayfamıza çekiyoruz.
	const databases = await getDatabase(
    '243c6492-4194-4ebd-9cbf-6894da4df1e7'
  )
	// Buarada benim kullandığım database yapısında bu şekilde bir map
	// sonucunda daha güzel bir data elde etmiş oluyorum.
	const posts = databases.map((pageObj: any) => ({
    id: pageObj.id,
    title: pageObj.properties.title.title[0].plain_text,
    description: pageObj.properties.description.rich_text[0].plain_text,
    tags: pageObj.properties.tags.multi_select.map(notionTag => ({
      color: notionTag.color,
      text: notionTag.name
    })),
    url: pageObj.properties.url.rich_text[0].plain_text,
    date: new Date(pageObj.created_time).toISOString()
  }))
  return {
    props: { posts },
    revalidate: ms('1d') / 1000
  }
}

ve gelen datayı sayfamızda kullanıyoruz.

const Blog: React.FC<Props> = ({ posts }) => {