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
The Next.js community has a new home. This thread is preserved for historical purposes. The content of this conversation may be innaccurrate or out of date. Go to new community home →

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
10
  • reply
  • like
I agree this could use better documentation. Also the distinction between getInitialProps at the document, app, and page level.
like-fill
2
  • 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.
like-fill
5
  • reply
  • like