Running SolidJS within Next.js

[yandodov]

Is it doable to have SolidJS within Next? The use case:

1. A fully client-rendered admin interface
   • You don't care about SEO here, so lack of SSR is not really an issue
   • This is highly interactive, so using Solid could be beneficial, due to its rendering model and performance
2. REST API routes provided by Next, which Solid uses to communicate with the backend
3. Main routes rendered by Next again, using RSC as usual and loading the data managed by Solid

I actually have a working prototype here (made largely by Opus 4.6 before I went to bed):
https://github.com/oblik/test-nextjs/tree/solidjs-in-nextjs

The main issue was that there had to be a separate tsconfig.json, since there's React JSX and Solid JSX. But it didn't quite work in the end, so I had to use @ts-nocheck to get Next to build it.

---

If for a second we ignore the fact that this is utterly insane and stupid, it should technically be possible, no? The only crazy thing is having an /admin route where Next/React completely take their hands off and let something else exist there, in this case Solid. The API endpoints and all the other routes are just regular Next.

The main idea here is having the admin be a separate package that uses Solid (because reasons) but that can be dropped into Next and extended. So you write regular React components in one directory, but Solid components in the other (to extend parts of the admin).

Again, if we ignore the fact that this is ridiculous, can it be achieved in a way that doesn't suck? Without (a lot of) crazy hacks, with support for HMR, etc.?

[armaan-71]

It is possible, the 'cleanest' way is to treat the Solid app as an isolated client-side island.

To fix the tsconfig conflict and avoid ts-nocheck, you should:

Isolate the Directory: Move all Solid code into a specific folder (e.g., /packages/admin) with its own tsconfig.json that sets "jsxImportSource": "solid-js".

Externalize the Build: Instead of letting the Next.js compiler handle the Solid files, build the Solid app as a standalone SPA (using Vite) and output it to your Next.js /public folder.

Mount via a Shell: In your Next.js /admin page, use a simple React component that mounts the Solid bundle:

useEffect(() => {
  import('../public/solid-dist/index.js');
}, []);
return <div id="solid-root"></div>;

Dev Proxy: In next.config.js, use rewrites to point /admin to your Solid dev server so you keep HMR for both frameworks simultaneously.

This bypasses the JSX conflict entirely while keeping your API routes and RSCs intact.