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
340
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
Go言語CLIツールで生産効率UPした話
ak2ie
0
71
Goではじめるバックエンド開発
ak2ie
0
48
NestJSのはじめ方
ak2ie
0
92
フロントエンドでDDDやってみた
ak2ie
0
62
初心者がシビックテックに参加してみた
ak2ie
0
84
Firebase についてとことん語りたい
ak2ie
0
99
D3.jsでグラフを描いてみた
ak2ie
0
96
Flutterはじめます
ak2ie
0
93
Other Decks in Programming
See All in Programming
Building a Smaller App Binary
kateinoigakukun
2
200
Some Quick Ideas To Improve Your Tests ( #jassttokyo )
teyamagu
PRO
2
2.3k
オブジェクトしこう
okuramasafumi
2
130
Kotlinを用いたDSL的な設計手法と使用上の注意
kohii00
3
530
品質とスピードを両立: TypeScriptの柔軟な型システムをバックエンドで活用する
kosui
4
870
OpenAPI を守るのは難しい
ohmori_yusuke
1
140
PHPでOfficeファイルを取り扱う! PHP Officeライブラリを プロダクトに組み込んだ話
hirobe1999
0
840
上手な探索的テストとその上達方法について
matsu802
4
650
せっかくモデル図描くのなら、嬉しいことが多い方がいいよね!
kuboaki
1
1.7k
孤独のCTOグルメという やや奇抜な企画をやった目的と効果
shoheimitani
3
1k
フロントエンドパフォーマンス 入門
shouta2
7
1.5k
WebComponentsで フレームワークを1ページに共存させる
webuilder240
0
150
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1023
450k
Fantastic passwords and where to find them - at NoRuKo
philnash
35
2.4k
From Idea to $5000 a Month in 5 Months
shpigford
376
45k
We Have a Design System, Now What?
morganepeng
42
6.7k
KATA
mclloyd
14
11k
Optimizing for Happiness
mojombo
369
69k
Fashionably flexible responsive web design (full day workshop)
malarkey
397
65k
Navigating Team Friction
lara
177
13k
Large-scale JavaScript Application Architecture
addyosmani
501
110k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.8k
Testing 201, or: Great Expectations
jmmastey
27
6.3k
Producing Creativity
orderedlist
PRO
335
39k
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で指定時間キャッシュしてくれる