Plans to fetch data using co-location within JSX

The newly announced Next.js 12 signals a future shift by the Next team to move away from ‘data functions’ like getStaticProps to co-locating data collection within JSX.

Builds using experimental React 18 (which is in alpha) features - like SSR and RSC - on Next 12 currently fail.

Are there plans to adapt the next-mdx-remote package into this new model?

[jescalan]

Yes

[noahlst]

At this time, if you’re experiencing errors with React 18 concurrency features, check:

• that next-mdx-remote is pinned at version 4.0.1
• that you are using the latest version of Next.js (12.1.4 at writing)
• that you’re using the latest version of React (i.e. 18.0.0 proper)
• that your next.config.js includes experimental: { runtime: "nodejs"} (Edge Runtime disables eval which this library requires)

If none of that works try adding this to your next.config.js:

webpack: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      "react/jsx-runtime.js": path.resolve("node_modules/react/jsx-runtime"),
    };
    return config;
  },

Or you can try require.resolve instead of path. This is courtesy of @jakejarvis

Note that, with time, this will probably break!