getInitialProps in _app.js breaks {notFound: true} in pages

[marcvangend]

What version of Next.js are you using?

10.0.8

What version of Node.js are you using?

14 (Code Sandbox), 15.11.0 (local machine)

What browser are you using?

Chrome

What operating system are you using?

Linux

How are you deploying your application?

intend to use next start, just local testing for now

Describe the Bug

I have a dynamic route post/[id].js in which I fetch data from an external API. If the API returns an error response (eg. a 404), I use return { notFound: true } to render the Next.js 404 page. I also created a custom _app.js to add a header and footer to every page. This all works as expected.

Now when I add a getInitialProps method to _app.js and request a post ID that does not exists, the 404 behavior breaks. Instead of the Next.js 404 page, it renders "An unexpected error has occurred."

Expected Behavior

I expect the 404 page to appear whenever my route returns { notFound: true }, regardless of what happens in _app.js.

To Reproduce

Go to the Code Sandbox at https://codesandbox.io/s/awesome-archimedes-fqz2g?file=/pages/_app.js:226-268. See how the behavior changes when you comment MyApp.getInitialProps = async (appContext) => { ... } in _app.js.

[filipesmedeiros]

These are when I press the failing link.

I hope these can send you in the right direction.

I do think there's a bug here (although I'm not sure). Basically when post 111 fails, Next goes to post 100 for some reason. Also, the statusCode is 200 (inside the gIP context) when accessing a link that returns { notFound: true }, it seems.

[filipesmedeiros]

Nevermind, you just forgot to call the default gIP

  const x = await App.getInitialProps(appContext);
  const res = await fetch("https://jsonplaceholder.typicode.com/posts/100");
  const footerPost = await res.json();
  return { ...x, footerPost };

works

[marcvangend]

Thanks a lot @filipesmedeiros! That indeed solved the problem (combined with import App from "next/app" of course). I updated the Code Sandbox so it is working correctly now.

Now that you mentioned it, I see that the documentation at https://nextjs.org/docs/advanced-features/custom-app also contains these two lines:

//   // calls page's `getInitialProps` and fills `appProps.pageProps`
//   const appProps = await App.getInitialProps(appContext);

I feel like this should have been documented more explicitly, something like this: "If you implement getInitialProps() in a custom app, you must call App.getInitialProps(appContext) and merge the returned object into the return value." Would you agree? I can submit a pull request for the documentation.

[filipesmedeiros]

Yeah I agree!

[ijjk]

Closing as documentation for this was updated in #24002

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.