Next.jsとは？ React開発を加速する最先端フレームワーク入門【2025年版】

1. はじめに: Next.jsとは？ – React開発を加速するフレームワーク

Web開発の世界は常に進化しており、その中でもReactはユーザーインターフェース（UI）構築のための主要なライブラリとしての地位を確立しています。しかし、ReactはUI構築に特化しているため、実際のWebアプリケーション開発にはルーティング、データ取得、サーバーサイドレンダリング、最適化など、多くの追加要素が必要となります。ここで登場するのがNext.jsです。

Next.jsの基本定義

Next.jsは、Reactを基盤とした、モダンなWebアプリケーションを構築するためのオープンソースフレームワークです ¹。開発者は使い慣れたReactコンポーネントを用いてUIを構築し、Next.jsはその上に、アプリケーション開発に必要な構造、機能、そして自動最適化を提供します ¹。

ReactがUIを描画するための「部品」を提供するライブラリであるのに対し、Next.jsはそれらの部品を組み合わせて、高性能でスケーラブルなフルスタックWebアプリケーションを効率的に開発するための「設計図」と「道具一式」を提供するフレームワークと言えます ²。Next.jsは、バンドル（複数のファイルをまとめる）、コンパイル（コードをブラウザが理解できる形式に変換する）といった、React開発に必要なツール群を内部で抽象化し、自動的に設定してくれます ²。これにより、開発者は複雑な環境構築に時間を費やすことなく、アプリケーションの本質的な機能開発に集中できるようになります ²。

なぜNext.jsか？ React単体との違いとメリット

React単体でもWebアプリケーションを構築することは可能ですが、Next.jsを利用することで多くのメリットが得られます。ReactはあくまでUIライブラリであり、アプリケーション全体の構造や機能については開発者が選択・設定する必要があります ³。一方、Next.jsはReactの機能を拡張し、フルスタック開発を視野に入れた多くの機能を追加したフレームワークです ³。

Next.jsが提供する主なメリットは以下の通りです：

• パフォーマンス向上: Next.jsは、Webサイトの表示速度を向上させるための様々な最適化機能を標準で備えています。画像の自動最適化、フォント最適化、スクリプト読み込みの最適化、効率的なJavaScriptバンドル生成（スマートバンドル）、不要なコードの削除（コード分割）、そして後述するプリレンダリング技術（SSR, SSG, ISR）により、ユーザー体験（UX）の核となるCore Web Vitalsのスコア改善に貢献します ²。
• SEO対策強化: 従来のReact（クライアントサイドレンダリング）アプリケーションでは、初期状態のHTMLにコンテンツが含まれていないため、検索エンジンが内容を正しく認識しにくいという課題がありました。Next.jsはサーバーサイドレンダリング（SSR）や静的サイト生成（SSG）を容易に実現でき、これによりサーバー側で完全なHTMLを生成するため、検索エンジンによるクロールとインデックス作成が効率的に行われ、SEO（検索エンジン最適化）に有利になります ³。また、ページごとのメタデータ設定も簡単に行えます ⁶。
• 優れた開発者体験 (DX): Next.jsは開発者の生産性を高めるための機能も充実しています。設定不要で利用できる多くの機能、ファイルシステムに基づいた直感的なルーティング、ソースコード変更時に変更箇所のみを高速に再描画するホットリロード（Fast Refresh）、TypeScriptの標準サポート、APIエンドポイントを簡単に作成できる機能などが提供されており、快適な開発環境を実現します ²。
• フルスタック開発: Next.jsはフロントエンドだけでなく、バックエンド機能も同一プロジェクト内で開発できます。APIルート（またはRoute Handlers）やServer Actionsといった機能により、サーバーサイドのロジックやデータベースアクセスなどを実装でき、別途バックエンド用のフレームワークを用意する必要がない場合もあります ²。

これらの利点から、Next.jsはTwitch、Uber、TikTok、Airbnb、Notionといった世界中の有名企業や、日本のデジタル庁、DMM.comなど、多くの組織で採用されており、その信頼性と実績が証明されています ³。

React自体は非常に強力なUIライブラリですが、実際のアプリケーション開発においては、パフォーマンス、SEO、開発効率といった課題に直面することがあります。Next.jsは、これらの課題に対する洗練された解決策をフレームワークレベルで提供することで、Reactの能力を最大限に引き出し、モダンなWebアプリケーション開発を加速させる存在なのです。

この記事でわかること

この記事では、Next.jsの世界に初めて足を踏み入れる方々を対象に、以下の内容を具体的なコード例を交えながら、最新の研究や技術動向も踏まえて分かりやすく解説します。

• Next.jsの基本的な概念と、なぜそれが重要なのか。
• ファイルシステムベースルーティングや多様なレンダリング手法など、Next.jsを支える主要な機能。
• App Router、React Server Components、Server Actionsといった最新技術の概要と利点。
• create-next-app を使ったプロジェクトの始め方と、簡単なブログやポートフォリオサイトの構築例。
• さらに学習を進めるための公式ドキュメントやコミュニティリソース。

この記事を読み終える頃には、Next.jsがどのようなフレームワークであり、どのようにWeb開発を変革しているのかを理解し、自信を持ってNext.jsでの開発を始めるための一歩を踏み出せるようになることを目指します。

2. Next.jsの心臓部：主要機能とコンセプト

Next.jsが多くの開発者に支持される理由は、その強力かつ洗練された機能群にあります。ここでは、Next.jsの中核をなす主要な機能とコンセプトを、初心者にも分かりやすく解説します。これらの機能を理解することが、Next.jsを効果的に活用するための鍵となります。

ファイルシステムベースルーティング: フォルダ構成がそのままURLに

Webアプリケーション開発において、ページのURL構造（ルーティング）をどのように管理するかは重要な課題です。多くのフレームワークでは、ルーティング情報をコードや設定ファイルで明示的に定義する必要があります。しかし、Next.jsはこのプロセスを劇的に簡略化する「ファイルシステムベースルーティング」を採用しています ²。

これは、特定のディレクトリ（pages または app）内のフォルダとファイルの構造が、そのままアプリケーションのURLパスに対応するという仕組みです。開発者は複雑なルーティング設定を記述する必要がなく、ファイルを作成・配置するだけで自動的にページが生成され、対応するURLでアクセス可能になります ¹⁵。この直感的なアプローチは、開発速度を向上させるだけでなく、設定ミスによる不具合を防ぐ効果もあります ¹⁵。

Next.jsには、主に二つのルーティングシステムが存在します。

1. Pages Router:
   Next.jsの初期から存在する伝統的なルーティング方式です 16。プロジェクトルートにある pages ディレクトリが基点となります 17。

• 例えば、pages/about.js というファイルを作成すると、自動的に /about というURLパスが生成されます ¹⁶。
• pages/index.js はルートパス / に対応します ⁷。
• 動的なルート（例：ユーザープロフィールページ /users/123）は、ファイル名に角括弧 “ を使って pages/users/[id].js のように作成します ²⁰。

2. App Router:
   Next.js 13以降で導入され、バージョン13.4で安定版となった新しいルーティングシステムで、現在はこちらが推奨されています 2。プロジェクトルートにある app ディレクトリが基点となります。

• Pages Routerとは異なり、ルートに対応するUIは page.js (または .tsx) という名前のファイルで定義します ²⁰。例えば、/dashboard/settings というルートは app/dashboard/settings/page.tsx ファイルを作成することで実現します。
• App Routerの大きな特徴は、レイアウト (layout.js)、ローディング状態のUI (loading.js)、エラー発生時のUI (error.js) など、特定の役割を持つファイルを同じフォルダ階層に配置することで、より高度で柔軟なUI構成が可能になる点です ²。これにより、ネストされたレイアウトや、セグメントごとのローディング・エラー処理を簡単に実装できます。
• 具体例 (App Router):
  TypeScript
  // app/dashboard/settings/page.tsx
  // このファイルを作成すると、自動的に /dashboard/settings というURLが生成される
  export default function SettingsPage() {
    return <h1>Application Settings</h1>;
  }
  
• App Routerは、後述するReact Server Componentsを基盤としており、サーバーサイドでの処理やパフォーマンス最適化において、より強力な機能を提供します ²¹。

ファイルシステムベースルーティングは、Next.jsの使いやすさの根幹をなす機能であり、開発者がルーティングの仕組みを直感的に理解し、迅速に開発を進めることを可能にします。

レンダリングの選択肢: 最適な表示方法を選ぶ

Webページの表示方法（レンダリング戦略）は、アプリケーションのパフォーマンス、SEO、そしてユーザー体験に直接影響します。Next.jsの大きな特徴の一つは、様々なレンダリング戦略をサポートし、ページごとに最適な方法を選択できる柔軟性を提供している点です ⁶。

Next.jsは、デフォルトでプリレンダリングを行います ⁷。これは、各ページのHTMLを事前に（ビルド時またはリクエスト時）サーバー側で生成しておく技術です。クライアントサイドのJavaScriptのみでHTMLを生成する方式（CSR）と比較して、ユーザーがページを開いた際の初期表示速度が向上し、検索エンジンがコンテンツを認識しやすくなるためSEOにも有利です ⁷。生成されたHTMLには、そのページをインタラクティブにするために最低限必要なJavaScriptコードが付随し、ブラウザでページが読み込まれると、このJavaScriptが実行されてページが完全に操作可能になります（このプロセスはハイドレーションと呼ばれます）⁷。

Next.jsが提供する主なレンダリング手法は以下の通りです。

• CSR (Client-Side Rendering):

