nextjs 15で始めるReactアプリ開発：基本から実務活用までわかりやすく解説

フロントエンド開発•2025/1/26

はじめに

Reactでアプリケーションを作りたいと思ったとき、サーバーサイドの処理やファイル構成など、どこから手をつければいいか迷うことはないでしょうか。そんなとき役立つのが nextjs 15 です。このフレームワークを使うと、SSRやSSGなどの機能をシンプルに扱うことができます。さらに、Reactと組み合わせることで、初めてのWebアプリ開発でも明確なガイドラインが見えてきます。ここでは、最初の一歩として押さえておきたい基礎や、実際の現場で使われる具体的な利用シーンを紹介します。

この記事を読むとわかること

nextjs 15 が提供する機能の概要を理解できるようになります。 SSGやSSRをどう活用するのか、実務に近い形でイメージできるようになるでしょう。また、開発を始める際に最初に知っておくと便利なディレクトリ構成やルーティングの考え方も紹介します。これらを通じて、実際の制作フローがどうなるのかを把握しやすくなるはずです。

Next.jsとは何か

Next.js はReactをベースにしたフレームワークであり、SPA（Single Page Application）の弱点を補う手段として広く利用されています。 CSR（Client-Side Rendering）のみだと、最初の表示速度やSEOにおいて不利になるケースがありますよね。そこでSSR（Server-Side Rendering）やSSG（Static Site Generation）をサポートするNext.jsが重宝されています。このように、実行時にサーバーがHTMLを返す仕組みや、ビルド時に静的ファイルを生成する仕組みなどをうまく組み合わせられる点が特徴的です。

サーバーとフロントエンドをつなぐ存在

従来のReactアプリはフロントエンド部分が中心となっていました。しかし、ブラウザだけでは実現しづらい処理を行うためにはサーバーサイドの工夫が必要です。 Next.jsを使うと、同じプロジェクト内でサーバーサイドとクライアントサイドのコードをまとめて管理できるのが大きな利点です。初心者の皆さんにとっては、この「フロントエンドとサーバーをまたがる仕組み」が一見難しく見えるかもしれません。ただし、コードの書き方やプロジェクト構成がある程度定まっているので、慣れると分かりやすく感じるでしょう。

Next.js 15の基本構成とフォルダ構造

実際にプロジェクトを作るとき、どのようにフォルダを分ければいいのでしょうか。 Next.jsではルーティングやページ単位の設定が決められた構成で管理されるため、複雑になりにくい仕組みがあります。初心者の方でも「pages」ディレクトリ内にファイルを置くだけで新しいページを作ることができるのは嬉しいですよね。

代表的なディレクトリ

一般的なディレクトリの例を見てみましょう。以下のような構成で作業していくと、ページやコンポーネントの配置を把握しやすくなります。


my-nextjs15-app/
├─ pages/
│   ├─ index.jsx
│   ├─ about.jsx
│   └─ api/
│       └─ hello.js
├─ components/
│   └─ Layout.jsx
├─ public/
│   └─ favicon.ico
├─ styles/
│   └─ globals.css
└─ package.json

pages: ページに対応するコンポーネントを置くディレクトリです。
components: 複数のページで使い回す汎用コンポーネントをまとめます。
public: 画像やアイコンなどの静的ファイルを配置する場所です。
styles: グローバルや個別コンポーネント用のCSSをまとめます。

ここで覚えておきたいのは、pages ディレクトリに作成したファイルが自動的にルーティングされることです。例えば about.jsx を作れば /about というURLでアクセスできるようになります。

Next.jsがもたらす開発体験

Next.jsはReactと違って少し敷居が高い印象を受けるかもしれません。しかし、ページ単位の管理やAPIルーティングなど、使っているうちに「こうやればいいんだ」と自然に理解できる構造になっています。下記のような利点を実務で活かせると、より開発に取り組みやすくなるでしょう。

ページ単位のルーティング

シンプルなページ作成から複雑な動的ルーティングまで対応します。ページ数が増えてもコードが混在しにくいので、保守しやすいです。初心者でも、ページごとにコンポーネントファイルを用意しておけば完結するので気軽に始められます。

サーバーサイドのAPI連携

pages/api ディレクトリ内にファイルを作成すると、簡易的なAPIエンドポイントを用意できます。別途サーバーフレームワークを導入しなくても、認証処理や小規模なデータ操作などはカバーできるでしょう。実際の現場でも、フロントエンド寄りのAPI処理にはこの方法がよく使われています。

