Next.js integration: run Toolpad apps as React server components

[Janpot]

WIP

Closes #3012

// ./app/my-toolpad-app/[[...slug]]/page.tsx
import * as React from 'react';
import { ToolpadApp } from '@mui/toolpad/next';

export default function ToolpadPage() {
  return <ToolpadApp base="/my-toolpad-app" dir="./myToolpadAppDir" />;
}

To Do:

• directives in bundles
• make client component run
• make server component run
• make bindings work
• make backend API work (create an API shim based on serverActions)
• chokidar/fsevents, sort out how to load it correctly (e.g. how to run it without needing chokidar in package.json and the custom webpack config)
• @blitz/internal warning
• latest-version generates webpack warnings
• ...

[buremba]

How does the app decide which page to run? If it's the URL path concerning base, is it possible to abstract the URL from the app and modify the props as follows?

export interface ToolpadAppServerProps {
  dir: string;
  page: string;
}

It could help us dynamically render any page without worrying about the paths, giving user more control IMO. WDYT?

[Janpot]

Yes, that makes sense. This is somewhat on hold because it depends on a bunch of low-level work that needs to happen first. We'll also have to abstract Toolpad routing to be able to plug in the Next.js router.

Another option I'm thinking of is to expose another component that renders a single page instead of the whole app.

[buremba]

Another option I'm thinking of is to expose another component that renders a single page instead of the whole app.

Yes, that would be even more useful for my use case where I have a backend to pull the MDX file and I can transform it on the fly render the page without even shell. If we can pass components and resources as well, the applications can utilize Toolpad's application model to render the generated pages in our app.