getInitialProps: confusion in the docs about parameters
November 24, 2018 at 11:34amThe 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:34amCompare 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 URLquery - query string section of URL parsed as an objectasPath - String of the actual path (including the query) shows in the browserreq - 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
when _app.js is invoked receive a props object with
[ 'Component', 'router', 'ctx' ]
Here, ctx is an object with
[ 'err', 'req', 'res', 'pathname', 'query', 'asPath' ]
After 120 hours of step by step debug and 100 console.log(), I finally understand the chain of events and props transformation
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.**@templateQ 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.