Slide 1
Slide 1 text
Notion APIと学ぶNext.js
2023/05/27
Slide 2
Slide 2 text
自己紹介
● 名前：ak2ie
● 職業：Webエンジニア
● 好きなもの：コーヒー
Slide 3
Slide 3 text
目次
1. Next.jsとは？
2. ページの作り方
a. URLパラメータ、ローディング、リンク
3. fetch API
a. データ取得
b. 再検証
Slide 4
Slide 4 text
Next.js
● Reactをベースにしたフロントエンドフレームワーク
● ルーティングが簡単
● スタイル設定もできる
● ver. 13での動作を説明します
Slide 5
Slide 5 text
ブログ
● 記事
○ Notionで書く
○ URLは/articles/****で自由に設定可能
● 固定ページもある
Slide 6
Slide 6 text
Notion
Slide 7
Slide 7 text
App Router
● ページはapp内にディレクトリを作り、
page.tsxを置く
● https://example.com/articles
● ver. 12以前はpagesディレクトリを使っていた
app
page.tsx
articles
Slide 8
Slide 8 text
URLパラメータの取得
● ディレクトリ名を”[“, “]”で囲む
● propsからパラメータを取得できる
https://example.com/articles/title
const Articles = async ({ params: { slug } }: Props)
=> {
return
slug
} app page.tsx articles [slug]Slide 9
Slide 9 text
ローディング
● page.tsxと同じディレクトリに
”loading.tsx”を置くだけ
● 読み込み中だけ表示される
app/articles/loading.tsx
export default function Loading() {
return
Loading...
} app page.tsx articles loading.tsxSlide 10
Slide 10 text
Not Found
● app/not-found.tsxに書く
export default function NotFound() {
return
ページが存在しません
} ● notFound()を呼んで、リダイレクトもできる import { notFound } from "next/navigation"; notFound(); app not-found.tsxSlide 12
Slide 12 text
データ取得
● 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",
},
}
);
Slide 13
Slide 13 text
Notion データベース
● Notion内でデータを管理
する方法
● Viewを切り替えること
で、見え方を変えられる
Slide 14
Slide 14 text
Notion Page
● Notion内でテキストや画像をまとめる
ところ
● リンクやコードも書けて、総称して「ブ
ロック」と呼ばれる
ブロック
ブロック
Slide 15
Slide 15 text
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" ,
},
}
);
Slide 16
Slide 16 text
再検証（revalidate）
● fetchしたデータは、指定した時間まで
キャッシュされる
● 時間経過後のアクセス時に再取得される
アクセス
指定時間後までキャッシュ
キャッシュ
アクセス
データ再取得
時間
キャッシュを返
す
await fetch(
next: {
revalidate: 30,
},
Slide 17
Slide 17 text
Server/Client Component
● サーバーとクライアント（ブラウザ）どちらでレンダリングするか
● サーバーの方が高速
● Server Component
○ 基本的にこちら
● Client Component
○ クリックイベントなどブラウザでしか扱えないもの
Slide 18
Slide 18 text
Next.jsまとめ
● appディレクトリにページを作る
○ ディレクトリを作って、page.tsxを置く
○ app/[slug]/page.tsx => propsから取得可
○ app/not-found.tsx: Not Foundページ
● fetch API
○ JavaScript APIをNext.jsが拡張
○ revalidateで指定時間キャッシュしてくれる