chore: test next on vite

examples/material-ui-nextjs-ts/.gitignore

@@ -14,6 +14,7 @@
 
 # production
 /build
+/dist
 
 # misc
 .DS_Store

examples/material-ui-nextjs-ts/README.md

@@ -1,3 +1,10 @@
+```sh
+vercel projects add material-ui-next-vite
+vercel link -p material-ui-next-vite
+VERCEL=1 pnpm build
+vercel deploy --prebuilt --prod
+```
+
 # Material UI - Next.js App Router example in TypeScript
 
 This is a [Next.js](https://nextjs.org/) project bootstrapped using [`create-next-app`](https://github.com/vercel/next.js/tree/HEAD/packages/create-next-app) with Material UI installed.

examples/material-ui-nextjs-ts/package.json

@@ -10,15 +10,18 @@
     "post-update": "echo \"codesandbox preview only, need an update\" && pnpm update --latest"
   },
   "dependencies": {
+    "@hiogawa/react-server": "https://pkg.pr.new/hi-ogawa/vite-plugins/@hiogawa/react-server@6ef3cdb",
+    "next": "https://pkg.pr.new/hi-ogawa/vite-plugins/@hiogawa/react-server-next@6ef3cdb",
+    "react": "rc",
+    "react-dom": "rc",
+    "react-server-dom-webpack": "rc",
+    "vite": "latest",
     "@emotion/cache": "latest",
     "@emotion/react": "latest",
     "@emotion/styled": "latest",
     "@mui/icons-material": "next",
     "@mui/material": "next",
-    "@mui/material-nextjs": "next",
-    "next": "latest",
-    "react": "latest",
-    "react-dom": "latest"
+    "@mui/material-nextjs": "next"
   },
   "devDependencies": {
     "@types/node": "latest",

examples/material-ui-nextjs-ts/src/app/layout.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';
+import AppRouterCacheProvider from '@mui/material-nextjs/v13-appRouter/appRouterV13';
 import { ThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import theme from '@/theme';

examples/material-ui-nextjs-ts/src/theme.ts

@@ -1,20 +1,20 @@
 'use client';
-import { Roboto } from 'next/font/google';
+// import { Roboto } from 'next/font/google';
 import { createTheme } from '@mui/material/styles';
 
-const roboto = Roboto({
-  weight: ['300', '400', '500', '700'],
-  subsets: ['latin'],
-  display: 'swap',
-});
+// const roboto = Roboto({
+//   weight: ['300', '400', '500', '700'],
+//   subsets: ['latin'],
+//   display: 'swap',
+// });
 
 const theme = createTheme({
   palette: {
     mode: 'light',
   },
-  typography: {
-    fontFamily: roboto.style.fontFamily,
-  },
+  // typography: {
+  //   fontFamily: roboto.style.fontFamily,
+  // },
   components: {
     MuiAlert: {
       styleOverrides: {

examples/material-ui-nextjs-ts/tsconfig.json

@@ -9,7 +9,7 @@
     "noEmit": true,
     "esModuleInterop": true,
     "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "Bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",

examples/material-ui-nextjs-ts/vite.config.mts

@@ -0,0 +1,11 @@
+import next from "next/vite";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [
+    next({ routeDir: "src/app" })
+  ],
+  ssr: {
+    noExternal: ["@mui/**"],
+  }
+});