Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Notion APIと学ぶNext.js

Notion APIと学ぶNext.js

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

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

ak2ie

May 27, 2023
Tweet

More Decks by ak2ie

Other Decks in Programming

Transcript

  1. 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
  2. データ取得 • 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", }, } );
  3. 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" , }, } );
  4. Server/Client Component • サーバーとクライアント(ブラウザ)どちらでレンダリングするか • サーバーの方が高速 • Server Component ◦

    基本的にこちら • Client Component ◦ クリックイベントなどブラウザでしか扱えないもの
  5. Next.jsまとめ • appディレクトリにページを作る ◦ ディレクトリを作って、page.tsxを置く ◦ app/[slug]/page.tsx => propsから取得可 ◦

    app/not-found.tsx: Not Foundページ • fetch API ◦ JavaScript APIをNext.jsが拡張 ◦ revalidateで指定時間キャッシュしてくれる