#Incremental Static Regeneration

1 messages · Page 1 of 1 (latest)

frank spireBOT
#

Hi @somber ridge. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Sure! Here is an example of using generateStaticParams with on-demand Incremental Static Regeneration (ISR) in the app router for an event listing web application. This example demonstrates how to set up an API route for on-demand revalidation and how to use generateStaticParams in your Next.js application.

Step 1: Create an Environment Variable

First, create an environment variable to store a revalidation secret. This secret will be used to secure the revalidation endpoint.

Step 2: Create an API Route for On-Demand Revalidation

Create an API route that checks for the secret and triggers revalidation. Here is an example of how to set this up:

// app/api/revalidate/route.ts
import { revalidatePath } from 'next/cache';

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  if (searchParams?.secret !== process.env.MY_SECRET_TOKEN) {
    return new Response(`Invalid credentials`, {
      status: 500,
    });
  }
  revalidatePath('/events');
  return new Response(
    {
      revalidated: true,
      now: Date.now(),
    },
    {
      status: 200,
    },
  );
}

Step 3: Use generateStaticParams in Your Application

Next, use generateStaticParams to define the static paths for your event listing pages. Here is an example:

// app/events/[id]/page.tsx
import { GetStaticProps, GetStaticPaths } from 'next';

export async function generateStaticParams() {
  const res = await fetch('<https://api.example.com/events'>);
  const events = await res.json();

  return events.map((event: { id: string }) => ({
    params: { id: event.id },
  }));
}

export async function getStaticProps({ params }: { params: { id: string } }) {
  const res = await fetch(`<https://api.example.com/events/${params.id}`>);
  const event = await res.json();
#

return {
props: {
event,
},
revalidate: 10, // Revalidate at most once every 10 seconds
};
}

const EventPage = ({ event }: { event: any }) => {
return (
<div>
<h1>{event.title}</h1>
<p>{event.description}</p>
</div>
);
};

export default EventPage;


### Summary
- **Environment Variable**: Store a revalidation secret.
- **API Route**: Create an API route to handle on-demand revalidation.
- **Static Params**: Use `generateStaticParams` to define static paths and `getStaticProps` to fetch event data.

For more details, you can refer to the **Vercel documentation on Incremental Static Regeneration** (<https://vercel.com/docs/incremental-static-regeneration/quickstart>) and the **Next.js documentation on ISR** (<https://nextjs.org/docs/pages/building-your-application/data-fetching/incremental-static-regeneration>).

If you have any more questions or need further assistance, feel free to ask!
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
#

@somber ridge kapa.ai is still learning and improving, please let us know how it did by reacting below

somber ridge
frank spireBOT
#

Let me check the knowledge base for you. One moment! :books: