getStaticProps

getStaticProps is a special asynchronous function that you can export from a page in Next.js. Its primary purpose is to pre-render a page at build time. When Next.js builds your application, it will execute getStaticProps. The data returned from getStaticProps will be passed to the page component as props. This means the page will be generated as static HTML before the user requests it.

This function runs only on the server-side. It will not be included in the client-side JavaScript bundle. The data fetched by getStaticProps can come from any data source, such as a headless CMS, a database, or an external API. If getStaticProps is present in a page, Next.js will statically generate the page at build time.

You can also use getStaticProps to fetch data for dynamic routes. For example, if you have a page for blog posts, you can use getStaticProps with getStaticPaths to generate each blog post page at build time. This significantly improves performance as the page is already generated and ready to be served.

The function must return an object containing a props property. This props object will be passed to the page component. If you need to revalidate the data at a certain interval, you can use Incremental Static Regeneration (ISR) by returning a revalidate property along with props. This allows you to update static pages without rebuilding the entire site.