Upgrade to next 13

package.json

@@ -41,7 +41,7 @@
   },
   "devDependencies": {
     "@mui/monorepo": "https://github.com/mui/material-ui.git",
-    "@next/eslint-plugin-next": "12.3.1",
+    "@next/eslint-plugin-next": "13.0.3",
     "@playwright/test": "^1.27.1",
     "@swc/helpers": "^0.4.12",
     "@testing-library/jest-dom": "^5.16.5",

packages/toolpad-app/middleware.ts

@@ -1,16 +1,6 @@
-import {
-  NextRequest,
-  NextResponse,
-  // @ts-expect-error
-  // TODO: As soon as next/server exports this member:
-  //   - remove ` as NextURLPattern` from this line
-  //   - remove the line below with `const URLPattern = ...`
-  URLPattern as NextURLPattern,
-} from 'next/server';
+import { NextRequest, NextResponse, URLPattern } from 'next/server';
 import { checkBasicAuthHeader } from './src/server/basicAuth';
 
-const URLPattern = NextURLPattern || (global as any).URLPattern;
-
 const BASIC_AUTH_WHITELIST = [
   // Healthcheck must always be public
   new URLPattern({ pathname: '/health-check' }),

packages/toolpad-app/next.config.mjs

@@ -132,8 +132,10 @@ export default withBundleAnalyzer(
         {
           // Support global CSS in monaco-editor
           // Adapted from next-transpile-modules.
-          const extraCssIssuer = /(\/|\\)node_modules(\/|\\)monaco-editor(\/|\\)/;
-          const modulesPaths = [path.dirname(require.resolve('monaco-editor/package.json'))];
+          const extraCssIssuer = /(\/|\\)node_modules(\/|\\)monaco-editor(\/|\\).*\.js$/;
+          const modulesPaths = [
+            path.resolve(path.dirname(require.resolve('monaco-editor/package.json')), './esm'),
+          ];
 
           config.module = config.module ?? {};
           config.module.rules = config.module.rules ?? [];

packages/toolpad-app/package.json

@@ -9,7 +9,7 @@
     "lint": "next lint && prettier --check .",
     "fix": "next lint --fix && prettier --write .",
     "prisma": "prisma",
-    "build:next": "next build",
+    "build:next": "NODE_OPTIONS=--max-old-space-size=8192 next build",
     "build:react-devtools": "rimraf ./public/reactDevtools && esbuild ./reactDevtools/bootstrap.ts --target=es6 --bundle --outdir=./public/reactDevtools",
     "build:typings": "ts-node ./scripts/typings.ts",
     "build:function-runtime": "rimraf ./src/toolpadDataSources/function/dist && esbuild ./src/toolpadDataSources/function/runtime/index.ts --target=es2020 --bundle --outdir=./src/toolpadDataSources/function/dist",
@@ -81,7 +81,7 @@
     "lodash-es": "^4.17.21",
     "mitt": "^3.0.0",
     "monaco-editor": "0.34.1",
-    "next": "12.2.2",
+    "next": "^13.0.3",
     "node-fetch": "^2.6.7",
     "node-fetch-har": "^1.0.1",
     "path-to-regexp": "^6.2.1",
@@ -130,7 +130,7 @@
     "@types/whatwg-url": "^11.0.0",
     "ajv": "^8.11.0",
     "eslint": "8.27.0",
-    "eslint-config-next": "^12.3.1",
+    "eslint-config-next": "^13.0.3",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.26.0",
     "formidable": "^2.0.1",

packages/toolpad-app/src/components/Link.tsx

@@ -10,15 +10,24 @@ const Anchor = styled('a')({});
 
 interface NextLinkComposedProps
   extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>,
-    Omit<NextLinkProps, 'href' | 'as' | 'onClick' | 'onMouseEnter' | 'onTouchStart'> {
+    Omit<NextLinkProps, 'href' | 'as' | 'passHref' | 'onMouseEnter' | 'onClick' | 'onTouchStart'> {
   to: NextLinkProps['href'];
   linkAs?: NextLinkProps['as'];
-  href?: NextLinkProps['href'];
 }
 
 export const NextLinkComposed = React.forwardRef<HTMLAnchorElement, NextLinkComposedProps>(
   function NextLinkComposed(props, ref) {
-    const { to, linkAs, href, replace, scroll, shallow, prefetch, locale, ...other } = props;
+    const {
+      to,
+      linkAs,
+      replace,
+      scroll,
+      shallow,
+      prefetch,
+      legacyBehavior = true,
+      locale,
+      ...other
+    } = props;
 
     return (
       <NextLink
@@ -30,6 +39,7 @@ export const NextLinkComposed = React.forwardRef<HTMLAnchorElement, NextLinkComp
         shallow={shallow}
         passHref
         locale={locale}
+        legacyBehavior={legacyBehavior}
       >
         <Anchor ref={ref} {...other} />
       </NextLink>

packages/toolpad-app/src/server/getLatestRelease.ts

@@ -5,23 +5,11 @@ interface GithubRelease {
   url: string;
 }
 
-function abortSignalTimeout(ms: number): AbortSignal {
-  // @ts-expect-error See https://github.com/microsoft/TypeScript/issues/48003
-  if (AbortSignal.timeout) {
-    console.warn('Next.js support AbortSignal.timeout, remove this polyfill');
-    // @ts-expect-error See https://github.com/microsoft/TypeScript/issues/48003
-    return AbortSignal.timeout(ms);
-  }
-
-  const controller = new AbortController();
-  setTimeout(() => controller.abort(), ms);
-  return controller.signal;
-}
-
 async function fetchRelease(): Promise<GithubRelease> {
   const response = await fetch(LATEST_RELEASE_API_URL, {
     // Abort the request after 30 seconds
-    signal: abortSignalTimeout(30_000),
+    // @ts-expect-error See https://github.com/microsoft/TypeScript/issues/48003
+    signal: AbortSignal.timeout(30_000),
   });
 
   if (response.ok) {

renovate.json

@@ -69,11 +69,6 @@
       "matchPackageNames": ["core-js"],
       "allowedVersions": "< 2.0.0"
     },
-    {
-      "groupName": "next",
-      "matchPackageNames": ["next", "@next/eslint-plugin-next", "eslint-config-next"],
-      "allowedVersions": "1.2.2"
-    },
     {
       "matchDepTypes": ["action"],
       "pinDigests": true

test/models/ToolpadHome.ts

@@ -78,9 +78,10 @@ export class ToolpadHome {
       await this.newAppDomInput.fill(JSON.stringify(dom));
     }
 
-    await this.newAppDomCreateBtn.click();
-
-    await this.page.waitForNavigation({ url: /\/_toolpad\/app\/[^/]+\/pages\/[^/]+/ });
+    await Promise.all([
+      this.newAppDomCreateBtn.click(),
+      this.page.waitForNavigation({ url: /\/_toolpad\/app\/[^/]+\/pages\/[^/]+/ }),
+    ]);
 
     const { pathname } = new URL(this.page.url());
     const idMatch = /^\/_toolpad\/app\/([^/]+)\//.exec(pathname);