Next.jsのapp routerでMUIを使うとエラーが出る件について

はじめに

Next.jsのapp routerでMUIを使おうとすると「Server Error
TypeError: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. 」というエラーに直面した場合の対処法を説明します。
以下はTypeScriptを使用する前提で記載します。

結論

• ｢styles.tsx｣というような任意の名前のファイルを作成し、当該ファイルにおいてMUIのimportしてexportし、MUI
  しようしたいファイルにおいて、styles.tsxをimportする

または

• 素直に"use client"をファイルの先頭に付ける

フォルダ構成

フォルダ構成は以下のとおりです。
project
├app
│ └page.tsx
│ │
│ └styles.tsx

解決法１

まず、「styles.tsx」で以下のとおり記載します。

"use client";
import Box from '@mui/material/Box';
export { Box }

次に、「page.tsx」で以下のとおり記載します。

import { Box } from "./styles";
export default function Example() {
  return (
    <>
      <Box>exapmple</Box>
    </>
  );
}

以上のようにすることで「page.tsx」では"use client"とせずにMUIを使用することが可能となります。

解決法２

「page.tsx」の先頭に「"use client";」を付けることでもエラーを回避できます。しかし、この方法だとserver componentsをあまり活用できなくなるような気もします。。

"use client";

import Box from '@mui/material/Box';
export default function Example() {
  return (
    <>
      <Box>exapmple</Box>
    </>
  );
}

参考サイト

TypeError: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it