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
38
Go言語CLIツールで生産効率UPした話
ak2ie
0
110
Goではじめるバックエンド開発
ak2ie
0
66
NestJSのはじめ方
ak2ie
0
140
フロントエンドでDDDやってみた
ak2ie
0
78
初心者がシビックテックに参加してみた
ak2ie
0
110
Firebase についてとことん語りたい
ak2ie
0
110
D3.jsでグラフを描いてみた
ak2ie
0
110
Flutterはじめます
ak2ie
0
150
Other Decks in Programming
See All in Programming
高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025
naofumi
4
4k
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
0
1k
複雑化したリポジトリをなんとかした話 pipenvからuvによるモノレポ構成への移行
satoshi256kbyte
1
1k
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
1
440
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
0
110
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
480
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
270
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
670
Devvox Belgium - Agentic AI Patterns
kdubois
1
120
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1.1k
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
220
育てるアーキテクチャ:戦い抜くPythonマイクロサービスの設計と進化戦略
fujidomoe
1
170
Featured
See All Featured
Site-Speed That Sticks
csswizardry
11
900
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
The Cost Of JavaScript in 2023
addyosmani
54
9k
Side Projects
sachag
455
43k
How GitHub (no longer) Works
holman
315
140k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Being A Developer After 40
akosma
91
590k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
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で指定時間キャッシュしてくれる