ブログblog

Next.jsとは

Writer： tokuyasu　更新日：2025/05/09

こんにちは、デジナーレ福岡オフィスの徳安です。

今回は、Reactを使用している方に向けて、

Next.jsの基本とそのメリットについて解説します。

「Reactは使っているけど、Next.jsって何？」「導入すると何が変わるの？」

そんな疑問をお持ちの方はぜひ読んで見てください。

Next.jsとは？

Next.jsは、Reactをベースとしたフレームワークで、

サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）など、

React単体では実現しにくい機能を簡単に実装できます。

これにより、パフォーマンスの向上やSEO対策が容易になります。

React単体では、以下のような課題があります。

★ クライアントサイドでデータを取得するため、ページ表示が遅くなる
★ルーティングの設定が面倒（React Routerを使って独自に設定する必要がある）
★ SEO対策が難しく、検索エンジンにページが正しく認識されにくい

これらの課題をNext.jsを使うことで、次のように解決できます。

★ データ取得のタイミングを選べるため、ページ表示が速い
★ ファイルを作るだけでルーティングが自動設定される
★ 簡単にSEO対策ができる

Next.jsの主な特徴

ファイルベースのルーティング

pagesディレクトリにファイルを配置するだけで、自動的にルーティングが設定されます。

// pages/index.tsx
const Home = () => {
  return <h1>ホームページ</h1>;
};
export default Home;

// pages/about.js
const About = () => {
  return <h1>About Page</h1>;
};
export default About;

// pages/index.tsx

const Home = () => {

return <h1>ホームページ</h1>;

};

export default Home;

// pages/about.js

const About = () => {

return <h1>About Page</h1>;

};

export default About;

例えば、下記のように、この2つのファイルを作るだけで、以下のURLでアクセスすることができます。

★ http://localhost:3000/ → ホームページ
★ http://localhost:3000/about → Aboutページ

ルーティングの設定が不要で、とてもシンプルなコードになります。

サーバーサイドレンダリング（SSR）と静的サイト生成（SSG）のサポート

Next.jsでは、ページごとにSSRやSSGを選択できます。

これにより、ページの表示速度やデータの最新性を考慮して最適な方法を選択できます。

■SSG（静的サイト生成）

SSG（静的サイト生成）では、ページをビルド時にあらかじめ生成します。

主にサイトの内容が変わらない場合に適しています。

Next.jsではデフォルトでSSGが適用されます。

SSGのメリット：

★ ページは事前に生成されているため、アクセス時にすぐに表示される
★ ページの読み込みが非常に高速
★ 検索エンジンに対するSEO対策が強化される。

SSGは、ビルド時にページを生成するため、

ユーザーがアクセスした際に即座にページが表示され、パフォーマンスに優れています。

■SSR（サーバーサイドレンダリング）

SSRでは、アクセス時にページを作成します。

これにより、常に最新のデータをページに反映させることができます。

特に、リアルタイムで更新されるデータが必要なページに適しています。

SSRのメリット：

★ リアルタイムデータを表示することができ、常に最新のコンテンツがユーザーに提供される
★ ページに必要なデータがサーバーサイドで取得されるため、SEO対策も可能

export const getServerSideProps = async () => {
  const data = await fetch("https://api.example.com/posts").then((res) =>
    res.json()
  );
  return { props: { data } };
};

export const getServerSideProps = async () => {

const data = await fetch("https://api.example.com/posts").then((res) =>

res.json()

);

return { props: { data } };

};

SSRでは、毎回ページがリクエストされるたびに最新のデータを取得し、ページを生成します。

たとえば、ユーザーのダッシュボードや在庫管理ページなど、データが頻繁に更新される場合に有効です。

画像の最適化

Next.jsでは、next/imageコンポーネントを使用することで、画像の自動最適化や遅延読み込み（Lazy Loading）が可能になります。

これにより、画像が多いページでもパフォーマンスを向上させることができます。

import Image from 'next/image';
export default function Profile() {
  return (
    <Image
      src="/profile.jpg"
      alt="Profile Picture"
      width={500}
      height={500}
    />
  );
}

import Image from 'next/image';

export default function Profile() {

return (

<Image

src="/profile.jpg"

alt="Profile Picture"

width={500}

height={500}

);

}

通常の<img>タグを使用する代わりに、Next.jsのnext/imageを使うことで、

画像が自動的に最適化され、読み込み速度が向上します。

next/imageの利点：

★ 遅延読み込み（Lazy Loading）：画像はスクロールするまで読み込まれないため、ページの初期表示が速くなり、ユーザー体験が向上する
★ サイズ調整＆圧縮：表示サイズに合わせて画像が自動的に調整され、無駄なデータ転送を削減することで、ページの表示が高速になる
★ SEO対策：適切に画像が読み込まれることで、検索エンジンに対するSEO効果も期待できる

画像が多いサイトや、パフォーマンスを重視するページでは、

next/imageを使うことで、大幅にパフォーマンス向上が期待できます。

SEO対策

Next.jsでは、next/headを使ってページごとに<title>や<meta>タグを設定できます。

これにより、検索エンジンやSNSでの表示を最適化できます。

import Head from "next/head";
const About = () => {
  return (
    <>
      <Head>
        <title>Aboutページ</title>
        <meta name="description" content="このサイトについての説明" />
      </Head>
      <h1>このサイトについて</h1>
    </>
  );
};
export default About;