Next.js 14とTypeScriptを使ってみる

Next.js 14は、新しいApp Router、サーバーコンポーネント、パフォーマンス最適化によって、開発者体験を大きく改善します。このガイドでは、Next.js 14を使ってゼロからモダンなWebアプリケーションを構築する方法を紹介します。

なぜNext.js 14か？

Next.js 14は、ゲームを変えるいくつかの新機能をもたらします：

Server Components：JavaScriptの記述量を減らし、パフォーマンスを向上

App Router：ネスト可能なレイアウトとローディング状態によるルーティングの改善

Server Actions：APIルートを作成せずにデータを更新

Partial Prerendering：静的コンテンツと動的コンテンツをシームレスに組み合わせる

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

npx create-next-app@latest my-app --typescript --tailwind --eslint

このコマンドは、本番環境対応のアプリケーションに必要なすべてをセットアップします。

重要な概念

Server ComponentsとClient Components

Next.js 14では、コンポーネントはデフォルトでServer Componentです。これにより：

サーバー側でのみ実行される

データベースに直接アクセスできる

クライアントに送信されるJavaScriptの量を削減できる

// これはServer Component（デフォルト）
async function BlogPost({ id }: { id: string }) {
  const post = await db.post.findUnique({ where: { id } })
  return <Article post={post} />
}

データフェッチング

Server Componentsにより、データフェッチがシンプルになります：

async function getPosts() {
  const res = await fetch('https://api.example.com/posts')
  return res.json()
}

export default async function Posts() {
  const posts = await getPosts()
  return <PostList posts={posts} />
}

まとめ

Next.js 14はReact開発における大きな飛躍です。サーバー優先アーキテクチャを重視し、TypeScriptをサポートすることで、モダンなWebアプリケーションを構築するための優れた選択肢となっています。