\n\nRecommended:
\ngetStaticPropsorgetServerSidePropsIf you're using Next.js 9.3 or newer, we recommend that you use
\ngetStaticPropsorgetServerSidePropsinstead ofgetInitialProps.These new data fetching methods allow you to have a granular choice between static generation and server-side rendering.\nLearn more on the documentation for Pages and Data fetching:
\n
getInitialProps enables server-side rendering in a page and allows you to do initial data population, it means sending the page with the data already populated from the server. This is especially useful for SEO.
\n\n\n
getInitialPropswill disable Automatic Static Optimization.
getInitialProps is an async function that can be added to any page as a static method. Take a look at the following example:
function Page({ stars }) {\n return <div>Next stars: {stars}</div>\n}\n\nPage.getInitialProps = async ctx => {\n const res = await fetch('https://api.github.com/repos/zeit/next.js')\n const json = await res.json()\n return { stars: json.stargazers_count }\n}\n\nexport default Page\nOr using a class component:
\nimport React from 'react'\n\nclass Page extends React.Component {\n static async getInitialProps(ctx) {\n const res = await fetch('https://api.github.com/repos/zeit/next.js')\n const json = await res.json()\n return { stars: json.stargazers_count }\n }\n\n render() {\n return <div>Next stars: {this.props.stars}</div>\n }\n}\n\nexport default Page\ngetInitialProps is used to asynchronously fetch some data, which then populates props.
Data returned from getInitialProps is serialized when server rendering, similar to what JSON.stringify does. Make sure the returned object from getInitialProps is a plain Object and not using Date, Map or Set.
For the initial page load, getInitialProps will run on the server only. getInitialProps will then run on the client when navigating to a different route via the next/link component or by using next/router.
getInitialProps receives a single argument called context, it's an object with the following properties:
pathname - Current route. That is the path of the page in /pagesquery - Query string section of URL parsed as an objectasPath - String of the actual path (including the query) shown in the browserreq - HTTP request object (server only)res - HTTP response object (server only)err - Error object if any error is encountered during the renderinggetInitialProps can not be used in children components, only in the default export of every pagegetInitialProps, make sure to import them properly, otherwise it'll slow down your appIf you're using TypeScript, you can use the NextPage type for function components:
import { NextPage } from 'next'\n\ninterface Props {\n userAgent?: string;\n}\n\nconst Page: NextPage<Props> = ({ userAgent }) => (\n <main>Your user agent: {userAgent}</main>\n)\n\nPage.getInitialProps = async ({ req }) => {\n const userAgent = req ? req.headers['user-agent'] : navigator.userAgent\n return { userAgent }\n}\n\nexport default Page\nAnd for React.Component, you can use NextPageContext:
import React from 'react'\nimport { NextPageContext } from 'next'\n\ninterface Props {\n userAgent?: string;\n}\n\nexport default class Page extends React.Component<Props> {\n static async getInitialProps({ req }: NextPageContext) {\n const userAgent = req ? req.headers['user-agent'] : navigator.userAgent\n return { userAgent }\n }\n\n render() {\n const { userAgent } = this.props\n return <main>Your user agent: {userAgent}</main>\n }\n}\nFor more information on what to do next, we recommend the following sections:
\n\n\n"},"__N_SSG":true}