pageProps in <App> component differ from next.js

[medihack]

What is the problem?

I am pretty new to Blitz.js, but I stumbled a bit about the fact that pageProps of the component behave a bit differently than in Next.js. In Next.js you get precisely what you return as props from getServerSideProps. In Blitz.js everything is added to an object with the json key. This may break some Next.js plugins (like next-i18next or better to say make them incompatible with Blitz.js as those are HOCs of the App component (see NextI18Next.appWithTranslation) that do not expect that format of pageProps.

Maybe it would be nice to have an option to have it the Next.js way, or at least add a little explanation in the documentation (could not find anything about it there nor in the issues here).

What are detailed steps to reproduce this?

Simply do a console.log(pageProps) inside the <App> component of Next.js and Blitz.js.

Run blitz -v and paste the output here:

Linux 5.4 | linux-x64 | Node: v15.5.0

blitz: 0.30.1 (global) blitz: 0.30.2 (local)

Package manager: yarn System: OS: Linux 5.4 Ubuntu 20.04.1 LTS (Focal Fossa) CPU: (8) x64 Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz Memory: 7.16 GB / 12.42 GB Shell: 5.0.17 - /bin/bash Binaries: Node: 15.5.0 - ~/.nvm/versions/node/v15.5.0/bin/node Yarn: 1.22.10 - /mnt/c/Users/kaisc/AppData/Roaming/npm/yarn npm: 7.3.0 - ~/.nvm/versions/node/v15.5.0/bin/npm Watchman: Not Found npmPackages: @prisma/client: ~2.17 => 2.17.0 blitz: 0.30.2 => 0.30.2 prisma: ~2.17 => 2.17.0 react: 0.0.0-experimental-3310209d0 => 0.0.0-experimental-3310209d0 react-dom: 0.0.0-experimental-3310209d0 => 0.0.0-experimental-3310209d0 typescript: 4.1.5 => 4.1.5

[Skn0tt]

Hi @medihack, thanks for submitting this issue! I can see how this behaviour is confusing.

It's caused by babel-plugin-superjson-next, which adds support for non-JSON-compatible data types (e.g. Date, Map, Set, NaN ...). This is done by adding a new property called meta, which contains information on original data types. Components are wrapped as following:

function SuperJsonWrapper({ props, meta }) {
  const realProps = SuperJSON.deserialize({ json: props, meta })
  return <OriginalComponent {...realProps} />
}

As you can see, this uses a prop called "props". That's where the confusion comes from.

I see how plugins like next-i18n could be confused by this. Now that I think of it, we can change babel-plugin-superjson-next to be more idiomatic. Will put up a PR on this :)

[Skn0tt]

Alright, PR is merged! This should improve once babel-plugin-superjson-next@0.2.2 lands in Blitz.js :)

[medihack]

Wow, this was blitz fast ;-) I close the issue, ok?