Next.jsとTailwind CSSで作るモダンなウェブサイト

Next.js 14の新機能とTailwind CSSを組み合わせて、パフォーマンスに優れたウェブサイトを構築する方法を解説します。

はじめに

モダンなウェブ開発において、Next.jsとTailwind CSSの組み合わせは非常に強力です。Next.js 14では、App Routerの安定化やServer Componentsの改善など、多くの新機能が追加されました。本記事では、これらの機能を活用して、パフォーマンスと開発体験の両方を向上させる方法を解説します。

Next.js 14の主要な新機能

App Routerの安定化

Next.js 14では、App Routerが安定版となり、本番環境での使用が推奨されるようになりました。App Routerを使用することで、以下のようなメリットが得られます：

Server Components: サーバーサイドでレンダリングされるコンポーネントにより、初期ロード時間を短縮
Streaming: ページの一部を段階的にストリーミングすることで、ユーザー体験を向上
Layouts: 共通のレイアウトを簡単に共有

Server Actions

Server Actionsを使用することで、フォームの送信やデータの更新を、APIルートを作成せずに直接サーバーサイドで処理できます。

// app/actions.ts
'use server'

export async function createPost(formData: FormData) {
  const title = formData.get('title')
  // データベースに保存
  // ...
}

Tailwind CSSとの統合

セットアップ

Next.jsプロジェクトにTailwind CSSを追加するには、以下のコマンドを実行します：

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

設定ファイルの最適化

tailwind.config.jsを設定して、不要なスタイルを削除し、パフォーマンスを最適化します：

module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

パフォーマンス最適化のベストプラクティス

画像の最適化

Next.jsのImageコンポーネントとTailwind CSSを組み合わせることで、レスポンシブで最適化された画像を簡単に実装できます：

import Image from 'next/image'

export default function Hero() {
  return (
    <div className="relative w-full h-96">
      <Image
        src="/hero.jpg"
        alt="Hero image"
        fill
        className="object-cover"
        priority
      />
    </div>
  )
}

フォントの最適化

Next.js 14では、next/fontを使用してフォントを最適化できます：

import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export default function Layout({ children }) {
  return (
    <html lang="ja" className={inter.className}>
      <body>{children}</body>
    </html>
  )
}

実践的な例

レスポンシブなカードコンポーネント

Tailwind CSSのユーティリティクラスを使用して、レスポンシブなカードコンポーネントを作成します：

export default function Card({ title, description }) {
  return (
    <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
      <h3 className="text-xl font-bold mb-2 text-gray-900 dark:text-gray-100">
        {title}
      </h3>
      <p className="text-gray-600 dark:text-gray-400">
        {description}
      </p>
    </div>
  )
}

Next.js×Tailwind CSSでモダンサイトを構築する要点

Next.js 14とTailwind CSSを組み合わせることで、パフォーマンスに優れたモダンなウェブサイトを効率的に構築できます。Server ComponentsやApp Routerなどの新機能を活用し、Tailwind CSSのユーティリティクラスでスタイリングすることで、開発速度とパフォーマンスの両方を向上させることができます。

ご相談・お問い合わせはこちら

Next.jsとTailwind CSSで作るモダンなウェブサイト