Next.jsをモバイルファーストデザインに最適化してみよう

## 目標
- モバイルファーストデザインの基本を理解する。
- Tailwind CSSを使ってレスポンシブデザインを実装する。
- ブログをモバイルデバイスに最適化する。

---

## 1. モバイルファーストデザインとは？
モバイルファーストは、最初にモバイル向けのデザインを考え、その後デスクトップに拡張するアプローチです。現代のウェブではモバイルユーザーが多いため重要です。Next.jsとTailwind CSSを使えば、簡単に実装できます。この記事では、ブログをモバイル向けに最適化します。

---

## 2. Tailwind CSSの確認
既にTailwind CSSがインストールされていることを前提に進めます。

### 手順：
未インストールの場合は以下を実行：
```
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

### `tailwind.config.js`の確認：
```js
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './pages/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};
```

---

## 3. モバイルファーストデザインの実装
ブログのレイアウトをモバイル優先で調整します。

### `app/layout.tsx`の編集：
```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 flex-col sm:flex-row justify-between items-center space-y-4 sm:space-y-0">
            <Link href="/" className="text-xl font-bold">ホーム</Link>
            <div className="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
              <Link href="/about" className="hover:underline">About</Link>
              <Link href="/add-post" className="hover:underline">投稿追加</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>
  );
}
```

### `app/page.tsx`の編集：
```tsx
import { supabase } from '../lib/supabase';

export default async function Home() {
  const { data: posts } = await supabase
    .from('posts')
    .select('*')
    .order('created_at', { ascending: false });

  return (
    <div className="min-h-screen bg-gray-100 py-6 px-4 sm:px-6">
      <h1 className="text-2xl sm:text-4xl font-bold text-blue-600 mb-6 text-center">データベースからの投稿</h1>
      <ul className="space-y-4 max-w-2xl mx-auto">
        {posts?.map((post) => (
          <li key={post.id} className="bg-white p-4 rounded shadow">
            <a href={`/posts/${post.id}`} className="text-lg sm:text-xl font-semibold text-blue-500 hover:underline">
              {post.title}
            </a>
            <p className="text-gray-600 text-sm sm:text-base mt-2">{post.content}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}
```

### `app/posts/[id]/page.tsx`の編集：
```tsx
import { supabase } from '../../../lib/supabase';

export default async function Post({ params }: { params: { id: string } }) {
  const { data: post } = await supabase
    .from('posts')
    .select('*')
    .eq('id', params.id)
    .single();

  if (!post) return <div className="text-center p-6">投稿が見つかりません</div>;

  return (
    <div className="max-w-2xl mx-auto p-4 sm:p-6">
      <h1 className="text-xl sm:text-3xl font-bold text-blue-600 mb-4">{post.title}</h1>
      <p className="text-gray-600 text-sm sm:text-base">{post.content}</p>
    </div>
  );
}
```

---

## 4. モバイルでの確認
デザインがモバイルで自然に動作するかテストします。

### 手順：
1. `npm run dev`で起動。
2. ブラウザのDevToolsでモバイルビュー（例：iPhoneサイズ）を確認。
3. 以下をチェック：
   - ナビゲーションが縦に並ぶ（モバイル）→横に並ぶ（デスクトップ）。
   - テキストサイズが小さすぎず、読みやすい。
   - 余白（padding/margin）が適切。

---

## 実践：モバイル最適化ブログ
- **レイアウト**：モバイルでナビゲーションが折り畳まれ、コンテンツが読みやすい。
- **レスポンシブ**：画面サイズに応じて自然に調整。

**確認**：
- `http://localhost:3000`をスマホで開き、操作性を確認。
- Lighthouseの「Mobile」スコアで80以上を目指す。

---

## まとめ
- Tailwind CSSでモバイルファーストデザインを簡単に実装しました。
- ブログがあらゆるデバイスで快適に使えるようになりました。

この記事が役に立ったと思ったら、ぜひ「いいね」を押して、ストックしていただければ嬉しいです！あなたのNext.jsプロジェクトでもモバイルファーストを試してみてください！