• 概要: ブラウザが最小限のHTMLとJavaScriptを受け取り、JavaScriptが実行されて初めて完全なページ内容が描画される方式です ²⁵。
• 特徴: 状態管理やユーザー操作への応答性に優れインタラクティブ性が高いですが、初期表示が遅くなる傾向があり、SEOには不利な場合があります ⁹。サーバー負荷は低いです ²⁵。
• Next.jsでの実装: App Routerでは、コンポーネントファイルの先頭に ‘use client’ ディレクティブを記述することで、そのコンポーネント（およびその子孫）がクライアントサイドでレンダリング・実行されるようになります ²⁰。
• SSR (Server-Side Rendering):

• 概要: ユーザーからのリクエストがあるたびに、サーバー側で動的にページのHTMLを生成してクライアントに送信する方式です ⁸。
• 特徴: リクエストごとに最新のデータを反映したHTMLが生成されるため、常に最新の情報が表示され、初期表示速度が速くSEOにも有利です ⁸。一方で、リクエストごとにサーバー処理が発生するため、サーバー負荷が高くなり、特に複雑な処理が必要な場合はページの応答速度（TTFB）がSSGに比べて遅くなる可能性があります ⁹。
• Next.jsでの実装: App Routerでは、デフォルトの挙動（特にデータフェッチを伴う場合）がSSRに近くなります ²。Pages Routerでは、ページファイルから getServerSideProps 関数をエクスポートすることでSSRを有効にします ⁹。
• SSG (Static Site Generation):

• 概要: アプリケーションのビルド時（デプロイ前）に、すべてのページのHTMLファイルを事前に生成しておく方式です ⁸。
• 特徴: 生成された静的ファイルはCDN（Content Delivery Network）にキャッシュできるため、リクエストに対する応答速度が非常に高速です ¹¹。サーバー負荷も最小限に抑えられ、スケーラビリティに優れ、SEOにも最適です ¹¹。ただし、コンテンツを更新するにはアプリケーション全体を再ビルドする必要があります ¹¹。
• Next.jsでの実装: App Routerでは、動的なデータフェッチや関数を使用しない場合、デフォルトで静的レンダリングが試みられます ²。動的ルートでSSGを行うには generateStaticParams を使用します ²⁵。Pages Routerでは、ページファイルから getStaticProps 関数をエクスポートすることでSSGを有効にします ⁹。
• ISR (Incremental Static Regeneration):

• 概要: SSGの利点（高速表示、CDNキャッシュ）を維持しつつ、ビルド後も定期的に、または特定のトリガー（オンデマンド）によってページをバックグラウンドで再生成するハイブリッドな方式です ⁸。
• 特徴: SSGと同等の高速なパフォーマンスを提供しながら、コンテンツの鮮度もある程度保つことができます ¹²。SSRのようにリクエストごとにレンダリングするよりもサーバー負荷が低く、スケーラブルです ¹²。ただし、指定した再生成間隔によっては、一時的に古いコンテンツが表示される可能性があります ¹²。
• Next.jsでの実装: App Routerでは、fetch 関数の next: { revalidate: <秒数> } オプションや、ページの revalidate エクスポートで時間ベースの再検証を指定します ²⁵。オンデマンド再検証には revalidatePath や revalidateTag を使用します ³⁴。Pages Routerでは、getStaticProps 関数の戻り値で revalidate: <秒数> を指定します ³¹。

これらのレンダリング手法は、それぞれにメリットとデメリットがあり、適したユースケースが異なります。Next.jsの強力な点は、これらの手法をプロジェクト全体で統一する必要がなく、ページ単位で最適なものを選択し、組み合わせることができる「ハイブリッドアプローチ」を可能にしていることです ⁶。

以下の表は、これらのレンダリング手法の主な違いをまとめたものです。

手法 (Method)	概要 (Description)	HTML生成タイミング (When HTML is Generated)	メリット (Pros)	デメリット (Cons)	主なユースケース (Use Cases)	Next.jsでの実装 (Implementation)
CSR	ブラウザでJSがHTMLを生成	クライアントサイド (実行時)	インタラクティブ性高、サーバー負荷低 25	初期表示遅、SEO不利可能性 9	ダッシュボード、SNSフィードなど、ユーザー操作が多いUI 25	App Router: ‘use client’ ディレクティブ 28
SSR	リクエスト毎にサーバーでHTML生成	サーバーサイド (リクエスト時)	初期表示速、SEO有利、常に最新データ 8	サーバー負荷高、TTFB遅延可能性 9	ECサイト、ニュースサイトなど、動的でSEOが重要なページ 11	App Router: デフォルト (データフェッチ時) 20 <br> Pages Router: getServerSideProps 11
SSG	ビルド時にHTMLを事前生成	サーバーサイド (ビルド時)	非常に高速、CDNキャッシュ可、サーバー負荷低、SEO最適 8	ビルド後の更新は再ビルド必要、動的コンテンツ不向き 11	ブログ、ドキュメント、ポートフォリオなど、更新頻度の低い静的コンテンツ 11	App Router: デフォルト (静的時), generateStaticParams 25 <br> Pages Router: getStaticProps 9
ISR	SSG + 定期的/オンデマンド再生成	サーバーサイド (ビルド時 + 再生成時)	SSGの速度 + コンテンツ鮮度維持、SSRより低負荷 12	再生成間のラグ、ホスティング制限可能性 12	更新がある程度必要なカタログ、アーカイブなど 12	App Router: fetch の revalidate オプション, revalidatePath/Tag 25 <br> Pages Router: getStaticProps の revalidate オプション 31

プロジェクトの要件（コンテンツの更新頻度、リアルタイム性の必要度、SEOの重要性、パフォーマンス目標など）を考慮し、これらのレンダリング手法を適切に選択・組み合わせることが、Next.jsアプリケーション開発の成功に繋がります ¹¹。

データフェッチ戦略: サーバーとクライアントでの効率的なデータ取得

Webアプリケーションは、多くの場合、外部のAPIやデータベースからデータを取得して表示する必要があります。Next.jsは、サーバーサイドとクライアントサイドの両方でデータを効率的に取得するための洗練された方法を提供します。特にApp Routerの登場により、データフェッチの方法はよりシンプルかつ強力になりました。

• App Routerでのデータフェッチ:
  App Routerでは、React Server Components (RSC) がデフォルトであるため、サーバーサイドでのデータ取得が非常に直感的になりました 20。

