Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Notion APIと学ぶNext.js
Search
ak2ie
May 27, 2023
Programming
0
550
Notion APIと学ぶNext.js
「にかくほめる!マウントなしのLT会」での発表内容です。
NotionをCMSとしてブログ作成を例に、Next.js(ver. 13)の機能説明をしました。
ak2ie
May 27, 2023
Tweet
Share
More Decks by ak2ie
See All by ak2ie
SVG完全に理解してグラフ書いてみた
ak2ie
0
36
Go言語CLIツールで生産効率UPした話
ak2ie
0
110
Goではじめるバックエンド開発
ak2ie
0
63
NestJSのはじめ方
ak2ie
0
140
フロントエンドでDDDやってみた
ak2ie
0
75
初心者がシビックテックに参加してみた
ak2ie
0
110
Firebase についてとことん語りたい
ak2ie
0
110
D3.jsでグラフを描いてみた
ak2ie
0
110
Flutterはじめます
ak2ie
0
150
Other Decks in Programming
See All in Programming
The State of Fluid (2025)
s2b
0
200
AIレビュアーをスケールさせるには / Scaling AI Reviewers
technuma
2
230
STUNMESH-go: Wireguard NAT穿隧工具的源起與介紹
tjjh89017
0
380
RDoc meets YARD
okuramasafumi
1
110
画像コンペでのベースラインモデルの育て方
tattaka
3
1.9k
AIエージェント開発、DevOps and LLMOps
ymd65536
1
340
AIコーディングAgentとの向き合い方
eycjur
0
220
令和最新版手のひらコンピュータ
koba789
14
8k
サイトを作ったらNFCタグキーホルダーを爆速で作れ!
yuukis
0
500
CSC305 Summer Lecture 05
javiergs
PRO
0
110
エンジニアのための”最低限いい感じ”デザイン入門
shunshobon
0
130
実践!App Intents対応
yuukiw00w
1
350
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
It's Worth the Effort
3n
187
28k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Designing for humans not robots
tammielis
253
25k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
YesSQL, Process and Tooling at Scale
rocio
173
14k
How STYLIGHT went responsive
nonsquared
100
5.7k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
570
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
Transcript
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 <p>slug</p> } app page.tsx articles [slug]
ローディング • page.tsxと同じディレクトリに ”loading.tsx”を置くだけ • 読み込み中だけ表示される app/articles/loading.tsx export default function
Loading() { return <p className="p-2">Loading...</p> } app page.tsx articles loading.tsx
Not Found • app/not-found.tsxに書く export default function NotFound() { return
<p className="p-2">ページが存在しません</p> } • notFound()を呼んで、リダイレクトもできる import { notFound } from "next/navigation"; notFound(); app not-found.tsx
リンク • Next.js 13より、<Link>内に<a>タグは不要 ver. 13 <Link href="/about">About</Link> ver. 12以前
<Link href="/about"><a>About</a></Link>
データ取得 • 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で指定時間キャッシュしてくれる