TODOアプリ制作 app.tsxの設定

_app.tsxの設定: Next.js と Material-UI の連携

_app.tsx とは

Next.js アプリケーションの_app.tsxファイルは全ページ共通の設定をする場所です。デフォルトの_app.tsxファイルは以下のようになっています。

import "@/styles/globals.css";
import type { AppProps } from "next/app";

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

• import '@/styles/globals.css'
  これはグローバル CSS ファイルをインポートしています。この CSS は全ページに適用されます。ただし、Material-UI を使用する場合は、Material-UI が持つ CSS-in-JS の解決策を使用しますので、この行は削除します。

• import type { AppProps } from 'next/app'
  これは Next.js のAppPropsという型をインポートしています。この型はAppコンポーネントの引数の型として使用されます。AppPropsにはComponentとpagePropsの二つのプロパティが含まれており、それぞれ現在のページの実際のコンポーネントとそのプロパティを表しています。

• export default function App({ Component, pageProps }: AppProps) { ... }
  これがメインのAppコンポーネントです。全てのページはこのAppコンポーネントを通じてレンダリングされます。ComponentとpagePropsを引数として受け取り、Componentをレンダリングします。pagePropsはComponentに渡されます。

それでは、上記のデフォルト設定を Material-UI と一緒に使えるように変更しましょう。以下のコードが変更後の_app.tsxです。

import { AppProps } from "next/app";
import { CssBaseline } from "@mui/material";
import { ThemeProvider, createTheme } from "@mui/material/styles";

const theme = createTheme();

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

export default MyApp;

• import type { AppProps } from 'next/app'
  Next.js からAppProps型をインポートします。import typeを使用することで、AppPropsが型情報であることを明示的に示します。この型はMyAppコンポーネントの引数の型として使用されます。

• import { CssBaseline } from '@mui/material'
  Material-UI のCssBaselineをインポートします。これはブラウザ間で一貫した見え方を提供するために、HTML の要素に対するデフォルトスタイルをリセットします。

• import { ThemeProvider, createTheme } from '@mui/material/styles'
  Material-UI のThemeProviderとcreateThemeをインポートします。ThemeProviderは Material-UI のテーマをコンポーネントのツリーに提供します。createThemeはデフォルトのテーマを作成する関数です。

• const theme = createTheme()
createTheme関数を呼び出してデフォルトのテーマを作成し、theme変数に保存します。

• function MyApp({ Component, pageProps }: AppProps) { ... }
  メインのMyAppコンポーネントです。全てのページはこのMyAppコンポーネントを通じてレンダリングされます。

• return ( ... )
MyAppコンポーネントのレンダリング部分です。ThemeProviderを最外層として、CssBaselineとComponentを子要素として持ちます。

これで、全てのページに Material-UI のテーマとスタイルリセット（CssBaseline）が適用されます。

感想

今日は_app.tsxファイルの設定を行いました
JAVAScriptやReactの知識がなく今何をしているかが全く分からない状態からのスタートだったのでchatGPTにひとつひとつ質問しながら進めていきました。
このファイルで何を設定しているか分かってよかったです。