SSRとSSGを使い分ける

Next.jsの特徴的なポイントとして、SSR（Server-Side Rendering）とSSG（Static Site Generation）を使い分けられることがあります。これらを理解すると、ウェブサイトの速度や検索エンジン最適化でメリットを得やすくなります。

SSR（Server-Side Rendering）の仕組み

SSRでは、リクエストが来るたびにサーバー側でHTMLを生成して返します。ユーザー側がアクセスしたときにすでに完成したHTMLが渡されるため、表示が早く、SEO的にも有利になるケースがありますね。ただし、アクセスごとにサーバー処理が走るため、大量アクセス時のパフォーマンスには注意が必要です。


// pages/index.jsx
export async function getServerSideProps() {
  // ここでサーバーサイドの処理を行う
  const data = { message: "SSRで生成しています" };
  return {
    props: {
      data,
    },
  };
}

export default function Home({ data }) {
  return (
    <div>
      <h1>サーバーサイドレンダリングの例</h1>
      <p>{data.message}</p>
    </div>
  );
}

このように getServerSideProps を使うと、そのページはSSRとして動作します。実際の業務では、認証が必要なページや頻繁に変わるデータを扱うページでSSRが活かされることが多いです。

SSG（Static Site Generation）の使い所

一方で、公開前に一度だけ静的ファイルを生成しておきたい場合はSSGが便利です。例えば、ほとんど更新されないブログ記事などはSSGに向いています。生成した静的ファイルは高速に配信できるので、サーバーの負荷を抑えられるでしょう。


// pages/static.jsx
export async function getStaticProps() {
  // ここでビルド時に一度だけデータを取得する
  const data = { message: "SSGで生成しています" };
  return {
    props: {
      data,
    },
  };
}

export default function StaticPage({ data }) {
  return (
    <div>
      <h1>静的サイト生成の例</h1>
      <p>{data.message}</p>
    </div>
  );
}

SSG はビルド時にHTMLを作るため、配信時のサーバー負荷が最小化されるメリットがあります。データの更新頻度が低いページに使うと、効率的に運用しやすくなります。

ISR（Incremental Static Regeneration）の活用

SSGはビルド時に静的ファイルを生成するため、一度デプロイすると新しい情報にすぐ対応しにくい印象を持つかもしれません。そこで ISR を使うと、リクエストが来たタイミングで一部ページだけ再生成する仕組みを組み込めます。こうすることで、静的ファイルを配信しながらも、必要に応じてコンテンツを更新できるのです。

この特徴は、商品一覧ページやニュース記事のように、部分的に更新が必要なサイトに適しています。初心者の皆さんでも、動的なサイトと静的サイトの両方の利点を活かした設計がしやすいでしょう。

実務でのNext.js活用例

実際の開発プロジェクトでは、Next.jsをどのように利用することが多いのでしょうか。たとえば、ECサイトではSSRを使うことで商品情報をリアルタイムに反映し、SEO的な効果も狙います。一方で、滅多に更新されない固定ページはSSGにし、負荷対策と高速表示を両立します。

認証が必要なページでのSSR活用

ECサイトや会員制サービスでは、ユーザー情報をリアルタイムにチェックする必要があります。 Next.jsなら、サーバー側でログイン状態を判定し、結果に応じてページを出し分けることが可能です。これにより、未ログイン時はログインページへリダイレクトするといった制御を簡潔に実装できます。

動的に変わるデータの表示

ブログサイトやニュースサイトなど、データがよく変わるページにはSSRやISRを組み合わせると効率的です。ユーザーがアクセスしたタイミングで新しい情報を取得できるため、最新の状態を常に表示できます。一方で、アクセス頻度が低いページや更新の少ないページはSSGにすると、無駄なサーバー負荷を減らせます。

サーバーサイドレンダリングを多用しすぎると、サーバーコストが上がりやすくなります。適切な箇所に限ってSSRやISRを採用するバランス感覚が大切でしょう。

データフェッチの方法

Next.jsでデータを扱う場合、ページごとに最適なフェッチ方法を選ぶ必要があります。 getServerSideProps, getStaticProps, getStaticPaths など、目的に合わせてAPIを使い分けると、より洗練された設計がしやすいでしょう。このような仕組みをきちんと理解しておくと、REST APIやGraphQLなど外部サービスとの連携を行うときに便利です。

