How to Revalidate Page in Next.js: Simple Guide

In Next.js, you can revalidate a page by using getStaticProps with the revalidate property to enable Incremental Static Regeneration (ISR). To trigger revalidation on demand, use the res.revalidate('/path') method inside an API route to refresh the page content without redeploying.

Syntax

Next.js uses getStaticProps to generate static pages. Adding revalidate tells Next.js how often to update the page in seconds. You can also call res.revalidate(path) inside an API route to manually trigger revalidation for a specific page.

• getStaticProps: Fetches data at build time.
• revalidate: Number of seconds after which a page re-generation can occur.
• res.revalidate(path): API method to trigger on-demand revalidation.

javascript

export async function getStaticProps() {
  // fetch data here
  return {
    props: { /* data */ },
    revalidate: 10, // seconds
  };
}

// API route example
export default async function handler(req, res) {
  // Trigger revalidation for '/'
  await res.revalidate('/');
  res.json({ revalidated: true });
}

Example

This example shows a Next.js page that revalidates every 10 seconds automatically and an API route to trigger revalidation manually.

javascript

import React from 'react';

export default function Home({ time }) {
  return <div>Page generated at: {time}</div>;
}

export async function getStaticProps() {
  return {
    props: { time: new Date().toISOString() },
    revalidate: 10, // Revalidate every 10 seconds
  };
}

// pages/api/revalidate.js
export default async function handler(req, res) {
  // Only allow POST requests
  if (req.method !== 'POST') {
    return res.status(405).json({ message: 'Method not allowed' });
  }

  try {
    // Revalidate the home page
    await res.revalidate('/');
    return res.json({ revalidated: true });
  } catch (err) {
    return res.status(500).json({ message: 'Error revalidating' });
  }
}

Output

Page generated at: 2024-06-01T12:00:00.000Z

Common Pitfalls

• Forgetting to set revalidate in getStaticProps means the page will never update after build.
• Calling res.revalidate outside an API route or without await can cause errors.
• Not protecting the API route can allow anyone to trigger revalidation, which may cause performance issues.
• Using revalidate with dynamic routes requires passing the correct path to res.revalidate.

javascript

/* Wrong: Missing revalidate property */
export async function getStaticProps() {
  return { props: { data: 'static' } };
}

/* Right: Adding revalidate */
export async function getStaticProps() {
  return { props: { data: 'static' }, revalidate: 60 };
}

Quick Reference

Feature	Description	Usage
getStaticProps	Fetch data at build time	export async function getStaticProps() { return { props: {} } }
revalidate	Seconds before page regenerates	return { props: {}, revalidate: 10 }
res.revalidate(path)	Manually trigger page revalidation	await res.revalidate('/path') in API route
API Route	Endpoint to trigger revalidation	export default async function handler(req, res) { await res.revalidate('/') }

Key Takeaways

Use the revalidate property in getStaticProps to enable automatic page regeneration.

Trigger on-demand revalidation by calling res.revalidate(path) inside an API route.

Protect your API route to avoid unwanted revalidation requests.

Without revalidate, static pages won’t update after build.

Always await res.revalidate to ensure revalidation completes before response.