ロゴWeb開発ブログ

Next.jsのApp RouterでMaterial UIを使うとき、"use client"はもう必要ない

更新
作成
  • 使用したバージョン
  • @mui/material 5.14.2

Material UIのバージョン5.14.0からNext.jsのApp Routerがサポートされた。

これによりMaterial UIを使用するために"use client"を書く必要はない。

MUI Core libraries support the Next.js App Router

これまでMaterial UIコンポーネントを使用するときはクライアントコンポーネント化するためひと噛みさせていた。


'use client';
export { default as Paper } from "@mui/material/Paper";

これからは普通通り直接インポートして使用できる。

Chakra UIでは

同じくChakra UIコンポーネントを使用するときも"use client"を書く必要がある。

サポートするために大幅な修正を行ってる様子。

Support for NextJS 13 App Router

いまのところはApp Routerに移行せずPages Routerのままにしとくのが良さそう。

【2023/10/11追記】

Chakra UIコンポーネントを使用するときも"use client"が不要になっていたのでPages RouterからApp Routerに移行した。

だがchakra-ui/iconsを使用するときはまだ"use client"が必要みたい。