• async/await の活用: サーバーコンポーネント内で、特別なAPIを学ぶことなく、標準的なJavaScriptの async/await 構文を使ってデータを直接取得できます ²。
  TypeScript
  // app/products/page.tsx
  async function getProducts() {
    // 外部APIから商品データを取得
    const res = await fetch(‘https://api.example.com/products’);
    if (!res.ok) {
      // エラーハンドリング
      throw new Error(‘Failed to fetch products’);
    }
    return res.json();
  }
  
  export default async function ProductsPage() {
    // ページコンポーネント内で直接データ取得関数を呼び出す
    const products = await getProducts();
  
    return (
      <div>
        <h1>Products</h1>
        <ul>
          {products.map((product: any) => (
            <li key={product.id}>{product.name}</li>
          ))}
        </ul>
      </div>
    );
  }
  
• 拡張された fetch API: Next.jsは、標準の fetch APIを拡張し、キャッシュ戦略と再検証（revalidation）の制御を可能にしています ²。fetch 関数の第二引数にオプションを指定することで、データのキャッシュ動作（例：常にキャッシュを使用する force-cache、キャッシュを使用しない no-store）や、キャッシュの有効期間（next: { revalidate: <秒数> }）を細かく設定できます ²⁵。これにより、パフォーマンスとデータの鮮度のバランスを取ることが容易になります。
• キャッシュの再検証: Server Actions内などで revalidatePath や revalidateTag を呼び出すことで、特定のパスやタグに関連付けられたキャッシュを手動で無効化し、最新のデータを取得させることができます ²。
• Server Actions: データの取得だけでなく、データの更新（Mutation）もサーバーサイドで行うための機能です。クライアントからの操作に応じてサーバー上のデータを変更し、必要に応じてUIを更新します ²。詳細は後述します。
• Pages Routerでのデータフェッチ:
  Pages Routerでは、ページ単位でデータ取得用の特別な非同期関数をエクスポートする必要がありました 20。

• getServerSideProps: ページがリクエストされるたびにサーバーサイドで実行され、取得したデータをページのpropsとして渡します。SSRを実現するために使用されます ⁹。
  TypeScript
  // pages/profile.tsx
  import { GetServerSideProps } from ‘next’;
  
  export const getServerSideProps: GetServerSideProps = async (context) => {
    // contextオブジェクトからリクエスト情報（パラメータ、Cookieなど）にアクセス可能
    const userId = context.params?.id; // 例: 動的ルートの場合
    const res = await fetch(`https://api.example.com/user/${userId}`);
    const data = await res.json();
  
    if (!data) {
      return { notFound: true }; // データが見つからない場合は404ページ表示
    }
  
    return { props: { profileData: data } }; // 取得したデータをpropsとして渡す
  }
  
  export default function ProfilePage({ profileData }: { profileData: any }) {
    return <h1>{profileData.name}’s Profile</h1>;
  }
  
• getStaticProps: アプリケーションのビルド時、またはISRが有効な場合は指定された間隔でサーバーサイドで実行されます。SSGやISRを実現するために使用されます ⁹。動的ルートと組み合わせる場合は、getStaticPaths で事前に生成するパスのリストを指定する必要があります ¹¹。
• getInitialProps: SSRとCSRの両方で実行される可能性がある古いAPIですが、現在では getServerSideProps または getStaticProps の使用が推奨されています ³⁷。
• クライアントサイドでのデータフェッチ:
  上記のサーバーサイドでのデータフェッチに加えて、クライアントサイド（ブラウザ）でデータを取得することも可能です。これは、初期表示後にユーザーの操作に応じて追加のデータを読み込む場合や、CSRを中心としたコンポーネントで使用されます。

• Reactの useEffect フックと useState フックを組み合わせて、コンポーネントのマウント後などに fetch を実行するのが基本的な方法です ⁹。
• より高度なクライアントサイドでのデータフェッチ（キャッシュ、再検証、ローディング状態管理など）には、(https://swr.vercel.app/) や(https://tanstack.com/query/latest) といった専用のライブラリを利用することが一般的です ⁹。これらはClient Components (‘use client’) 内で使用します。

Next.jsは、アプリケーションの要件に応じて、サーバーサイドとクライアントサイドのデータフェッチ戦略を柔軟に組み合わせることを可能にします。特にApp Routerでは、RSCを活用することで、データ取得ロジックをUIコンポーネントの近くに配置しつつ、サーバーサイドで効率的かつ安全に実行できるようになり、開発体験とパフォーマンスの両立が図られています。

組み込み最適化: パフォーマンス向上のための機能群

Next.jsは、開発者が意識せずとも高いパフォーマンスを発揮できるように、多くの最適化機能を組み込みで提供しています。これにより、Core Web Vitalsなどのパフォーマンス指標を改善し、優れたユーザー体験を実現します ²。

• 画像最適化 (next/image):
  Webサイトのパフォーマンスにおいて画像は大きなボトルネックになりがちですが、Next.jsはこの問題を解決するための強力な <Image> コンポーネントを提供しています 6。

• 自動フォーマット変換: ブラウザが対応していれば、従来のJPEGやPNGよりも軽量な最新画像フォーマットであるWebPやAVIFへ自動的に画像を変換します ¹⁰。これにより、画質を維持しながらファイルサイズを削減できます。
• リサイズと最適化: デバイスの画面サイズや解像度に応じて、適切なサイズの画像を自動生成して配信します。これにより、不要に大きな画像をダウンロードさせることを防ぎます。
• 遅延読み込み (Lazy Loading): デフォルトで有効になっており、画像がビューポート（画面表示領域）に入るまで読み込みを遅延させます。これにより、初期ページのロード時間を短縮できます ⁶。
• 簡単な利用: 開発者は、標準の <img> タグの代わりに <Image> コンポーネントを使用し、src, alt, width, height を指定するだけで、これらの最適化の恩恵を受けることができます ¹⁰。手動で画像を変換したりリサイズしたりする手間が省けます ⁷。
  JavaScript
  import Image from ‘next/image’;
  
  function ProductCard({ product }: { product: any }) {
    return (
      <div>
        <h2>{product.name}</h2>
        {/* publicフォルダ内の画像を指定、または外部URLも可能 */}
        <Image
          src={product.imageUrl}
          alt={product.name}
          width={300} // レイアウトシフトを防ぐために必須
          height={200} // レイアウトシフトを防ぐために必須
          // quality={75} // 画質を調整（デフォルトは75）
          // priority // 重要な画像（例：LCP要素）の場合に早期読み込みを指示
        />
        <p>{product.description}</p>
      </div>
    );
  }
  

• フォント最適化 (next/font):
  Webフォントはページの見た目を豊かにしますが、読み込みがパフォーマンスに影響を与えることがあります。next/font モジュールは、フォントファイルをビルド時にダウンロードし、他の静的アセットと共にセルフホスティングすることで、パフォーマンスとプライバシーを向上させます 2。レイアウトシフト（フォント読み込みによる表示のずれ）を防ぐ機能も組み込まれています。
• スクリプト最適化 (next/script):
  Google Analyticsや各種ウィジェットなど、サードパーティ製のスクリプトを読み込む際に使用します。<Script> コンポーネントは、スクリプトの読み込みタイミング（例：ページがインタラクティブになった後 afterInteractive、アイドル時 lazyOnload）を制御する strategy プロパティを提供し、メインスレッドのブロッキングを避け、ページのパフォーマンスへの影響を最小限に抑えることができます 2。
• 自動コード分割 (Automatic Code Splitting):
  Next.jsは、デフォルトでページごとに必要なJavaScriptコードだけを読み込むように、バンドルを自動的に分割します 2。ユーザーがアクセスしたページに関係のないコードまで読み込む必要がないため、初期ロードに必要なJavaScriptの量を削減し、表示開始までの時間を短縮します。
• スマートバンドリング (Smart Bundling):
  Next.jsは、Webpack（またはTurbopack）を内部で使用し、最新のJavaScript機能を活用しながら、効率的なバンドルを生成します 7。

これらの組み込み最適化機能により、開発者はパフォーマンスチューニングに関する深い知識がなくても、最初から高速なWebアプリケーションを構築することが可能です。Next.jsは、優れたユーザー体験を提供するための基盤を、フレームワークレベルでサポートしています。

その他の重要機能

上記の主要機能に加えて、Next.jsはモダンなWebアプリケーション開発を支援するための様々な機能を提供しています。

• APIルート / Route Handlers:
  Next.jsアプリケーション内に簡単にサーバーサイドのAPIエンドポイントを作成できる機能です 2。Pages Routerでは pages/api ディレクトリ、App Routerでは app/api ディレクトリ（または任意の場所に route.js/route.ts ファイル）を使用します。これにより、フロントエンドと同じプロジェクト・同じ言語（JavaScript/TypeScript）でバックエンドAPIを構築でき、データベース操作、外部APIとの連携、認証処理などを実装できます 5。簡単なバックエンド機能であれば、別途サーバーを用意する必要がなくなります 8。
• CSSサポート:
  Next.jsは多様なCSSスタイリング手法を柔軟にサポートしています 2。コンポーネント単位でスタイルを適用できるCSS Modules、ユーティリティクラスベースのTailwind CSS、伝統的なSass、JavaScript内でスタイルを記述するCSS-in-JSライブラリ（例：Styled Components, Emotion）など、プロジェクトの要件やチームの好みに合わせて選択できます 4。
• TypeScriptサポート:
  Next.jsはTypeScriptを第一級でサポートしており、簡単な設定（または create-next-app 時の選択）で導入できます 2。静的型付けにより、開発時のエラー検出、コード補完、リファクタリングが容易になり、大規模なアプリケーション開発におけるコードの品質と保守性を向上させます 2。Next.js 15.3では、開発体験を向上させるTypeScriptプラグインのパフォーマンスも改善されました 38。
• ミドルウェア (Middleware):
  リクエストがサーバーに到達する直前（またはエッジ）でコードを実行できる機能です 2。認証チェック、A/Bテストの振り分け、リダイレクト処理、国際化（i18n）対応のためのパス書き換えなど、リクエストに基づいた共通処理を実装するのに適しています 5。

これらの機能は、Next.jsが単なるフロントエンドフレームワークではなく、フルスタック開発を可能にする包括的なプラットフォームであることを示しています。開発者はこれらの機能を組み合わせることで、複雑な要件を持つモダンなWebアプリケーションを効率的に構築できます。Next.jsの設計思想は、Web開発における一般的な課題に対する解決策をフレームワークレベルで提供し、開発者がより本質的な価値創造に集中できるようにすることにあると言えるでしょう。

3. Next.jsの最前線：App Routerと最新技術動向

Next.jsは非常に活発に開発が進められており、常にWeb開発の最先端技術を取り込んで進化しています。特にNext.js 13で導入され、13.4で安定版となったApp Routerは、フレームワークのアーキテクチャに大きな変革をもたらしました ²¹。ここでは、App Routerを中心とした最新の技術動向と、Next.js 15における重要なアップデートについて解説します。

App Routerの深化

App Routerは、従来のPages Routerが抱えていた課題（特にレイアウトの柔軟性やデータ取得の最適化）を解決し、Reactの最新機能、特にReact Server Components (RSC) を最大限に活用するために設計されました ²¹。

• React Server Components (RSC) がデフォルト:
  App Routerの最も大きな特徴は、app ディレクトリ内のコンポーネントがデフォルトでRSCとして扱われることです 20。RSCはサーバー上でのみレンダリングされるコンポーネントであり、以下のような利点があります 44：

• クライアントへのJavaScript削減: UIのレンダリングロジックや、インタラクションを伴わない表示部分のコードがクライアントに送信されないため、ブラウザがダウンロード・解析・実行するJavaScriptの量を大幅に削減でき、特に低速なネットワーク環境や低スペックなデバイスでの初期表示パフォーマンスが向上します。
• 直接的なデータアクセス: サーバー上で実行されるため、データベースや内部APIなどのバックエンドリソースに直接、安全にアクセスできます。APIキーなどの機密情報をクライアントに公開するリスクもありません。
• サーバーサイドでのデータフェッチ: 前述の通り、async/await を使ってコンポーネント内で直接データフェッチを行えます。これにより、データ取得ロジックとUIが近接し、コードの見通しが良くなります。
• キャッシュ: サーバーでのレンダリング結果をキャッシュし、再利用することでパフォーマンス向上とコスト削減に繋がります。
• ストリーミング: レンダリング作業を分割し、準備ができた部分から順次クライアントに送信（ストリーミング）できます。これにより、ユーザーはページ全体が完成するのを待たずに、コンテンツの一部をより早く見ることができます。
• Client Components (‘use client’):
  一方で、ユーザーの操作に応じて状態が変化するUI（例：カウンター、フォーム入力）、ブラウザ固有のAPI（localStorage, windowなど）を利用する機能、useState や useEffect といったReactフックを使用するコンポーネントは、クライアントサイドで実行される必要があります。これらはClient Componentsとして定義します 20。

• Client Componentを定義するには、ファイルの先頭（import文よりも前）に ‘use client’ という文字列ディレクティブを記述します ²⁸。
• ‘use client’ は、サーバーコンポーネントとクライアントコンポーネントの境界を宣言するものです。一度この境界が宣言されると、そのファイルからインポートされる他のモジュールもクライアントバンドルの一部と見なされます ²⁸。
• 重要なのは、サーバーコンポーネントの中にクライアントコンポーネントをインポートしてネストできることです（逆は直接的にはできませんが、children propsなどを通じて可能です）²⁸。これにより、ページの大部分をサーバーコンポーネントで構成しつつ、インタラクティブな部分だけをクライアントコンポーネントとして切り出す、という効率的な構成が可能になります。
• RSC vs Client Components の使い分け:
  App Routerにおける基本的な考え方は、「サーバーでできることは、できるだけサーバーで行う」です。インタラクティブ性やブラウザAPIへのアクセスが不要なコンポーネントは、デフォルトのサーバーコンポーネントとして実装します。状態管理やイベントハンドラが必要な場合にのみ、’use client’ を使ってクライアントコンポーネントに切り替えるのがベストプラクティスとされています 44。この使い分けを意識することで、クライアントサイドの負荷を最小限に抑え、アプリケーション全体のパフォーマンスを最適化できます。

App RouterとRSCの組み合わせは、従来のWeb開発におけるサーバーサイドとクライアントサイドの境界をより柔軟にし、パフォーマンスと開発体験の両方を向上させる可能性を秘めています。

Server Actions

Server Actionsは、React 19とNext.js 15（およびそれ以前のバージョン）で導入された、サーバーサイドのロジックをクライアントから直接呼び出すための仕組みです ¹³。特にフォームの送信処理やデータの更新（Mutation）を劇的に簡略化します。

• 機能: クライアントコンポーネント（ボタンクリックなど）やフォーム送信をトリガーとして、サーバー上で定義された非同期関数を実行できます ⁵。これにより、従来のようにデータ更新のために別途APIルートを作成し、そこに対してクライアントから fetch リクエストを送る、といった定型的なコードが不要になる場合があります ⁸。
• 定義方法: サーバーで実行したい非同期関数の先頭、または関数をエクスポートするファイル全体の先頭に ‘use server’ ディレクティブを記述します ¹³。
• フォームとの連携: HTMLの <form> 要素の action 属性にServer Action関数を直接渡すことができます ³⁵。これはプログレッシブエンハンスメントをサポートしており、JavaScriptが無効な環境でも基本的なフォーム送信が機能します ³⁵。
• セキュリティ: Server Actionsは、クライアントから呼び出されることを前提としているため、Next.jsはデフォルトでいくつかのセキュリティ機構を提供します。アクション呼び出しのための暗号化されたID生成、未使用アクションのコード削除、オリジン検証などが含まれます ¹³。ただし、アクション内で実行される処理自体の認証（Authentication）や認可（Authorization）（例：ログインしているユーザーのみが実行可能か、特定の権限を持っているか）は、開発者が明示的に実装する必要があります ³⁵。Server Actionsは、パブリックなAPIエンドポイントと同様に扱うべきです ³⁵。
• データ再検証との連携: アクションの実行後、関連するデータのキャッシュを無効化するために revalidatePath や revalidateTag を呼び出すことが一般的です ³⁴。
• 具体例 (簡単なアイテム追加フォーム):
  TypeScript
  // app/actions.ts
  ‘use server’; // このファイル内のエクスポートは全てServer Actionsになる
  
  import { revalidatePath } from ‘next/cache’;
  import { db } from ‘@/lib/db’; // 仮のデータベースクライアント
  
  export async function addItem(formData: FormData) {
    // ユーザー認証・認可チェック（重要！）
    // const user = await getCurrentUser();
    // if (!user) { throw new Error(‘Unauthorized’); }
  
    const itemName = formData.get(‘item’) as string;
  
    if (!itemName) {
      // 簡単なバリデーション
      return { error: ‘Item name is required.’ };
    }
  
    try {
      // データベースにアイテムを追加する処理
      await db.items.create({ data: { name: itemName } });
      console.log(‘Added item:’, itemName);
  
      // 関連ページのキャッシュを再検証してUIを更新
      revalidatePath(‘/’);
      return { success: true };
  
    } catch (error) {
      console.error(‘Failed to add item:’, error);
      return { error: ‘Failed to add item.’ };
    }
  }
  
  // app/page.tsx
  ‘use client’; // フォームの状態を扱うためClient Componentにする
  
  import { addItem } from ‘./actions’;
  import { useActionState } from ‘react’; // React 19のフック
  import { useEffect } from ‘react’;
  
  export default function HomePage() {
    // useActionStateでアクションの状態（結果、ペンディング状態）を管理
    const [state, formAction] = useActionState(addItem, null); // 第2引数は初期状態
  
    useEffect(() => {
      if (state?.success) {
        alert(‘Item added successfully!’);
        // フォームをリセットするなどの処理
      } else if (state?.error) {
        alert(`Error: ${state.error}`);
      }
    }, [state]);
  
    return (
      // formActionをaction属性に渡す
      <form action={formAction}>
        <input type=”text” name=”item” placeholder=”Enter item name” required className=”border p-1 mr-2″ />
        <button type=”submit” className=”bg-blue-500 text-white p-1 rounded”>
          Add Item
        </button>
        {/* state?.error && <p className=”text-red-500″>{state.error}</p> */}
      </form>
    );
  }
  

Server Actionsは、クライアントとサーバー間のデータ操作をよりシームレスにし、フルスタック開発の体験を向上させる重要な機能です。

Turbopack

Turbopackは、Vercel（Next.jsの開発元）が開発している、Rust製の新しいインクリメンタルバンドラーです ⁴⁶。従来のJavaScriptベースのバンドラー（例：Webpack）と比較して、大幅なパフォーマンス向上を目指しています。

• 目的: 特に大規模なアプリケーションにおけるローカル開発時のビルド時間やホットリロード（Fast Refresh）の速度を劇的に改善すること ⁴⁵。
• 特徴:

• インクリメンタル: 一度行った処理の結果を関数レベルでキャッシュし、変更があった部分だけを再計算するため、変更に対する反応が非常に高速です ⁴⁶。
• Rust製: Rustのパフォーマンスと安全性を活用しています。
• Lazy Bundling: 開発サーバーで実際にリクエストされたモジュールのみをバンドルするため、初期コンパイル時間とメモリ使用量を削減できます ⁴⁶。
• 現状 (Next.js 15.3時点):

• ローカル開発サーバー (next dev –turbopack) は安定版 (Stable) として利用可能です ⁴⁵。Vercel自身のサイト開発などでも利用され、大幅な速度向上が報告されています ⁴⁵。
• 本番ビルド (next build –turbopack) はアルファ版 (Alpha) として利用可能になりました ³⁸。まだ実験的な段階ですが、将来的にWebpackを置き換えることを目指しています。
• 利用方法: package.json の scripts で next dev や next build に –turbopack フラグを追加するか、create-next-app 時に –turbo オプションを指定します ³⁶。

Turbopackは、Next.jsの開発体験をさらに向上させるための重要な投資であり、今後の進化が期待されます。

Partial Prerendering (PPR) (プレビュー)

Partial Prerendering (PPR) は、Next.js 14でプレビュー機能として導入された、新しいレンダリング最適化技術です ⁴¹。静的サイト生成（SSG）の高速な初期表示と、サーバーサイドレンダリング（SSR）の動的なコンテンツ対応という、両者の利点を組み合わせることを目指しています ⁵⁰。

• 仕組み: PPRでは、ページをReactの<Suspense>コンポーネント境界に基づいて分割します ⁵⁴。

1. まず、ページの静的な部分（<Suspense>の外側や、フォールバックUI）を含む「静的シェル」がビルド時に生成され、CDNから即座に配信されます ⁵²。これにより、非常に高速な初期表示（TTFB, FCP）が可能になります。
2. <Suspense>で囲まれた動的な部分（例：Cookieに基づくユーザー情報、パーソナライズされたコンテンツ、リアルタイムデータなど）は、ユーザーのリクエスト時にサーバーでレンダリングされ、静的シェルが配信されたのと同じHTTPストリーム内でクライアントに送信されます ⁵⁴。追加のネットワークラウンドトリップは発生しません。

• 利点: 静的なコンテンツのパフォーマンスを維持しながら、動的な要素をシームレスに組み込むことができます。これにより、例えばEコマースサイトの商品ページで、基本情報は静的に高速表示しつつ、在庫状況やユーザーレビューといった動的な部分を遅延なく表示する、といったことが可能になります。
• 実装: PPRを有効にするための設定（Next.js 15 RCでは experimental.ppr フラグ）を行い、動的にしたいUIを <Suspense> でラップします ³⁶。<Suspense> 内のコンポーネントは、必要に応じて cookies() や headers() などの動的関数を使用したり、キャッシュしないデータフェッチを行ったりできます ⁵⁴。
• 現状: PPRはまだ実験的な機能であり、今後のバージョンで変更される可能性があります ⁵¹。

PPRは、Webアプリケーションのパフォーマンスと動的性の両立という長年の課題に対する、Next.jsの意欲的な取り組みの一つです。

React 19 との連携

Next.jsはReactエコシステムの最前線に位置しており、Reactの最新機能を積極的に採用しています。Next.js 15では、React 19 RC（リリース候補版）がApp Routerのデフォルトとして採用されました ³⁶。

• Actions API: 前述のServer Actionsは、React 19で導入されたActions APIを基盤としています ¹³。Next.jsは、このActions APIをフレームワークレベルで統合し、ルーティング、キャッシュ管理、セキュリティ機構などを提供することで、実用的な機能として昇華させています。React 19の新しいフックである useActionState (旧 useFormState) や、機能が拡張された useFormStatus などもNext.jsアプリケーション内で活用できます ⁵⁸。
• React Compiler (実験的): Reactチームが開発中のReact Compilerは、コードを解析し、useMemo や useCallback といった手動でのメモ化（パフォーマンス最適化のためのキャッシュ）を自動的に適用することを目指すものです。Next.js 15では、このReact Compilerを実験的に有効にするオプションが追加されました ³⁶。これが安定化すれば、開発者はパフォーマンス最適化のための定型的なコード記述から解放され、よりシンプルで保守しやすいコードを書けるようになる可能性があります。
• Canary Channel: Next.js App Routerは、ReactのCanary（カナリア）リリースチャンネルに基づいて構築されています ³⁶。これは、Reactの安定版リリースに含まれる前の、比較的新しいがフレームワークでの利用には十分テストされていると見なされる機能を含むチャンネルです ⁶⁰。これにより、Next.jsユーザーはReactの最新機能を早期に利用できますが、一部では「実験的な機能に依存しすぎている」との指摘もあります ⁶⁰。しかし、Vercel/Next.jsチームは、Reactチームとの緊密な連携のもと、これらの機能がフレームワークで安定して動作することを確認していると主張しています ⁴⁵。

Next.jsとReactは密接に連携して進化しており、Next.jsを使うことは、多くの場合、Reactの最新機能を活用することを意味します。

Next.js 15 のその他の注目点

Next.js 15（2024年10月安定版リリース）では、上記の主要なトピック以外にも、開発体験やパフォーマンスに関わる重要な変更が多数導入されました。

• キャッシュ挙動の変更: これまでNext.js App Routerはパフォーマンスを優先し、fetch リクエストやGETメソッドのRoute Handlers、クライアントサイドのナビゲーション結果をデフォルトで積極的にキャッシュしていました ³⁶。しかし、この挙動が時に予期せぬ古いデータの表示を引き起こし、開発者を混乱させることがありました ⁶²。コミュニティからのフィードバックを受け ⁵¹、Next.js 15ではこれらのキャッシュがデフォルトで無効（uncached by default） に変更されました ³⁶。キャッシュを利用したい場合は、fetch のオプションなどで明示的にオプトインする必要があります。これにより、フレームワークの挙動がより予測可能になり、開発者はキャッシュをより意識的に制御できるようになります。
• 非同期APIへの移行: cookies(), headers(), draftMode() といった、リクエスト時の情報に依存する一部のAPIが、同期的（すぐに値が返る）から非同期（await が必要） に変更されました ³⁶。これは、これらのAPIが内部的に非同期処理に依存している実態をより明確にするための変更です。既存のコードからの移行を支援するために、自動変換ツール（Codemod）が提供されています ⁴⁹。
• 開発者体験の向上:

• エラー表示の改善: エラー発生時のメッセージやスタックトレースの表示が刷新され、問題の原因特定がより容易になりました ⁴⁸。外部ライブラリのコードはデフォルトで折りたたまれ、アプリケーション自身のコードに焦点が当てられます ⁶⁴。
• Dev Indicator: 開発モード時に画面隅に表示されるインジケーターが導入され、現在のルートのレンダリングモード（静的/動的）やビルド状況などを確認できるようになりました ⁴⁸。
• next.config.ts サポート: 設定ファイル next.config.js に加えて、TypeScript形式の next.config.ts がサポートされ、設定にも型安全性がもたらされました ⁴⁵。

• next/after (実験的): レスポンスのストリーミングが完了した後に、特定の処理（例：ログ記録、分析データの送信）を実行するための新しいAPIです ³⁶。レスポンス自体をブロックすることなく、後処理を行えます。
• 新しいナビゲーションフック: クライアントサイドのルーティングをより細かく制御するための onNavigate フック（ナビゲーションのキャンセル等が可能）と useLinkStatus フック（リンクの遷移状態を取得）が導入されました ³⁸。

これらのアップデートは、Next.jsがパフォーマンス、開発体験、そして最新のWeb標準への追従という点で、継続的に改善を続けていることを示しています。特にキャッシュ挙動の変更は、フレームワークの思想における大きな転換点であり、開発者による明示的な制御を重視する方向性を示唆しています。

4. 実践Next.js：簡単なアプリケーション例

Next.jsの概念や機能を学んだところで、実際に手を動かして簡単なアプリケーションを作成してみましょう。ここでは、Next.jsプロジェクトの始め方と、代表的なユースケースである「ブログ」と「ポートフォリオサイト」の基本的な構築手順を、App Routerを前提として紹介します。

プロジェクト作成 (create-next-app)

Next.jsプロジェクトを開始する最も簡単な方法は、公式のCLIツール create-next-app を使用することです。

1. Node.jsの準備: まず、お使いのコンピューターにNode.js（バージョン18.17以降推奨）がインストールされていることを確認してください ³⁹。Node.jsをインストールすると、パッケージマネージャーであるnpmも通常一緒にインストールされます。
2. プロジェクト作成コマンド: ターミナル（コマンドプロンプト）を開き、以下のコマンドを実行します ³⁹。my-next-app の部分は好きなプロジェクト名に変更してください。
   Bash
   npx create-next-app@latest my-next-app
   
3. 設定の選択: コマンドを実行すると、いくつかの質問が表示されます。

• Would you like to use TypeScript? (TypeScriptを使用しますか？) → Yes推奨
• Would you like to use ESLint? (ESLintを使用しますか？) → Yes推奨
• Would you like to use Tailwind CSS? (Tailwind CSSを使用しますか？) → Yes/No (お好みで)
• Would you like to usesrc/directory? (src ディレクトリを使用しますか？) → Yes/No (お好みで)
• Would you like to use App Router? (recommended) (App Routerを使用しますか？) → Yes (この記事ではApp Routerを前提とします)
• Would you like to customize the default import alias (@/*)? (インポートエイリアスをカスタマイズしますか？) → No (通常はデフォルトでOK) これらの質問に答えると、選択に基づいてプロジェクトの雛形が自動的に生成されます。

4. 開発サーバーの起動: 作成されたプロジェクトディレクトリに移動し、開発サーバーを起動します ³⁹。
   Bash
   cd my-next-app
   npm run dev
   # または yarn dev
   
   開発サーバーが起動したら、ブラウザで http://localhost:3000 にアクセスすると、Next.jsのウェルカムページが表示されます。これで開発を始める準備が整いました。
   Turbopackの利用: 開発サーバーの起動を高速化したい場合は、–turbo フラグを追加します ³⁶。
   Bash
   npm run dev — –turbo
   # または yarn dev –turbo
   

具体例1：ブログ記事ページの構築

ブログは、Next.jsのSSG（静的サイト生成）やISR（インクリメンタル静的再生成）の能力を示すのに適した例です。ここでは、Markdownファイルで記事を管理し、動的なルート (/blog/[記事のスラッグ]) で表示する基本的な流れを説明します。

• ファイル構造:
  記事ページは動的ルートになるため、app/blog/[slug]/page.tsx のようなファイルを作成します 20。[slug] の部分が、各記事固有の識別子（URLの一部）になります。
• 記事データの準備: プロジェクト内に posts などのディレクトリを作成し、記事ごとにMarkdownファイル（例: hello-world.md, my-first-post.md）を置きます。各ファイルの先頭には、YAML Front Matter形式でタイトルや日付などのメタデータを記述します。
  title: ‘Hello World’ date: ‘2024-01-01’
  これは最初のブログ記事です。Markdownが使えます。
• データ取得関数の実装:
  Markdownファイルを読み込み、内容とメタデータを解析するための関数を lib ディレクトリなどに作成します（例: lib/posts.ts）。これには fs, path, gray-matter (Front Matter解析), remark, remark-html (MarkdownからHTMLへ変換) といったライブラリが役立ちます。

• getAllPostSlugs(): 全ての記事ファイル名（スラッグ）のリストを取得する関数。
• getPostData(slug): 特定のスラッグに対応するMarkdownファイルを読み込み、メタデータとHTMLコンテンツを取得する関数。

• 動的ルートの生成 (generateStaticParams):
  ビルド時に静的に生成する記事ページのパス（スラッグ）をNext.jsに伝えるために、app/blog/[slug]/page.tsx 内で generateStaticParams 関数をエクスポートします 25。
  TypeScript
  // app/blog/[slug]/page.tsx
  import { getAllPostSlugs } from ‘@/lib/posts’;
  
  export async function generateStaticParams() {
    const slugs = getAllPostSlugs(); // 例: [‘hello-world’, ‘my-first-post’]
    // Next.jsが必要とする形式 ({ slug: ‘…’ } の配列) で返す
    return slugs.map((slug) => ({
      slug: slug,
    }));
  }
  
• 記事ページのレンダリング:
  page.tsx コンポーネントは async 関数として定義し、params.slug を使って対応する記事データを取得し、レンダリングします 66。
  TypeScript
  // app/blog/[slug]/page.tsx
  import { getPostData, getAllPostSlugs } from ‘@/lib/posts’;
  import { notFound } from ‘next/navigation’;
  
  // generateStaticParams は上記で定義済み
  
  // ページコンポーネント自体もasync関数にできるのがApp Routerの特徴
  export default async function BlogPost({ params }: { params: { slug: string } }) {
    try {
      // スラッグに基づいて記事データを取得
      const postData = await getPostData(params.slug);
  
      return (
        <article className=”prose lg:prose-xl mx-auto py-8″> {/* proseクラスはTailwind Typography用 */}
          <h1>{postData.title}</h1>
          <div className=”text-gray-600″>
            <time dateTime={postData.date}>{/* 日付表示フォーマット */}</time>
          </div>
          {/* Markdownから変換されたHTMLを安全に表示 */}
          <div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />
        </article>
      );
    } catch (error) {
      // 記事が見つからない場合などは404ページを表示
      notFound();
    }
  }
  
  // (オプション) メタデータ生成
  export async function generateMetadata({ params }: { params: { slug: string } }) {
    try {
      const postData = await getPostData(params.slug);
      return {
        title: postData.title,
        // description: postData.excerpt, // 抜粋など
      };
    } catch (error) {
      return { title: ‘Post Not Found’ };
    }
  }
  
  注意: dangerouslySetInnerHTML はXSS脆弱性のリスクがあるため、信頼できるソースからのHTMLのみに使用してください。Markdownの安全なレンダリングには next-mdx-remote などのライブラリ利用も推奨されます ⁶⁶。
