Notion APIと学ぶNext.js

「にかくほめる！マウントなしのLT会」での発表内容です。

NotionをCMSとしてブログ作成を例に、Next.js(ver. 13)の機能説明をしました。

Transcript

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