{"id":15651378,"url":"https://github.com/lfre/next-preact","last_synced_at":"2025-04-14T19:33:36.735Z","repository":{"id":81247997,"uuid":"591834354","full_name":"lfre/next-preact","owner":"lfre","description":"Patch Next.js 13 and up to use Preact","archived":false,"fork":false,"pushed_at":"2025-04-09T21:55:06.000Z","size":462,"stargazers_count":39,"open_issues_count":0,"forks_count":5,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-09T22:37:21.116Z","etag":null,"topics":["nextjs","preact"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lfre.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-22T02:33:51.000Z","updated_at":"2025-04-09T21:55:10.000Z","dependencies_parsed_at":"2024-12-18T21:21:31.455Z","dependency_job_id":"38a4f681-78c3-4721-8e83-e167db2d4422","html_url":"https://github.com/lfre/next-preact","commit_stats":null,"previous_names":["lfre/next-preact"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lfre%2Fnext-preact","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lfre%2Fnext-preact/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lfre%2Fnext-preact/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lfre%2Fnext-preact/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lfre","download_url":"https://codeload.github.com/lfre/next-preact/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248946068,"owners_count":21187442,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nextjs","preact"],"created_at":"2024-10-03T12:38:09.150Z","updated_at":"2025-04-14T19:33:36.729Z","avatar_url":"https://github.com/lfre.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Next with Preact\n\n## Works up to Next.js 15.3 ✅\n\n\u003e Since Next 13.5, Next compiles some of its dist folder into the \"dist/compiled/next-server\" folder only when publishing to NPM. This means the file \"dist/server/render.js\" is not the one that runs, and thus the patch does nothing. Instead the patches would have to be applied to \"dist/compiled/next-server/pages.runtime.dev.js\" and \"pages.runtime.prod.js\" accordingly. These files are minified so they're much harder to modify. The approach changed to instead patch Preact with a custom version of `renderToReadableStream` until Preact added their own version.\n\n![](https://media3.giphy.com/media/s239QJIh56sRW/giphy.gif)\n\n_...Sighs in JavaScript..._\n\nIf you're unable to use the `app` directory with React Server Components, streaming and other React 18+ features, but still want/need improvements to Next and its utilities, Next with Preact is for you.\n\n\u003e Preact added `renderToReadableStream` in version [6.5.0](https://github.com/preactjs/preact-render-to-string/pull/296). However, App Router is stil incompatible with Preact due to some internal mismatching within hooks.\n\n## ⚠️ Disclaimer ⚠️\n\nMy approach was to achieve this with the least amount of changes to Next.js pointing back to Next 12.3.4. So I can't promise that this will work for all your use cases. I also can't promise that this will automatically work in future versions. Proceed with caution.\n\n## Demo\n\n[Live URL](https://7s2mt8-3000.csb.app/) |\n[CodeSandbox](https://codesandbox.io/p/github/lfre/next-13-preact/main)\n\n## Dependencies\n\n- [next-preact-plugin](https://github.com/preactjs/next-plugin-preact)\n- [patch-package](https://github.com/ds300/patch-package)\n\n## Usage\n\nFollow the instructions in [next-preact-plugin](https://github.com/preactjs/next-plugin-preact), and disable `esmExternals` in your `next.config.js` to resolve this [issue](https://github.com/preactjs/next-plugin-preact/issues/61):\n\n```js\n require('next-plugin-preact')({\n  experimental: {\n    esmExternals: false \n  }\n });\n```\n\n### Hot Reloading\n\nSince Next.js 15.2.0, Next added [webpack layers](https://github.com/vercel/next.js/pull/75878), and `@prefresh/next` stopped working. This can be resolved by adding the layer to the webpack compilation. Refer to `next.config.js` for the `webpack` changes needed and more information.\n\n---\n\nCopy the `patches` directory to your project root.\n\n\u003e If you're using `patch-package` already, add the `.patch` included here to your `patches` directory.\n\nInstall [`patch-package`](https://www.npmjs.com/package/patch-package), and run `patch-package` in `postinstall`:\n\n```json\n{\n  \"scripts\": {\n    \"postinstall\": \"patch-package\"\n  }\n}\n```\n## Patches\n\n- Add `server.browser` export to `preact/package.json`. Won't be done in Preact. [Issue](https://github.com/preactjs/preact/issues/3787)\n  \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flfre%2Fnext-preact","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flfre%2Fnext-preact","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flfre%2Fnext-preact/lists"}