Next.js

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

Channels

Chat

Team

getInitialProps: confusion in the docs about parameters

November 24, 2018 at 11:34am

Realtebo

@realtebo

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

Realtebo@realtebo

2:10pm

I can finally reply to my own question

2:10pm

when _app.js is invoked receive a props object with

2:11pm

[ 'Component', 'router', 'ctx' ]

Here, ctx is an object with

[ 'err', 'req', 'res', 'pathname', 'query', 'asPath' ]

2:12pm

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

Nathaniel Hill@nathaniel

4:43pm

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

November 26, 2018 at 8:47am

Griko Nibras@grikomsn

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

11:55am

Also: https://dev.to/grikomsn/exploring-undocumented-getinitialprops-properties-on-nextjs-de0