インクリメンタル静的再生成 (ISR)

function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

// この関数はサーバーサイドでビルド時に呼び出されます。
// 再検証が有効で新しいリクエストがある場合、
// サーバーレス関数で再度呼び出される可能性があります
export async function getStaticProps() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  return {
    props: {
      posts,
    },
    // Next.jsはページの再生成を試みます:
    // - リクエストがあるとき
    // - 最大10秒に1回
    revalidate: 10, // 秒単位
  }
}

// この関数はサーバーサイドでビルド時に呼び出されます。
// パスが生成されていない場合、
// サーバーレス関数で再度呼び出される可能性があります
export async function getStaticPaths() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // 投稿に基づいてプリレンダリングするパスを取得
  const paths = posts.map((post) => ({
    params: { id: post.id },
  }))

  // ビルド時にこれらのパスのみプリレンダリングします。
  // { fallback: 'blocking' }は、パスが存在しない場合
  // オンデマンドでページをサーバーレンダリングします
  return { paths, fallback: 'blocking' }
}

export default Blog

https://<your-site.com>/api/revalidate?secret=<token>

export default async function handler(req, res) {
  // 秘密を確認して有効なリクエストか検証
  if (req.query.secret !== process.env.MY_SECRET_TOKEN) {
    return res.status(401).json({ message: '無効なトークンです' })
  }

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

$ next build
$ next start

export async function getStaticProps() {
  // このリクエストがキャッチされないエラーをスローした場合、
  // Next.jsは現在表示されているページを無効化せず、
  // 次のリクエストでgetStaticPropsを再試行します
  const res = await fetch('https://.../posts')
  const posts = await res.json()

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

  // リクエストが成功した場合、投稿を返し、
  // 10秒ごとに再検証します
  return {
    props: {
      posts,
    },
    revalidate: 10,
  }
}