menu

Next.js

A place to chat about Next.js and answer questions. For all other ZEIT products, check this out.

Channels
Team

getInitialProps: confusion in the docs about parameters

November 24, 2018 at 11:34am

getInitialProps: confusion in the docs about parameters

November 24, 2018 at 11:34am

Compare this page: https://nextjs.org/docs#fetching-data-and-component-lifecycle where we see getInitialProps signature as

Page.getInitialProps = async ({ req }) => {
...
}

with https://nextjs.org/docs#custom-app where getInitialProps is

static async getInitialProps({ Component, router, ctx }) {

In the component lifecycle the params are explained as:

getInitialProps receives a context object with the following properties:
pathname - path section of URL
query - query string section of URL parsed as an object
asPath - String of the actual path (including the query) shows in the browser
req - HTTP request object (server only)
res - HTTP response object (server only)
jsonPageRes - Fetch Response object (client only)
err - Error object if any error is encountered during the rendering

So my question is:

What damn are and where are coming from the following properties of the context parameter?

{ Component, router, ctx }


November 24, 2018 at 2:10pm

I can finally reply to my own question

  • reply
  • like

when _app.js is invoked receive a props object with

  • reply
  • like
[ 'Component', 'router', 'ctx' ]

Here, ctx is an object with

[ 'err', 'req', 'res', 'pathname', 'query', 'asPath' ]
  • reply
  • like

After 120 hours of step by step debug and 100 console.log(), I finally understand the chain of events and props transformation

like-fill
9
  • reply
  • like

I agree this could use better documentation. Also the distinction between getInitialProps at the document, app, and page level.

like-fill
1
  • reply
  • like

November 26, 2018 at 8:47am

After days (maybe weeks) of searching everywhere, I think I got the hang of getInitialProps. ✨

I've discussed this on a Spectrum thread before[1]. So from what we know, the documentations shows how the destructured parameters are different on here[2] and here[3]. Apparently, the getInitialProps parameter on a custom App component uses NextAppContext, which has three properties shown below:

// snippet from @types/next/app.d.ts
/**
* Context passed to App.getInitialProps.
* Component is dynamic - cannot infer type.
*
*
@template
Q Query object schema.
*/
export interface NextAppContext<Q extends DefaultQuery = DefaultQuery> {
Component: NextComponentType<any, any, NextContext<Q>>;
router: RouterProps<Q>;
ctx: NextContext<Q>;
}

While the getInitialProps on a normal page or component uses the NextContext which is already documented on the official readme. Here's the snippet from the codebase:

// snippet from @types/next/index.d.ts
/**
* Context object used in methods like `getInitialProps()`
* https://github.com/zeit/next.js/blob/7.0.0/server/render.js#L97
* https://github.com/zeit/next.js/blob/7.0.0/README.md#fetching-data-and-component-lifecycle
*
* @template Q Query object schema.
*/
interface NextContext<Q extends DefaultQuery = DefaultQuery> {
/** path section of URL */
pathname: string;
/** query string section of URL parsed as an object */
query: Q;
/** String of the actual path (including the query) shows in the browser */
asPath: string;
/** HTTP request object (server only) */
req?: http.IncomingMessage;
/** HTTP response object (server only) */
res?: http.ServerResponse;
/** Fetch Response object (client only) - from https://developer.mozilla.org/en-US/docs/Web/API/Response */
jsonPageRes?: NodeResponse;
/** Error object if any error is encountered during the rendering */
err?: Error;
}

Hope this clears the confusion about getInitialProps, I'll probably gonna make some PRs related to this issue.

[1]: https://spectrum.chat/?t=bd0da841-05f0-4b3b-8f1f-9e6b16b1952b

[2]: https://github.com/zeit/next.js/#fetching-data-and-component-lifecycle

[3]: https://github.com/zeit/next.js/#custom-app

like-fill
4
  • reply
  • like