Incremental Static Regeneration (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) },
  }))
 
  return { paths, fallback: 'blocking' }
}
 
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