Next.js入門|プロジェクトの新規作成からMUIの導入まで

Next.js React入門 IT

私は非フロントエンドエンジニアです。Next.js の学習を始めました。 学習したことをブログ記事にアウトプットして知識の定着を目指します。 そして、私と同じようにこれから Next.js を始める方の役に立てればと思います。

Next.js のバージョンは 15.1.3で、App Router を使用します。

CSS に関しても初心者です。今回は、Next.js の学習に集中するため、MUI を使っていきます。

MUI は CSS の深い知識がなくても、美しいデザインの Web ページを作ることができます。たとえば、ボタンやカードなどのコンポーネントをコードに追加するだけで、マテリアルデザインのUIを構築できます。

今回は第1回目として、プロジェクトの新規作成から MUI を導入して、簡単な UI を作成します。

開発環境の構築

PCに以下をインストールしてください。 (詳しいインストール手順は省略します)

  • Visual Studio Code
  • Node.js

なお、今回のチュートリアルは、以下の環境で行いました。

node -v
v20.15.0
npm -v
10.7.0
npx -v
10.7.0

もしnpxがインストールされていない場合は、以下のコマンドを実行してインストールします。

npm install -g npx

チュートリアル

Next.jsのプロジェクトを新規作成する

Next.jsのプロジェクトを新規作成しましょう。trial-next-jsというプロジェクトを作成します。

プロジェクト名に大文字は使えません。

以下のコマンドを実行します。

npx create-next-app@latest trial-next-js

以下のプロンプトが表示されるので、次のとおり選択してください。

Next.jpプロジェクト作成時のオプション選択

このように表示されれば成功です。

Next.jpプロジェクトの作成に成功

プロジェクト名のtrial-next-jsフォルダが作成され、必要な依存関係がインストールされます。

新規作成したNext.jsのプロジェクトを実行する

早速、新規作成したNext.jsのプロジェクトを実行してみましょう。まずは、プロンプトのカレントディレクトリをプロジェクトフォルダに移動します。

cd trial-next-js

次のコマンドを実行して、プロジェクトを開発サーバで実行します。

npm run dev

次のように表示されれば成功です。

npm run devを実行した結果

local:に表示されているURLhttp://localhost:3000をブラウザのアドレスバーに入力します。次のように表示されれば成功です。

Next.jsプロジェクトをブラウザで表示

上記ページは、src/app/page.tsxの内容が表示されています。

プロジェクトにMUIを導入する

グローバルCSSを削除する

まずは下準備です。グローバルCSSsrc/app/globals.cssの中身を削除します。

globals.cssの中身を削除

トップページの内容をシンプルにHello worldというテキストのみ表示するようにしましょう。src/app/page.tsxの内容を以下のように書き換えます。

export default function Home() {
return (
<div>Hello world</div>
);
}
page.tsxを編集

src/app/page.tsx は Next.js の App Router を利用したプロジェクトにおけるルートディレクトリのページコンポーネントです。このファイルの内容が、プロジェクトのルート URL(/)で表示されます。

ブラウザが以下のように変化します。

トップページがHello worldだけになった

プロジェクトにMUIパッケージをインストールする

プロンプトで control + c (Mac) / Ctrl + c (Windows) を入力し、開発サーバを停止します。

次に、プロジェクトにMUIパッケージを導入するために、以下のコマンドを実行します。

npm install @mui/material @emotion/react @emotion/styled @mui/material-nextjs @emotion/cache

@mui/material-nextjs@emotion/cacheは、App Router とMaterial UI を統合するために必要となります。

レイアウトにAppRouterCacheProviderを導入する

AppRouterCacheProvider は、MUI(Material-UI)を Next.js の App Router 環境で適切に動作させるための ユーティリティコンポーネント です。特に、MUI のサーバーサイドレンダリング(SSR)とクライアントサイドでの状態管理をスムーズに統合するために使われます。

src/app/layout.tsx{children}AppRouterCacheProviderタグで囲みます。

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={`${geistSans.variable} ${geistMono.variable}`}>
        <AppRouterCacheProvider>
          {children}
        </AppRouterCacheProvider>
      </body>
    </html>
  );
}
AppRouterCacheProviderコンポーネントの導入

src/app/layout.tsx は、Webページ全体で共通する部分を作るファイルです。たとえば、ヘッダーやフッターをここに書けば、どのページでも同じデザインを簡単に適用できます。

{children} は、そのレイアウトに属するページやコンポーネントがここに挿入されることを示すプレースホルダーです。

npm run devを実行して、ブラウザでhttp://localhost:3000を表示してみてください。前回と同様に「Hello world」が表示されます。

ページにMUIコンポーネントを配置してみる

MUIのドキュメントのボタンコンポーネントのページを参考にして、MUIのボタンコンポーネントを配置しましょう。

src/app/page.tsxHello worldの後ろに<Button variant="contained">ボタン</Button>を追加します。

export default function Home() {
  return (
    <div>
      Hello world
      <Button variant="contained">ボタン</Button>
    </div>
  );
}
page.tsxにMUIのボタンコンポーネントを配置

Buttonコンポーネントのインポートも忘れずに行います。

ブラウザで確認すると、マテリアルデザインのボタンが表示されることが確認できます。

MUIのボタンコンポーネント表示結果

MUIで手軽にマテリアルデザインを導入しよう

Next.js と MUI の組み合わせを使えば、CSS の細かい知識がなくても簡単にマテリアルデザインを取り入れた Web アプリケーションを構築できます。

今回は、プロジェクトの新規作成から MUI の導入までを紹介しました。MUI を使うことで、UI の品質を維持しながら効率的に開発を進められる点が魅力です。

今後は、より高度な MUI のコンポーネントや Next.js の機能を活用した実践的な開発についても取り上げていきます。

次回は、App Routerでページを追加して遷移させる方法を解説します。

タイトルとURLをコピーしました