Next.js - getStaticProps Function

In Next.js getStaticProps() function is used fetch API data at the build time to the server. In this chapter we will learn, what is getStaticProps function, how to use it, syntax and example usage of getStaticProps method.

Next.js getStaticProps Function

The getStaticProps function in Next.js is a data-fetching method used for fetching data from sources at build time for pages that are pre-rendered as HTML. This data fetching happens once at build time, and same page is severed to every users. The data can be updated only with rebuild of the application, hence this method is not suitable for pages that changes regularly.

Syntax

Following is syntax of getStaticProps function.

export async function getStaticProps() {
    // Simulate fetching data from an API
    const response = await fetch('https://link/to/api');
    const data = await response.json();
  
    return {
      props: {
        data, // Return data to the component
      },
    };
}

Example of Using getStaticPaths in Next.js

In the below example code, we fetched data from an external API using 'getStaticProps()' function. This function will fetch data once at build time, and then create a complete HTML file based on it. Since we are running application in development mode, HTML file will created at development environment itself. See the example below.

// page/index.tsx

import React from 'react';

// Export getStaticProps function to fetch data 
export async function getStaticProps() {
    // Simulate fetching data from an API
    const response = await fetch('https://link/to/api');
    const posts = await response.json();
  
    return {
      props: {
        posts, // This will be passed to Blog component as props
      },
    };
}

// Receive posts prop from getStaticProps function
export default function Blog({ posts }) {
  return (
    <div>
      <h1>Blog Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

Output

In this output, we are displaying data from an API in static page.