インクリメンタル静的再生成 (ISR) の実装方法

import type { GetStaticPaths, GetStaticProps } from 'next'

interface Post {
  id: string
  title: string
  content: string
}

interface Props {
  post: Post
}

export const getStaticPaths: GetStaticPaths = async () => {
  const posts = await fetch('https://api.vercel.app/blog').then((res) =>
    res.json()
  )
  const paths = posts.map((post: Post) => ({
    params: { id: String(post.id) },
  }))

  // ビルド時にこれらのパスのみ事前レンダリング
  // { fallback: 'blocking' } は存在しないパスをオンデマンドでサーバーサイドレンダリング
  return { paths, fallback: false }
}

export const getStaticProps: GetStaticProps<Props> = async ({
  params,
}: {
  params: { id: string }
}) => {
  const post = await fetch(`https://api.vercel.app/blog/${params.id}`).then(
    (res) => res.json()
  )

  return {
    props: { post },
    // Next.js はリクエストが来たときにキャッシュを無効化します（最大60秒に1回）
    revalidate: 60,
  }
}

export default function Page({ post }: Props) {
  return (
    <main>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </main>
  )
}

import type { NextApiRequest, NextApiResponse } from 'next'

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  // 有効なリクエストか確認するために秘密をチェック
  if (req.query.secret !== process.env.MY_SECRET_TOKEN) {
    return res.status(401).json({ message: '無効なトークン' })
  }

  try {
    // これはリライトされたパスではなく実際のパスである必要があります
    // 例: "/posts/[id]" の場合は "/posts/1"
    await res.revalidate('/posts/1')
    return res.json({ revalidated: true })
  } catch (err) {
    // エラーが発生した場合、Next.js は最後に正常に生成された
    // ページを表示し続けます
    return res.status(500).send('再検証エラー')
  }
}

import type { GetStaticProps } from 'next'

interface Post {
  id: string
  title: string
  content: string
}

interface Props {
  post: Post
}

export const getStaticProps: GetStaticProps<Props> = async ({
  params,
}: {
  params: { id: string }
}) => {
  // このリクエストで未捕捉エラーが発生した場合、Next.js は
  // 現在表示されているページを無効化せず、
  // 次のリクエストで getStaticProps を再試行します
  const res = await fetch(`https://api.vercel.app/blog/${params.id}`)
  const post: Post = await res.json()

  if (!res.ok) {
    // サーバーエラーがある場合、キャッシュが更新されないように
    // 返す代わりにエラーをスローすることを検討
    throw new Error(`投稿の取得に失敗、ステータス ${res.status}`)
  }

  return {
    props: { post },
    // Next.js はリクエストが来たときにキャッシュを無効化します（最大60秒に1回）
    revalidate: 60,
  }
}