インクリメンタル静的再生成 (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: 'Invalid token' })
  }
 
  try {
    // これは実際のパスである必要があり、書き換えられたパスではありません
    // 例："/posts/[id]"の場合、これは"/posts/1"となります
    await res.revalidate('/posts/1')
    return res.json({ revalidated: true })
  } catch (err) {
    // エラーが発生した場合、Next.jsは
    // 最後に正常に生成されたページを表示し続けます
    return res.status(500).send('Error revalidating')
  }
}

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(`Failed to fetch posts, received status ${res.status}`)
  }
 
  return {
    props: { post },
    // Next.jsは60秒に1回まで、リクエストが来た際に
    // キャッシュを無効化します。
    revalidate: 60,
  }
}

module.exports = {
  logging: {
    fetches: {
      fullUrl: true,
    },
  },
}

NEXT_PRIVATE_DEBUG_CACHE=1