Next.js 15 入門ガイド

Next.js 15 はエキサイティングな新機能と改善をもたらします。この強力なフレームワークでモダンな Web アプリケーションを構築する方法を探りましょう。

なぜ Next.js なのか？

Next.js は以下を提供する React フレームワークです：

プロジェクトのセットアップ

新しい Next.js プロジェクトを作成：

npx create-next-app@latest my-app
cd my-app
npm run dev

App Router の構造

App Router はファイルシステムベースのルーターを使用します：

app/
├── layout.tsx      # ルートレイアウト
├── page.tsx        # ホームページ
├── about/
│   └── page.tsx    # アバウトページ
└── blog/
    ├── page.tsx    # ブログ一覧
    └── [slug]/
        └── page.tsx # ブログ記事

サーバーコンポーネント

デフォルトでは、App Router のすべてのコンポーネントはサーバーコンポーネントです：

// これはサーバーで実行されます
async function BlogPosts() {
  const posts = await fetch('https://api.example.com/posts')
  const data = await posts.json()
  
  return (
    <ul>
      {data.map((post: { id: string; title: string }) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

クライアントコンポーネント

インタラクティブ性のために、'use client' ディレクティブを使用：

'use client'

import { useState } from 'react'

export function LikeButton() {
  const [likes, setLikes] = useState(0)
  
  return (
    <button onClick={() => setLikes(likes + 1)}>
      ❤️ {likes} いいね
    </button>
  )
}

データフェッチング

Next.js 15 はデータフェッチングを簡素化します：

async function Page() {
  // この fetch は自動的にキャッシュされます
  const res = await fetch('https://api.example.com/data')
  const data = await res.json()
  
  return <div>{data.title}</div>
}

ベストプラクティス

1. 可能な限りサーバーコンポーネントを使用 してパフォーマンスを向上
2. クライアントサイド JavaScript を最小化 してインタラクティブ性を分離
3. キャッシュを活用 して適切な fetch 設定を行う
4. ローディング状態を実装 して loading.tsx ファイルを使用
5. エラーを優雅に処理 して error.tsx バウンダリを使用

結論

Next.js 15 はモダンな Web アプリケーションを構築するための強力な基盤を提供します。探索を始めて、素晴らしいものを構築しましょう！

---

ハッピーコーディング！🚀