• ISRの有効化 (オプション):
  ブログ記事を定期的に更新したい場合は、ISRを有効にします。App Routerでは、page.tsx から revalidate 定数をエクスポートするか、fetch 時に revalidate オプションを指定します。
  TypeScript
  // app/blog/[slug]/page.tsx
  export const revalidate = 3600; // 1時間ごとに再検証（バックグラウンドで再生成）
  

これで、Markdownファイルを追加・編集するだけで、自動的にブログ記事ページが生成・更新される仕組みができました。

具体例2：ポートフォリオサイトの基本構成

ポートフォリオサイトは、自己紹介、スキル、制作実績などを紹介するためのWebサイトです。多くの場合、内容は頻繁には変わらないため、SSGに適しています。

• ページ構成:

• app/page.tsx: トップページ。簡単な自己紹介や主要セクションへのリンク ⁶⁷。
• app/about/page.tsx: より詳細な経歴や自己紹介ページ ³⁹。
• app/works/page.tsx: 制作実績の一覧ページ ⁶⁷。
• app/works/[id]/page.tsx: 各実績の詳細ページ（動的ルート）。
• app/skills/page.tsx: スキルセットを紹介するページ ⁶⁷。
• app/contact/page.tsx: 問い合わせフォームページ。

• 共通レイアウト:
  サイト全体で共通のヘッダーやフッターは、ルートの app/layout.tsx で定義します。
  TypeScript
  // app/layout.tsx
  import Header from ‘@/components/Header’;
  import Footer from ‘@/components/Footer’;
  import ‘./globals.css’; // グローバルCSS
  
  export default function RootLayout({ children }: { children: React.ReactNode }) {
    return (
      <html lang=”ja”>
        <body>
          <Header />
          <main className=”container mx-auto px-4 py-8″>
            {children} {/* ここに各ページのコンテンツが挿入される */}
          </main>
          <Footer />
        </body>
      </html>
    );
  }
  
