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

[kyle-ssg]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

N/A

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

using-preact examples are using Preact 17.x, however NextJS needs >React 18.2.0.

Expected Behavior

I can use Preact with Next 13

Link to reproduction

N/A

To Reproduce

npx create-next-app@latest --example using-preact using-preact-app

[maxproske]

@kyle-ssg It looks like preact@10.9.0 added support for React 18 hooks, so I'll try to upgrade the alias package to support Next 13.

[kyle-ssg]

Oh right, did that actually work? I took a look at installing preact latest prior to opening this. Trying that I ran into an issue where it thought compat/server.browser.js wasn't exported from package.json, https://github.com/preactjs/preact/blob/master/package.json#L73. I tried patching that then ran into loads more errors.

[lfre]

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.

[Lucasvo1]

Is there any update on Preact working on Nextjs 13?

[lfre]

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.

[1997roylee]

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.

Excellent solution!

[adiron]

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

[FleetAdmiralJakob]

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

[sliceem88]

Any update on this ?

[CaptainN]

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...

[mansisindhu]

Any update on this?

[FleetAdmiralJakob]

@mansisindhu Good question

[mtnhld]

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?

[sinafath]

using preact is a real performance boost It would be great if nextjs supports it!

thanks

[samcx]

Hi everyone,

There was a separate larger issue thread (moved to 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.

[nilsmehlhorn]

@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?

[mtnhld]

@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?

I second this and have the same issue.

The give more detail: I created a simple next js app with react and no additional libraries and the app is hovering around 303kb uncompressed / 89kb compressed first load js bundle size. I am using static site generation with minimal prototype business logic. While i realize that next js represents a real boost in performance and seo capabilities, using preact for simpler projects would give users massive advantage imo, thats why i would love to see support. thank you

[samcx]

@nilsmehlhorn @mtnhld Thanks for the clarification!

Instead, could you tell us whether Preact will work with Next.js 13 and onward at some point?

Not anytime soon I'm afraid → https://github.com/preactjs/preact/issues/4233. Unfortunately, it's not something Next.js can easily do to replace React and it's APIs we use with a simple plugin, and vice versa for the Preact team to maintain that plugin.

the app is hovering around 303kb uncompressed / 89kb compressed first load js bundle size

We still have room to improve here with Next.js! Although Preact is in a whole different bundle size territory than React + Next.js, I wouldn't be too hung up on bundle size, even for simple static sites built on Next.js. There isn't a direct correlation between bundle size and performance because the largest JS bundles load after the HTML, CSS, etc.

[CaptainN]

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.