インクリメンタル静的再生成(ISR)
Next.js の静的サイト生成(SSG)機能を使って、データを定期的に更新できます。getStaticProps
関数のrevalidate
オプションを設定することで、ISR を実現できます。これにより、ビルド時に生成されたページをキャッシュし、一定期間経過後に再生成することができます。
例:
import { GetStaticProps } from 'next'
export const getStaticProps: GetStaticProps = async () => {
const response = await fetch('https://api.example.com/data')
const data = await response.json()
return {
props: {
data,
},
revalidate: 60, // 60秒ごとに再生成
}
}
function HomePage({ data }) {
return (
<div>
<h1>Data:</h1>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
)
}
export default HomePage