• コンポーネント:
  再利用可能なUI部品は components ディレクトリに作成します。

• components/Header.tsx, components/Footer.tsx
• components/ProjectCard.tsx: 作品一覧ページで各プロジェクトを表示するためのカードコンポーネント ⁶⁸。

• 作品データ:
  作品情報は、JSONファイル (lib/works.json など) や、直接TypeScriptの配列として定義 (lib/worksData.ts) しておき、app/works/page.tsx (RSC) 内でインポートして利用します。
  TypeScript
  // lib/worksData.ts (例)
  export const works = },
    { id: ‘project-b’, title: ‘プロジェクトB’, description: ‘説明文…’, imageSrc: ‘/images/work-b.jpg’, tech: },
  ];
  
• 作品一覧ページの作成 (app/works/page.tsx):
  TypeScript
  // app/works/page.tsx
  import { works } from ‘@/lib/worksData’; // 作品データをインポート
  import ProjectCard from ‘@/components/ProjectCard’; // カードコンポーネント
  
  export default function WorksPage() {
    return (
      <div>
        <h1 className=”text-3xl font-bold mb-6″>Works</h1>
        <div className=”grid grid-cols-1 md:grid-cols-2 gap-6″>
          {works.map((work) => (
            // ProjectCardコンポーネントにデータを渡して表示
            <ProjectCard key={work.id} {…work} />
          ))}
        </div>
      </div>
    );
  }
  