getServerSidePropsでのリアルタイムデータ取得

先ほども見たように、毎回サーバー経由でデータを取得したい場合は getServerSideProps を使います。例えば、在庫数やリアルタイムランキングなど、更新頻度が高いデータを扱うのに向いています。ただし、データベースや外部APIの応答速度によっては表示が遅くなるリスクがあるので、キャッシュを検討することも必要です。

getStaticPropsとISRの組み合わせ

アクセスが多いページでも、更新タイミングだけ再生成すれば十分な場合は、 getStaticProps とISRを組み合わせると良いでしょう。デプロイ後でも指定した時間間隔でページを再生成できるため、常に最新情報を提供したい場面で役立ちます。フルリビルドを頻繁に行わなくても、部分的な更新が可能になるので運用が楽になるのが魅力です。

Next.jsでのルーティングと動的ページ

Next.js 15のルーティングは、基本的に pages ディレクトリで完結できます。ファイルベースのルーティングは、初心者にとって概念的にわかりやすい仕組みと言えるでしょう。

動的ルーティングの考え方

[id].jsx のように、ファイル名を角括弧で囲むことで動的パラメータを受け取ります。例えば、 /items/123 にアクセスすると自動的に items/[id].jsx が呼び出されるわけです。


// pages/items/[id].jsx
export async function getServerSideProps(context) {
  const { id } = context.params;
  const data = { itemId: id, name: "サンプル商品" };
  return {
    props: {
      data,
    },
  };
}

export default function ItemDetail({ data }) {
  return (
    <div>
      <h1>商品ID: {data.itemId}</h1>
      <p>名前: {data.name}</p>
    </div>
  );
}

こうした仕組みを使えば、商品詳細ページやユーザープロフィールなど、多数のページを自動生成して管理できるようになります。

実践で注意したいポイント

基礎を押さえたうえで、実際のプロジェクトに入るときには以下のような点に注意してみてください。作業の効率化や品質の高いアプリづくりに直結しやすいです。

ディレクトリやファイル名の管理

自動ルーティングを使うときは、ディレクトリ構成とファイル名に神経を使うことが大切でしょう。チーム開発なら命名規則を統一して、意図せぬルーティングの混乱を避けたいところですね。

エラーハンドリングの工夫

SSRやISRのバックエンド処理が失敗した場合に、どう表示させるかを工夫する必要があります。サーバーエラーの際には、ユーザーが原因を特定できるようなページを用意しておくと親切です。データフェッチに失敗した場合でも、画面が真っ白にならないように例外処理を入れておくと安心できます。

開発中はページ単位でバグが発生する場合があるため、小まめにコンソールやログを確認することをおすすめします。

実装をスムーズに進めるコツ

前述のように、Next.jsはサーバーサイドとクライアントサイドを一括管理できますが、その分構成が複雑になりがちな面もあります。そこで、以下のような方法で実装をスムーズに進めるのも良いでしょう。

小さな単位で機能を実装する

最初から大きな機能を一度に作ろうとせず、ページ単位やコンポーネント単位で順番に仕上げていくと混乱しにくいです。特に、初心者の皆さんは「小さく作って動かす」を繰り返すとエラーが見つけやすくなります。

コンポーネントを使い回す

Reactの強みはコンポーネントを再利用しやすい点ですが、Next.jsでも同様です。レイアウトやボタン類をコンポーネント化して、全ページで一貫性を持たせると見た目やコードが整理されます。たとえば、共通ヘッダーやフッターを components/Layout.jsx にまとめると管理が楽になります。

まとめ

nextjs 15 を使うと、ReactアプリでもSSRやSSGを含めた柔軟な構成を簡単に扱えるようになります。初心者の皆さんには少し複雑に見えるかもしれませんが、ディレクトリ構成やルーティングが定型化されているので導入しやすいでしょう。実務では、商品ページをSSRで運用し、ほとんど更新のないページをSSGで配信するなどの使い分けが一般的です。このように、目的に合わせて最適な方法を選択すれば、サイトのパフォーマンスと開発効率を両立しやすくなります。

ぜひ、ここで紹介したポイントを参考にしながら、ReactとNext.jsを組み合わせたWebアプリ作りに取り組んでみてください。そうすることで、サーバーサイドとクライアントサイドがシームレスにつながる感覚をつかみやすくなるでしょう。