next.js: using-preact example / preact 18 compat in general does not work with next 13

Is there any update on Preact working on Nextjs 13?

Any update on this ?

I would like to keep using Preact, hope a fix can be merged soon

Hiya! If you really must, I patched Next with the least amount of changes to work with Preact again https://github.com/lfre/next-13-preact. Have fun.

The version bump is not enough. Next 13 expects a renderToReadableStream from react-dom, which is not currently supported in preact-render-to-string. This PR should hopefully unblock it: https://github.com/preactjs/preact-render-to-string/pull/259.

That one is a blocker for Remix to support Preact as well.

This mostly works for me on the latest preact and react, but I do find an error in some places from a lack of React.use in preact. I searched around for a solution, but React.use is a troubling term to search for…

This is my (mostly) working next.config.js:

webpack: (config, { dev, isServer }) => {
    if (!isServer) {
      Object.assign(config.resolve.alias, {
        "react/jsx-runtime.js": "preact/compat/jsx-runtime",
        react: "preact/compat",
        "react-dom/test-utils": "preact/test-utils",
        "react-dom": "preact/compat",
      });
    }
    return config;
  },

Edit: You know, I realized, I barely have any server components in my project, and I doubt this works with server components at all…

any update on future nextjs + preact compatability? since this is open for over a year and there are no updates about nextjs 13 and 14, can we at least get a word on future versions? or will this never work again? anything?

@samcx the issue / discussion as well as the plugin you’ve mentioned refer to integrating Preact Signals (the state management solution) with Next.js while still using React.

This issue, however, is about using Preact as a drop-in replacement for React with Next.js as illustrated originally in the official using-preact example. Since Next.js 13, this doesn’t work with the pages nor app directory.

So, please do not close this issue. Instead, could you tell us whether Preact will work with Next.js 13 and onward at some point?

Hi, just curios: What is the current state of this issue?

It’s not that you can’t make a site work well/fast with react, it’s that you have a LOT more room in your bundle, parse and init budgets if you use preact instead of react.

Hi everyone,

There was a separate larger issue thread (moved to <picture data-single-emoji=":nextjs:" title=":nextjs:"></picture> Discussions) around this (with a working swc plugin solution to get Signals working) for using Preact with App Router.

Let me know if that helps!

If yes, I will be closing this issue in favor of keeping that discussion open.