株式会社BinaryTech | 日本品質 × ベトナム開発、最高のバランスを。

2025年人気No.1のNext.jsで、最新ツールとウェブを作る！ | エピソード3 スタイリングの基本

Posted at 2025-03-31

目標

Next.jsでのスタイリングの方法を理解する。
CSS Modules、Tailwind CSS、Styled-Componentsの特徴と使い方を学ぶ。
Tailwind CSSをプロジェクトに統合し、デザインを適用する。
共通レイアウトをlayout.tsxで作成する。

1. Next.jsでのスタイリングの選択肢

Next.jsでは、さまざまな方法でスタイリングが可能です。それぞれの特徴を見てみましょう：

CSS Modules: スコープ付きCSSで、クラス名の衝突を防ぐ。シンプルで軽量。
Tailwind CSS: ユーティリティファーストのCSSフレームワーク。迅速なデザインが可能。
Styled-Components: JavaScript内でCSSを記述。コンポーネント単位のスタイリングに最適。

このエピソードでは、特にTailwind CSSに焦点を当てます。2025年のトレンドとして、高速開発と直感的なデザインが求められており、Tailwindが最適です。

2. Tailwind CSSのインストールと設定

エピソード1でプロジェクト作成時にTailwind CSSを選択したので、既に使える状態です。確認と基本設定をしてみましょう。

手順：

設定ファイルの確認：
- tailwind.config.jsとpostcss.config.jsがプロジェクトルートにあることを確認。
グローバルCSSの設定：
- app/globals.cssを開き、以下が含まれているか確認：
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```

ヒント：もしTailwindが未設定の場合、npx tailwindcss init -pで設定ファイルを生成し、公式ドキュメントに従ってインストールしてください。

3. Tailwind CSSを使ったページデザイン

Tailwindを使って、既存のページにスタイルを追加します。

Homeページのスタイリング：

app/page.tsxを以下のように編集：

import Link from 'next/link';

export default function Home() {
  return (
    <div className="min-h-screen flex flex-col items-center justify-center bg-gray-100">
      <h1 className="text-4xl font-bold text-blue-600 mb-4">Next.jsからのHello World!</h1>
      <p className="text-lg text-gray-700 mb-6">2025年のNext.js学習シリーズへようこそ。</p>
      <nav className="space-x-4">
        <Link href="/about" className="text-blue-500 hover:underline">Aboutへ</Link>
        <Link href="/contact" className="text-blue-500 hover:underline">Contactへ</Link>
        <Link href="/post/1" className="text-blue-500 hover:underline">投稿 #1へ</Link>
      </nav>
    </div>
  );
}

Aboutページのスタイリング：

app/about/page.tsxを編集：

export default function About() {
  return (
    <div className="max-w-2xl mx-auto p-6">
      <h1 className="text-3xl font-semibold text-green-600 mb-4">Aboutページ</h1>
      <p className="text-gray-600">これはNext.jsで作ったAboutページです。Tailwindで簡単に美しく。</p>
    </div>
  );
}

確認：

npm run devでサーバーを起動し、ブラウザでデザインが適用されているか確認。

4. 共通レイアウトの作成

すべてのページに共通するレイアウト（ヘッダーやフッターなど）をapp/layout.tsxで定義します。

手順：

app/layout.tsxを以下のように編集：

import './globals.css';
import Link from 'next/link';

export const metadata = {
  title: 'Next.js 2025シリーズ',
  description: '2025年のウェブ開発を学ぶ',
};

export default function RootLayout({ children }) {
  return (
    <html lang="ja">
      <body className="font-sans antialiased">
        <header className="bg-blue-800 text-white p-4">
          <nav className="max-w-4xl mx-auto flex justify-between">
            <Link href="/" className="text-xl font-bold">ホーム</Link>
            <div className="space-x-4">
              <Link href="/about" className="hover:underline">About</Link>
              <Link href="/contact" className="hover:underline">Contact</Link>
            </div>
          </nav>
        </header>
        <main>{children}</main>
        <footer className="bg-gray-200 p-4 text-center text-gray-600">
          © 2025 Next.js学習シリーズ
        </footer>
      </body>
    </html>
  );
}

確認：

すべてのページにヘッダーとフッターが表示され、デザインが統一されていることを確認。

実践：Tailwindでデザインされたウェブサイト

Home: 中央揃えのモダンなデザイン。
About: シンプルで読みやすいレイアウト。
共通レイアウト: ヘッダーとフッターで一貫性を持たせる。

Tailwindのクラスを自由に試して、好みのデザインに調整してみてください。

エピソード3の終了

Next.jsでのスタイリングの選択肢とTailwind CSSの使い方を学びました。
ページに美しいデザインを追加し、共通レイアウトを作成しました。

次回のエピソード：データ取得とAPIルートの作成を学び、動的なコンテンツを扱います。

この記事が役に立ったと思ったら、ぜひ「いいね」を押して、ストックしていただければ嬉しいです！次回のエピソードもお楽しみに！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up