• 作品カードコンポーネント (components/ProjectCard.tsx):
  <Image> コンポーネントを使って画像を最適化し、<Link> コンポーネントで詳細ページへのリンクを設定します 39。
  JavaScript
  // components/ProjectCard.tsx
  import Image from ‘next/image’;
  import Link from ‘next/link’;
  
  interface ProjectCardProps {
    id: string;
    title: string;
    imageSrc: string;
    description: string;
    tech?: string;
  }
  
  export default function ProjectCard({ id, title, imageSrc, description, tech }: ProjectCardProps) {
    return (
      <div className=”border rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300″>
        <Link href={`/works/${id}`}> {/* 詳細ページへのリンク */}
            <Image
              src={imageSrc}
              alt={title}
              width={500} // 画像のアスペクト比に合わせて調整
              height={300}
              className=”w-full h-48 object-cover” // Tailwind CSSでスタイリング
            />
            <div className=”p-4″>
              <h3 className=”text-xl font-semibold mb-2″>{title}</h3>
              <p className=”text-gray-700 text-sm mb-3″>{description}</p>
              {tech && (
                <div className=”flex flex-wrap gap-2 mb-3″>
                  {tech.map(t => <span key={t} className=”bg-gray-200 text-xs px-2 py-1 rounded”>{t}</span>)}
                </div>
              )}
              <span className=”text-blue-600 hover:underline text-sm”>詳細を見る →</span>
            </div>
        </Link>
      </div>
    );
  }
  
• 画像の配置:
  使用する画像ファイル（例: work-a.jpg）は、プロジェクトルートの public/images ディレクトリなどに配置します 39。<Image> の src 属性には /images/work-a.jpg のように public からの相対パスを指定します。

これらの手順で、基本的なポートフォリオサイトの骨組みが完成します。あとは各ページの内容を充実させ、CSSでデザインを整えていけば、オリジナルのポートフォリオサイトが出来上がります。

これらの例は、Next.jsの主要な機能が実際のアプリケーション開発でどのように活用されるかを示しています。ファイルシステムベースルーティングによる簡単なページ作成、レンダリング戦略の選択（ここでは主にSSG）、RSC内でのデータアクセス、そして組み込みの画像最適化などが組み合わさることで、効率的かつ高性能なWebアプリケーション開発が可能になることがわかります。

5. まとめ：Next.jsを選ぶメリットと学習の次の一歩

ここまで、Next.jsの基本的な概念から主要機能、最新の技術動向、そして具体的なアプリケーション例までを解説してきました。最後に、Next.jsを選ぶことのメリットを再確認し、これから学習を始める方への次の一歩となるリソースを紹介します。

Next.jsの強みの再確認

Next.jsは、Reactを用いたWebアプリケーション開発において、多くの強力な利点を提供します。

• 開発効率とパフォーマンスの両立: ファイルシステムベースルーティング、組み込みの最適化機能（画像、フォント、コード分割）、多様なレンダリング戦略（SSR, SSG, ISR）などを提供し、開発者が効率的に高性能なアプリケーションを構築できるよう支援します ³。設定よりも規約（Convention over Configuration）のアプローチにより、多くの定型的な作業が自動化されています。
• 優れた開発者体験 (DX): 高速なリフレッシュ機能（Fast Refresh）、直感的なAPI、充実したTypeScriptサポート、活発なコミュニティと豊富なエコシステム（ライブラリ、ツール、テンプレート）により、開発プロセスが快適になります ³。
• SEOフレンドリー: サーバーサイドでのHTML生成機能（SSR/SSG）により、検索エンジンがコンテンツを容易にインデックスでき、SEOパフォーマンスの向上が期待できます ³。
• フルスタック開発能力: APIルート（Route Handlers）やServer Actionsにより、フロントエンドとバックエンドのロジックを一つのプロジェクトで管理でき、フルスタックアプリケーションの開発を簡素化します ²。
• 最先端技術への追従: React Server Components、Server Actions、Turbopack、Partial Prerenderingといった最新のWeb技術やReactの機能を積極的に取り入れ、フレームワークを進化させ続けています ²³。

これらの強みにより、Next.jsは現代のWebアプリケーション開発における有力な選択肢となっています。

どんなプロジェクトに適しているか

Next.jsはその柔軟性から、非常に幅広い種類のプロジェクトに適しています。

