Next.js 16 Support

[SamuelTrew]

Summary

With the release of Next.js 16, the AppRouterCacheProvider does not have a compatible version.

Looking at the source code for the v15, I think a new implementation would be needed due to client/server errors.

I would get the follow error:
Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".

The part it complained about was ... component={function LinkComponent} ...

Examples

Current latest version https://github.com/mui/material-ui/tree/master/packages%2Fmui-material-nextjs%2Fsrc%2Fv15-appRouter which links to a v13 version.

Motivation

Upgrading to Next.js 16 doesn't appear to be possible without a change

Search keywords: Next.js, material-nextjs, 16

[jy95]

In my case, I got this kind of errors when turning a Next 15 project into 16 :

 ✓ Ready in 2.3s
 ○ Compiling /[locale]/games ...
 ⨯ Error: Attempted to call the default export of [project]/node_modules/@mui/material/esm/styles/styled.js from the server, but it's on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component.
    at ignore-listed frames {
  type: 'Error',
  page: '/fr/games'
}
 GET /games 500 in 12.0s (compile: 11.6s, proxy.ts: 234ms, render: 175ms)

[hongz1]

Please update it so it can support NextJS v16. I cannot update mui packages.

Package              Current  Wanted  Latest  Location                          Depended by
@mui/x-data-grid      8.14.1  8.15.0  8.15.0  node_modules/@mui/x-data-grid     app_v01
@mui/x-date-pickers   8.14.1  8.15.0  8.15.0  node_modules/@mui/x-date-pickers  app_v01
@mui/x-tree-view      8.14.1  8.15.0  8.15.0  node_modules/@mui/x-tree-view     app_v01

npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: app-v01@1.0.0
npm error Found: next@16.0.0
npm error node_modules/next
npm error   next@"^16.0.0" from the root project
npm error
npm error Could not resolve dependency:
npm error peer next@"^13.0.0 || ^14.0.0 || ^15.0.0" from @mui/material-nextjs@7.3.3
npm error node_modules/@mui/material-nextjs
npm error   @mui/material-nextjs@"^7.3.3" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.

[johnsonav1992]

My app was simple enough (at the moment) to just use --legacy-peer-deps with no errors for now...but I know that will change. So hopefully this is resolved soon!

[In-line]

As a workaround NextJS 15.5.1-canary.39 works, canaries after it seem to have compatibility issues with Material UI.

[In-line]

I tested various canaries it got broken in canary 54 vercel/next.js@v15.6.0-canary.53...v15.6.0-canary.54

[siriwatknp]

@SamuelTrew a workaround is to create a new file and reexport the component as client component.

In my case, I got this error when I pass Link from next/link as a component to the Button of Material UI:

// app/page.tsx
import Link from "next/link";
import Button from "@mui/material/Button";

<Button component={Link}> 
❌ Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". Or maybe you meant to call this function rather than return it.
  <... component={function LinkComponent} href=... variant=... size=... sx=... children=...>
                 ^^^^^^^^^^^^^^^^^^^^^^^^ 

The error is gone when I create a new file components/next-link.tsx and then reexport the Next link:

"use client";
import Link from "next/link";

export default Link;

- import Link from "next/link";
+ import Link from "@/components/next-link"; ✅

[hongz1]

@siriwatknp It is not a matter of specific direct or indirect component import issue. My project already have that indirect link and use and there is no errors for that. Problem is "Could not resolve dependency" error and it keeps suggesting to update with "--lagacy-peer-deps". As @johnsonav1992 mentioned, yes updating with "--lagacy-peer-deps" solves incorrect dependency for now, but please update for NextJS version 16.

update dependencies error log

123 verbose stack Error: unable to resolve dependency tree
123 verbose stack     at #failPeerConflict (/usr/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:1420:25)
123 verbose stack     at #loadPeerSet (/usr/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:1386:33)
123 verbose stack     at async #buildDepStep (/usr/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:929:11)
123 verbose stack     at async Arborist.buildIdealTree (/usr/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:182:7)
123 verbose stack     at async Promise.all (index 1)
123 verbose stack     at async Arborist.reify (/usr/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/reify.js:114:5)
123 verbose stack     at async Update.exec (/usr/lib/node_modules/npm/lib/commands/update.js:64:5)
123 verbose stack     at async Npm.exec (/usr/lib/node_modules/npm/lib/npm.js:208:9)
123 verbose stack     at async module.exports (/usr/lib/node_modules/npm/lib/cli/entry.js:67:5)
124 error code ERESOLVE
125 error ERESOLVE unable to resolve dependency tree

Thanks.

[PaddyShiel89]

I've run into this error while creating a new project. I added the below to my package.json before trying to install it again and it's working so far without issue, but a fix would be ideal.

  "overrides": {
    "@mui/material-nextjs": {
      "next": "16.0.0"
    }
  }