Next.jsでMUIのテーマAPIを使おうとした際のエラー
環境
- MUI 6.1.9
- Next.js 15.0.3
- React 18.2.0
- Vercelへのデプロイ
コード
layout.tsx
// 省略
import { createTheme } from '@mui/material/styles';
const theme = createTheme({
colorSchemes: {
light: {},
dark: {},
},
});
// 以下略
エラー
.stdout
Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
Error: 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.
{keys: ..., values: ..., up: function s, down: ..., between: ..., only: ..., not: ..., unit: ...}
^^^^^^^^^^
at eO (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:84:23766)
at Object.toJSON (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:84:14915)
at stringify (<anonymous>)
at eU (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:84:26272)
at eB (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:84:26502)
at eq (/vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:84:27056)
at AsyncLocalStorage.run (node:internal/async_local_storage/async_hooks:91:14)
at /vercel/path0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:84:39749
at node:internal/process/task_queues:151:7
at AsyncResource.runInAsyncScope (node:async_hooks:211:14)
Export encountered an error on /page: /, exiting the build.
⨯ Static worker exited with code: 1 and signal: null
Error: Command "npm run build" exited with 1
原因
MUIのcreateTheme
の部分が関数を返すことが原因。
createTheme()
の定義で、cssContainerQueries()
の結果が返されるようになっている。
cssContainerQueries()
の定義ではcontainerQueries
のup
, down
, between
, only
, not
プロパティに対して関数が割り当てられている。
おそらく、トレースバックの{keys: ..., values: ..., up: function s, down: ..., between: ..., only: ..., not: ..., unit: ...}
の部分はこれ。
Next.jsは関数を含むコンポーネントをSSRできないため、エラーが出る。
今回の場合、
Layouts are Server Components by default but can be set to a Client Component.
とあるように、layout.tsx
は強制的にサーバーコンポーネントになるので、createTheme
もSSRすることになりエラーになる。
解決策
createTheme
を別ファイルに移す。