• 静的サイト: ブログ、ポートフォリオサイト、ドキュメントサイト、企業のランディングページなど、コンテンツの更新頻度が比較的低いサイト。SSGやISRを活用することで、非常に高速な表示と低い運用コストを実現できます ³。
• 動的サイト: Eコマースサイト、マーケティングキャンペーンサイト、SNS風アプリケーション、管理ダッシュボードなど、ユーザーインタラクションが多く、データが頻繁に更新されるサイト。SSRやISR、クライアントサイドフェッチ、Server Actionsなどを組み合わせることで、リアルタイム性とパフォーマンスを両立できます ³。
• API機能を持つフルスタックアプリケーション: フロントエンドと簡単なバックエンド機能を統合したい場合。APIルートやServer Actionsが役立ちます ³。
• 大規模エンタープライズアプリケーション: そのスケーラビリティ、エコシステムの成熟度、TypeScriptサポートなどから、大規模で複雑な要件を持つプロジェクトにも採用されています ¹⁴。

基本的に、Next.jsは小規模な個人プロジェクトから大規模な商用サービスまで、静的なコンテンツ配信から高度にインタラクティブなWebアプリケーションまで、あらゆる規模と種類のWeb開発ニーズに対応できる汎用性の高いフレームワークです ⁷。

学習リソース紹介

Next.jsの学習を始めるにあたり、役立つリソースは数多く存在します。

• 公式ドキュメント:

• Next.js 公式ドキュメント (英語): https://nextjs.org/docs ¹ – 最も正確かつ最新の情報源です。基礎から応用まで網羅されています。
• Next.js 日本語ドキュメント: https://nextjsjp.org/ ⁵ – Next.js 15に対応し、公式ドキュメントと同期されています。初心者にも分かりやすく書かれていますが、HTML、CSS、Reactの基本的な知識があるとよりスムーズに学習を進められます ⁷¹。
• 公式チュートリアル:
• Next.jsの基本的な使い方を段階的に学べるインタラクティブなチュートリアルが公式ドキュメント内に用意されています ⁷³。実際にコードを書きながら学べるため、初心者におすすめです。
• オンライン記事・ブログ・動画:

• Qiita, Zenn: 日本語での技術記事が多く投稿されており、具体的な実装例やTipsが見つかります ⁸。
• YouTube: チュートリアル動画や解説動画が多数公開されています ⁷⁶。
• 企業提供の教材:
• 日本オラクル社やリクルート社などが、ReactやNext.jsに関する学習教材を公開している場合があります ⁷²。
• コミュニティ:

• GitHub Discussions: Next.jsリポジトリ内のDiscussionsでは、機能に関する議論やRFC（Request for Comments）が公開されており、開発の方向性を知ることができます ⁷⁸。
• Stack Overflow, Discord: 具体的な問題に詰まった際に質問できる場として活用できます。

まずは公式ドキュメントの「Getting Started」やチュートリアルから始め、基本的な概念を理解した上で、興味のある機能や作りたいアプリケーションに合わせて、これらのリソースを活用していくのが良いでしょう。

Next.jsの将来性

Next.jsは、Vercelという強力な企業によって開発が主導されており、フルタイムのコアチームと世界中の3,000人以上のコントリビューターによって支えられています ⁸。Reactチーム（Meta）やAuroraチーム（Google）とも協力関係にあり ⁸⁰、Reactエコシステムの中核的なフレームワークとしての地位を確立しています ⁶¹。

Next.js Confのようなカンファレンスも定期的に開催され、最新のアップデートや将来の方向性が共有されています ⁵¹。Next.js 15のリリースやTurbopackの安定化、キャッシュ戦略の見直しなどに見られるように、パフォーマンス、開発体験、そして最新技術への適応を常に追求しており、今後もWeb開発のトレンドを牽引していくフレームワークであり続けることが期待されます ⁵⁰。

Next.jsを学ぶことは、単に一つのフレームワークを習得するだけでなく、現代的なWeb開発のベストプラクティスやReactの最先端機能に触れることでもあります。この記事が、あなたのNext.js学習の第一歩となり、より効率的で質の高いWeb開発への扉を開く一助となれば幸いです。

引用文献

