Next.js - getInitialProps() Function

---

---

The getInitialProps() Function

The Next.js getInitialProps() function is used to fetch data for a page during the server-side rendering (SSR) or on the client side during a page transition.

Syntax

Following is syntax of getInitialProps() function:

static async getInitialProps(context) {
    const res = await fetch('link/to/api');
    const posts = await res.json();
    return { posts }; // Pass props to the component
}

Parameters

The method takes a 'context' object as its parameter. This object will provide helpful information to the function such as:

• pathname: The path section of URL
• query: The query string section of URL parsed as an object
• asPath: String of the actual path (including the query) shown in the browser
• req: HTTP request object (server only)
• res: HTTP response object (server only)
• err: Error object if any error is encountered during the rendering

Return Value

The method returns an object containing the data that will be passed to the page component as props.

Key Points

• The function can be used to fetch data on the server side or client side.
• You can use getInitialProps function in both class components and functional components.
• The function is deprecated and used only in old versions of Next.js. It is recommended to use getStaticProps or getServerSideProps for fetching data in newer versions.

Example 1

In this example, we are fetching a list of blog posts from an API using getInitialProps method and displaying them on the page.

class MyPage extends React.Component {
    static async getInitialProps() {
    const res = await fetch(`https://jsonplaceholder.typicode.com/posts/`);
    const posts = await res.json(); 

    return { posts }; // Return as `posts` to match render method
    }

    render() {
    const { posts } = this.props;

    return (
        <ul>
            {posts.map((post) => (
            <li key={post.id}>
                <h2>{post.title}</h2>
                <p>{post.body}</p>
            </li>
            ))}
        </ul>
    );
    }
}

export default MyPage;

Output

Example 2

In this example, we are fetching a single blog post based on the id provided in the URL query parameter. We used the context.query object to get the id user entered in the URL, then fetched the post data from the API using that id.

import React from 'react';

class MyPage extends React.Component {
  static async getInitialProps(ctx) {
    const { query } = ctx;
    const id = query.id || 1; // Get the `id` from the query string
    const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
    const post = await res.json();

    return { post };
  }

  render() {
    const { post } = this.props;

    return (
      <div>
        <h1>{post.title}</h1>
        <p>{post.body}</p>
      </div>
    );
  }
}

export default MyPage;

Output