Static Generation with Automatic Revalidation (ISR)

Showcase Incremental Static Regeneration using `getStaticProps` and `revalidate` property to cache and periodically update static pages.
export async function getStaticProps() {
   // Fetch data from an API or other sources
   const data = await fetchData();

   return {
      props: { data }, // pass the data as props to the page
      revalidate: 10, // revalidate the data every 10 seconds
Defines getStaticProps function for Static Generation with data fetched at build time. The page will be re-rendered at most once every 10 seconds if new requests come in.
export default function Page({ data }) {
  return (
      <h1>My Static Page</h1>
      {/* Render your data here */}
      <pre>{JSON.stringify(data, null, 2)}</pre>
Exports the page component that consumes the static data. It uses the data passed through getStaticProps.