1. Next.jsの公式ドキュメントを、ChatGPTで翻訳 + 要約しながらさっくり読んでみる(Getting Started編) – Zenn, 4月 30, 2025にアクセス、 https://zenn.dev/kigi/articles/5b063cf9dfbe95
2. Introduction | Next.js, 4月 30, 2025にアクセス、 https://nextjs.org/docs
3. Next.jsとReactの違いは？特徴やできること、選ぶ基準を解説 – Freelance hub, 4月 30, 2025にアクセス、 https://freelance-hub.jp/column/detail/488/
4. フロントエンド未経験でもわかる Next.js の概要 – Zenn, 4月 30, 2025にアクセス、 https://zenn.dev/cloud_ace/articles/nextjs-basics-for-non-frontend-devs
5. Next.js 日本語ドキュメント, 4月 30, 2025にアクセス、 https://nextjsjp.org/
6. Next.jsとは？Reactとの違いやできること、メリット・デメリットまで解説 – Jitera, 4月 30, 2025にアクセス、 https://jitera.com/ja/insights/19002
7. Next.jsとは 人気のJavaScriptフレームワークの基本を解説 – Kinsta, 4月 30, 2025にアクセス、 https://kinsta.com/jp/knowledgebase/next-js/
8. Next.jsの特徴と市場動向 #React – Qiita, 4月 30, 2025にアクセス、 https://qiita.com/ogison/items/4a0e42edd7079d839263
9. Comparison of Web Page Rendering Methods Based on Next.js Framework Using Page Loading Time Test – IKADO E-Journal, 4月 30, 2025にアクセス、 https://ejournal.ikado.ac.id/index.php/teknika/article/download/769/310
10. Next.jsとはReactベースのフレームワーク！Nuxt.jsとの違いや特徴は？【入門編】 – ウェブスタッフ, 4月 30, 2025にアクセス、 https://www.webstaff.jp/guide/trend/webit/nextjs/
11. SSR vs. SSG in Next.js – Strapi, 4月 30, 2025にアクセス、 https://strapi.io/blog/ssr-vs-ssg-in-nextjs-differences-advantages-and-use-cases
12. Next.js Rendering Strategies: SSR, SSG, and ISR Compared, 4月 30, 2025にアクセス、 https://hybridheroes.de/blog/2023-05-31-next-js-rendering-strategies/
13. Server Actions vs API Routes in Next.js 15 – Which Should I Use? – Wisp CMS, 4月 30, 2025にアクセス、 https://www.wisp.blog/blog/server-actions-vs-api-routes-in-nextjs-15-which-should-i-use
14. Remix vs Nextjs 2025 comparison – Merge Rocks, 4月 30, 2025にアクセス、 https://merge.rocks/blog/remix-vs-nextjs-2025-comparison
15. Next.jsとは？特徴やメリット・デメリット、Reactとの関連性を解説 – 株式会社GeNEE, 4月 30, 2025にアクセス、 https://genee.jp/contents/next-js/
16. Next.jsで始めるページ遷移 : Pageルーターの使い方 – Qiita, 4月 30, 2025にアクセス、 https://qiita.com/toumayuetian/items/07f6d401d3f0483317f5
17. はじめに – Next.js, 4月 30, 2025にアクセス、 https://nextjs-ja-translation-docs.vercel.app/docs/getting-started
18. JavaScriptフレームワーク「Next.js」とは？Reactとの違いや導入方法を解説 – MESCIUS.devlog, 4月 30, 2025にアクセス、 https://devlog.mescius.jp/nextjs-quickstart/
19. Routing: はじめに – Next.js, 4月 30, 2025にアクセス、 https://nextjs-ja-translation-docs.vercel.app/docs/routing/introduction
20. Building Your Application: Routing | Next.js, 4月 30, 2025にアクセス、 https://nextjs.org/docs/app/building-your-application/routing
21. App Routerの基本的な仕組みとファイル構造 – Zenn, 4月 30, 2025にアクセス、 https://zenn.dev/blueish/articles/4b2ae3781ade57
22. Next.js 13の新機能総まとめ：SSRとAPIルートのベストプラクティス – RESUMY.ai, 4月 30, 2025にアクセス、 https://www.resumy.ai/tech-posts/851a7e73-c697-4e25-a460-077e9888a099
23. Next.js 13.4, 4月 30, 2025にアクセス、 https://nextjs.org/blog/next-13-4
24. Building Your Application: Rendering – Next.js, 4月 30, 2025にアクセス、 https://nextjs.org/docs/pages/building-your-application/rendering
25. Next.jsのレンダリング方法「CSR/SSR/SSG/ISR」について図解する …, 4月 30, 2025にアクセス、 https://qiita.com/Dragon1208/items/feac42eb9668a5f75250
26. Next.js Server-side Rendering vs. Static Site Generation – Prismic, 4月 30, 2025にアクセス、 https://prismic.io/blog/nextjs-ssr-vs-ssg
27. SSR, CSR, SSG, ISG, ISRとは？それぞれの基本的な定義と特徴を解説 | 株式会社一創, 4月 30, 2025にアクセス、 https://www.issoh.co.jp/tech/details/2335/
28. Rendering: Client Components – Next.js, 4月 30, 2025にアクセス、 https://nextjs.org/docs/app/building-your-application/rendering/client-components
29. 【Next.js14】CSR・SSR・SSG・ISRの違いと実装方法 – Qiita, 4月 30, 2025にアクセス、 https://qiita.com/whopper1962/items/1d1a7179845b3e1d3084
30. Next.jsにおける主要なレンダリング方法の種類と概要 – 株式会社一創, 4月 30, 2025にアクセス、 https://www.issoh.co.jp/tech/details/3791/
31. Next.jsでブログを作る時のSSR/ISR/SSGのそれぞれを軽くまとめてみる – Zenn, 4月 30, 2025にアクセス、 https://zenn.dev/iz_pixel/scraps/f04ee6e339b201
32. Next.js レンダリング方法（CSR,SSR,SSG,ISR,PPR）とウェブアプリケーションの構築手法（SPA）, 4月 30, 2025にアクセス、 https://zenn.dev/nenenemo/articles/e10c3caf6dee36
33. 【Next.js】CSR/SSR/SSG/ISRの違いについて – Zenn, 4月 30, 2025にアクセス、 https://zenn.dev/dirtyman/scraps/bbaadb135e5635
34. Deep Dive: Caching | Next.js, 4月 30, 2025にアクセス、 https://nextjs.org/docs/app/deep-dive/caching
35. Data Fetching: Server Actions and Mutations | Next.js, 4月 30, 2025にアクセス、 https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations
36. Next.js 15 RC, 4月 30, 2025にアクセス、 https://nextjs.org/blog/next-15-rc
37. 9 Key Next.js Developer Skills You Need in Your Team – Syntactics Inc., 4月 30, 2025にアクセス、 https://syntacticsinc.com/news-articles-cat/key-nextjs-developer-skills-need-team/
38. Next.js 15.3, 4月 30, 2025にアクセス、 https://nextjs.org/blog/next-15-3
39. React・Next.jsでのポートフォリオサイト完全制作チュートリアル …, 4月 30, 2025にアクセス、 https://tech-mentor.dev/blog/specialfeature/1826/
40. Next.jsのいろいろなレンダリング方法を確認する – DevelopersIO, 4月 30, 2025にアクセス、 https://dev.classmethod.jp/articles/nextjs-rendering/
41. Sveltekit vs. Next.js: A side-by-side comparison | Hygraph, 4月 30, 2025にアクセス、 https://hygraph.com/blog/sveltekit-vs-nextjs
42. What Next.js Tech Stack to Try in 2025: A Developer’s Guide to Modern Web Development, 4月 30, 2025にアクセス、 https://www.wisp.blog/blog/what-nextjs-tech-stack-to-try-in-2025-a-developers-guide-to-modern-web-development
43. Layouts RFC – Next.js, 4月 30, 2025にアクセス、 https://nextjs.org/blog/layouts-rfc
44. Rendering: Server Components | Next.js, 4月 30, 2025にアクセス、 https://nextjs.org/docs/app/building-your-application/rendering/server-components
45. Next.js 15, 4月 30, 2025にアクセス、 https://nextjs.org/blog/next-15
46. Turbopack – API Reference – Next.js, 4月 30, 2025にアクセス、 https://nextjs.org/docs/app/api-reference/turbopack
47. Architecture: Turbopack | Next.js, 4月 30, 2025にアクセス、 https://nextjs.org/docs/14/architecture/turbopack
48. Next.js 15.2, 4月 30, 2025にアクセス、 https://nextjs.org/blog/next-15-2
49. Next.js 15 Stable Release is Live – Pagepro, 4月 30, 2025にアクセス、 https://pagepro.co/blog/react-tldr/next-js-15-stable-release-is-live/
50. The latest Next.js news, 4月 30, 2025にアクセス、 https://nextjs.org/blog
51. Recap: Next.js Conf 2024 – Vercel, 4月 30, 2025にアクセス、 https://vercel.com/blog/recap-next-js-conf-2024
52. Next.js conference 2024 recap by Ncoded Solutions: What’s new in Next.js 15? #14, 4月 30, 2025にアクセス、 https://ncodedsolutions.com/fr/articles/next-js-conference-2024-recap-by-ncoded-solutions-what-s-new-in-next-js-15
53. Why is no one talking about the Next.js conf 2024? Was it that uninspiring? – Reddit, 4月 30, 2025にアクセス、 https://www.reddit.com/r/nextjs/comments/1gcufif/why_is_no_one_talking_about_the_nextjs_conf_2024/
54. Next.js 14 | Next.js, 4月 30, 2025にアクセス、 https://nextjs.org/blog/next-14
55. SvelteKit vs. Next.js: Which Should You Choose in 2025? – Prismic, 4月 30, 2025にアクセス、 https://prismic.io/blog/sveltekit-vs-nextjs
56. Next.js Conf 2024 Highlights and React Framework Future – FocusReactive, 4月 30, 2025にアクセス、 https://focusreactive.com/next-js-conf-2024-highlights-and-react-framework-future/
57. Next.js App Router Caching: Explained! – YouTube, 4月 30, 2025にアクセス、 https://www.youtube.com/watch?v=VBlSe8tvg4U&pp=0gcJCdgAo7VqN5tD
58. Upgrading: Version 15 – Next.js, 4月 30, 2025にアクセス、 https://nextjs.org/docs/app/guides/upgrading/version-15
59. Why I’m Using Next.js – Lee Robinson, 4月 30, 2025にアクセス、 https://leerob.io/blog/using-nextjs
60. Is Next.js Using Unreleased Experimental React Features? – Konadu.Dev, 4月 30, 2025にアクセス、 https://konadu.dev/is-nextjs-using-unreleased-experimental-react-features
61. Is Next.js Using Unreleased Experimental React Features? : r/reactjs – Reddit, 4月 30, 2025にアクセス、 https://www.reddit.com/r/reactjs/comments/17ky4lp/is_nextjs_using_unreleased_experimental_react/
62. It was fun Next.js – but I’m moving to Remix : r/nextjs – Reddit, 4月 30, 2025にアクセス、 https://www.reddit.com/r/nextjs/comments/19ejxbd/it_was_fun_nextjs_but_im_moving_to_remix/
63. Next.js conference 2024 recap by Ncoded Solutions: What’s new in Next.js 15? #14, 4月 30, 2025にアクセス、 https://ncodedsolutions.com/en/articles/next-js-conference-2024-recap-by-ncoded-solutions-what-s-new-in-next-js-15
64. Next.js 15.1, 4月 30, 2025にアクセス、 https://nextjs.org/blog/next-15-1
65. Next.jsを使ったポートフォリオサイトの作り方 完全ガイド – WebApp Blog, 4月 30, 2025にアクセス、 https://webapp-blog.com/entry/nextjs-portfolio-site/
66. Building a blog with Next.js 15 and React Server Components – Max Leiter, 4月 30, 2025にアクセス、 https://maxleiter.com/blog/build-a-blog-with-nextjs-13
67. React / Next.jsで作るポートフォリオの例やポイントを紹介！ | 模写修行メディア, 4月 30, 2025にアクセス、 https://moshashugyo.com/media/react-portfolio
68. Next.js 13でポートフォリオサイトを作ってみる – Qiita, 4月 30, 2025にアクセス、 https://qiita.com/Mk459/items/0137f204e9373ed58497
69. The Future of Next.js: A Dramatic Change in Web Development – StaticMania, 4月 30, 2025にアクセス、 https://staticmania.com/blog/the-future-of-next-js
70. Next.js vs Nuxt vs SvelteKit: Choosing the Right Framework for SaaS Development, 4月 30, 2025にアクセス、 https://supastarter.dev/blog/nextjs-vs-nuxt-vs-sveltekit-for-saas-development
71. はじめに – Next.js 日本語ドキュメント, 4月 30, 2025にアクセス、 https://nextjsjp.org/docs
72. 【ぜ～んぶ無料！】React/Next.jsの最強教材たちを紹介するぜ – Qiita, 4月 30, 2025にアクセス、 https://qiita.com/Dragon1208/items/db2d9329e8ae10ef6f52
73. 公式チュートリアルでNext.jsに入門してみた (1) 〜アプリ新規作成、ページ遷移、スタイリング編, 4月 30, 2025にアクセス、 https://dev.classmethod.jp/articles/introduction-to-nextjs/
74. 大幅にリニューアルされた Next.js のチュートリアルをどこよりも早く全編和訳しました – Qiita, 4月 30, 2025にアクセス、 https://qiita.com/thesugar/items/01896c1faa8241e6b1bc
75. Next.js 13のApp Routerを活用した未来志向のポートフォリオサイト – Qiita, 4月 30, 2025にアクセス、 https://qiita.com/YushiYamamoto/items/a2dd8b59c49541729463
76. 【日本一わかりやすいNext.js入門】#1 講座の概要 – YouTube, 4月 30, 2025にアクセス、 https://www.youtube.com/watch?v=F77RUjHZEAc
77. Full-Stack Blog App Tutorial | Next.js MongoDB Blog App Project Full Course – YouTube, 4月 30, 2025にアクセス、 https://www.youtube.com/watch?v=DpYE5zPDRVQ&pp=0gcJCdgAo7VqN5tD
78. RFC: `experimental.typedRoutes` feature extensions · vercel next.js · Discussion #55499, 4月 30, 2025にアクセス、 https://github.com/vercel/next.js/discussions/55499
79. Layouts · vercel next.js · Discussion #37136 – RFC – GitHub, 4月 30, 2025にアクセス、 https://github.com/vercel/next.js/discussions/37136
80. Governance | Next.js by Vercel – The React Framework, 4月 30, 2025にアクセス、 https://nextjs.org/governance
81. Next.js Conf 2024 Summary – Pagepro, 4月 30, 2025にアクセス、 https://pagepro.co/blog/react-tldr/next-js-conf-2024-summary/
82. Next.js Conf 2024: Innovation and Community at The Midway – The Midway SF, 4月 30, 2025にアクセス、 https://corporate.themidwaysf.com/nextjs-conference/
83. Next.js Conf by Vercel, 4月 30, 2025にアクセス、 https://nextjs.org/conf

Like