Notion APIと学ぶNext.js 2023/05/27 

自己紹介 ● 名前：ak2ie ● 職業：Webエンジニア ● 好きなもの：コーヒー 

目次 1. Next.jsとは？ 2. ページの作り方 a. URLパラメータ、ローディング、リンク 3. fetch API a. データ取得 b. 再検証 

Next.js ● Reactをベースにしたフロントエンドフレームワーク ● ルーティングが簡単 ● スタイル設定もできる ● ver. 13での動作を説明します 

ブログ ● 記事 ○ Notionで書く ○ URLは/articles/****で自由に設定可能 ● 固定ページもある 

Notion 

App Router ● ページはapp内にディレクトリを作り、 page.tsxを置く ● https://example.com/articles ● ver. 12以前はpagesディレクトリを使っていた app page.tsx articles 

URLパラメータの取得 ● ディレクトリ名を”[“, “]”で囲む ● propsからパラメータを取得できる https://example.com/articles/title const Articles = async ({ params: { slug } }: Props) => { return

slug

} app page.tsx articles [slug] 

ローディング ● page.tsxと同じディレクトリに ”loading.tsx”を置くだけ ● 読み込み中だけ表示される app/articles/loading.tsx export default function Loading() { return

Loading...

} app page.tsx articles loading.tsx 

Not Found ● app/not-found.tsxに書く export default function NotFound() { return

ページが存在しません

} ● notFound()を呼んで、リダイレクトもできる import { notFound } from "next/navigation"; notFound(); app not-found.tsx 

リンク ● Next.js 13より、内にタグは不要 ver. 13 About ver. 12以前 About 

データ取得 ● fetch APIで取得できる ● JavaScriptのAPIをNext.js が独自に拡張 const response = await fetch( `https://example.com`, { headers: { Authorization: `Bearer ABC`, "Content-Type": "application/json", "Notion-Version": "2022-06-28", }, } ); 

Notion データベース ● Notion内でデータを管理 する方法 ● Viewを切り替えること で、見え方を変えられる 

Notion Page ● Notion内でテキストや画像をまとめる ところ ● リンクやコードも書けて、総称して「ブ ロック」と呼ばれる ブロック ブロック 

Notion API ● Notion データベースやブロックを取得可能 ブロックを取得するコード例 const response = await fetch( `https://api.notion.com/v1/blocks/ ${pageId}/children` , { headers: { Authorization: `Bearer ${process.env.NOTION_SECRET !}`, "Content-Type" : "application/json" , "Notion-Version" : "2022-06-28" , }, } ); 

再検証（revalidate） ● fetchしたデータは、指定した時間まで キャッシュされる ● 時間経過後のアクセス時に再取得される アクセス 指定時間後までキャッシュ キャッシュ アクセス データ再取得 時間 キャッシュを返 す await fetch( next: { revalidate: 30, }, 

Server/Client Component ● サーバーとクライアント（ブラウザ）どちらでレンダリングするか ● サーバーの方が高速 ● Server Component ○ 基本的にこちら ● Client Component ○ クリックイベントなどブラウザでしか扱えないもの 

Next.jsまとめ ● appディレクトリにページを作る ○ ディレクトリを作って、page.tsxを置く ○ app/[slug]/page.tsx => propsから取得可 ○ app/not-found.tsx: Not Foundページ ● fetch API ○ JavaScript APIをNext.jsが拡張 ○ revalidateで指定時間キャッシュしてくれる