mui · Janpot · Jan 24, 2024 · Jan 25, 2024 · Jan 25, 2024 · Jan 25, 2024
diff --git a/examples/custom-server-nextjs/app/layout.tsx b/examples/custom-server-nextjs/app/layout.tsx
@@ -0,0 +1,16 @@
+export const metadata = {
+  title: 'Next.js',
+  description: 'Generated by Next.js',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/examples/custom-server-nextjs/app/my-toolpad/[[...path]]/page.tsx b/examples/custom-server-nextjs/app/my-toolpad/[[...path]]/page.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { ToolpadApp } from '@mui/toolpad/next';
+
+export default function ToolpadPage() {
+  return <ToolpadApp base="/my-next-app/my-toolpad" dir="./toolpad" />;
+}
diff --git a/examples/custom-server-nextjs/next-env.d.ts b/examples/custom-server-nextjs/next-env.d.ts
@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/examples/custom-server-nextjs/next.config.mjs b/examples/custom-server-nextjs/next.config.mjs
@@ -1,4 +1,12 @@
 /** @type {import('next').NextConfig} */
 export default {
+  webpack: (config) => {
+    config.externals.push({
+      fsevents: 'commonjs fsevents',
+      chokidar: 'commonjs chokidar',
+    });
+    config.resolve.alias['@mui/icons-material'] = ['@mui/icons-material/esm'];
+    return config;
+  },
   basePath: '/my-next-app',
 };
diff --git a/examples/custom-server-nextjs/package.json b/examples/custom-server-nextjs/package.json
@@ -10,8 +10,9 @@
   },
   "dependencies": {
     "@mui/toolpad": "0.1.46",
+    "chokidar": "3.5.3",
     "express": "4.18.2",
-    "next": "14.0.2",
+    "next": "14.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },

diff --git a/examples/custom-server-nextjs/toolpad/application.yml b/examples/custom-server-nextjs/toolpad/application.yml
@@ -0,0 +1,3 @@
+apiVersion: v1
+kind: application
+spec: {}
diff --git a/examples/custom-server-nextjs/toolpad/pages/page/page.yml b/examples/custom-server-nextjs/toolpad/pages/page/page.yml
@@ -1,4 +1,4 @@
-# yaml-language-server: $schema=https://raw.githubusercontent.com/mui/mui-toolpad/v0.1.40/docs/schemas/v1/definitions.json#properties/Page
+# yaml-language-server: $schema=https://raw.githubusercontent.com/mui/mui-toolpad/v0.1.46/docs/schemas/v1/definitions.json#properties/Page
 
 apiVersion: v1
 kind: page
@@ -16,3 +16,15 @@ spec:
         mode: link
         value: To the Next.js app
         href: /my-next-app
+    - component: Text
+      name: text1
+      props:
+        mode: null
+        value:
+          $$jsExpression: query.data
+  queries:
+    - name: query
+      mode: query
+      query:
+        function: functions2.ts#default
+        kind: local
diff --git a/examples/custom-server-nextjs/toolpad/resources/functions2.ts b/examples/custom-server-nextjs/toolpad/resources/functions2.ts
@@ -0,0 +1,7 @@
+/**
+ * Toolpad handlers file.
+ */
+
+export default async function handler(message: string) {
+  return `Hello ${message}`;
+}
diff --git a/examples/custom-server-nextjs/tsconfig.json b/examples/custom-server-nextjs/tsconfig.json
@@ -11,8 +11,14 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "strictNullChecks": true
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]
 }
diff --git a/packages/toolpad-app/src/exports/next-client.tsx b/packages/toolpad-app/src/exports/next-client.tsx
@@ -0,0 +1,18 @@
+'use client';
+
+import * as React from 'react';
+import ToolpadApp, { ToolpadAppProps } from '../runtime/ToolpadApp';
+import { AppHostContext, AppHost } from '../runtime/AppHostContext';
+
+const appContext: AppHost = {
+  isPreview: false,
+  isCustomServer: true,
+};
+
+export default function ToolpadAppClient(props: ToolpadAppProps) {
+  return (
+    <AppHostContext.Provider value={appContext}>
+      <ToolpadApp {...props} />
+    </AppHostContext.Provider>
+  );
+}
diff --git a/packages/toolpad-app/src/exports/next.tsx b/packages/toolpad-app/src/exports/next.tsx
@@ -0,0 +1,18 @@
+'use server';
+
+import * as React from 'react';
+import ToolpadAppClient from './next-client';
+import { loadDom } from '../server/localMode';
+import createRuntimeState from '../runtime/createRuntimeState';
+
+export interface ToolpadAppServerProps {
+  base: string;
+  dir: string;
+}
+
+export async function ToolpadApp({ base, dir = './toolpad' }: ToolpadAppServerProps) {
+  const dom = await loadDom(dir);
+  const initialState = createRuntimeState({ dom });
+
+  return <ToolpadAppClient basename={base} state={initialState} />;
+}
diff --git a/packages/toolpad-app/src/runtime/ToolpadApp.tsx b/packages/toolpad-app/src/runtime/ToolpadApp.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import {
   Stack,

diff --git a/packages/toolpad-app/tsup.config.ts b/packages/toolpad-app/tsup.config.ts
@@ -54,7 +54,7 @@ export default defineConfig((options) => [
     tsconfig: './tsconfig.runtime.json',
     sourcemap: true,
     esbuildPlugins: [cleanFolderOnFailure(path.resolve(__dirname, 'dist/runtime'))],
-    external: [/.*\.(svg|png|jpe?g|gif|ico|webp)$/],
+    external: [/.*\.(svg|png|jpe?g|gif|ico|webp)$/, './next-client'],
     async onSuccess() {
       // eslint-disable-next-line no-console
       console.log('runtime: build successful');