Next.jsでSPAを作ろう！画面がサクサク切り替わるWebアプリの仕組み
こんにちは、とまだです。
Webサイトを見ていて、ページ移動のたびに画面が真っ白になるのが気になったことはありませんか？
実は最近のWebアプリでは、画面の一部だけを書き換える技術が主流になっています。
今回は、Next.jsを使ったSPA（シングルページアプリケーション）について解説します。
SPAとは？日常に例えると
SPAを理解するには、まず従来のWebサイトとの違いを知る必要があります。
従来のWebサイトは「本をめくる」感じ
普通のWebサイトは、本のページをめくるようなものです。
新しいページを見るたびに、本を閉じて別のページを開き直します。
だから画面が一瞬真っ白になるんですね。
SPAは「ノートに書き足す」感じ
一方、SPAはノートの同じページに情報を書き足していくイメージです。
ページはそのままで、内容だけが変わっていきます。
つまり、画面全体を読み込み直さないので動作が速いんです。
なぜNext.jsでSPAを作るの？
Next.jsはReactをベースにしたフレームワークです。
でも、なぜNext.jsを選ぶのでしょうか？
理由1：ルーティングが自動で設定される
Next.jsでは、ファイルを作るだけでURLが決まります。
例えば、pages/about.jsを作ると/aboutでアクセスできます。
まるで、フォルダに書類を入れるだけで整理されるような感覚ですね。
理由2：Reactの知識がそのまま使える
ReactでコンポーネントをWebアプリできます。
つまり、新しいことを覚える量が少なくて済みます。
理由3：ページ移動がとにかく速い
SPAの最大の魅力は、ページ移動の速さです。
クリックした瞬間に画面が切り替わります。
まるでテレビのチャンネルを変えるような感覚です。
実際に作ってみよう
では、簡単なSPAを作ってみましょう。
プロジェクトの準備
まず、Next.jsのプロジェクトを作成します。
npx create-next-app my-spa-app
cd my-spa-app
npm run dev
このコマンドで開発サーバーが起動します。
http://localhost:3000にアクセスすると、アプリが表示されます。
2つのページを作る
次に、ホームページとアバウトページを作ります。
// pages/index.js
import Link from "next/link";
export default function HomePage() {
return (
<div>
<h1>ようこそ！</h1>
<p>これはホームページです。</p>
<Link href="/about">
アバウトページへ
</Link>
</div>
);
}
続いて、アバウトページも作成します。
// pages/about.js
import Link from "next/link";
export default function AboutPage() {
return (
<div>
<h1>私たちについて</h1>
<p>このサイトの説明ページです。</p>
<Link href="/">
ホームに戻る
</Link>
</div>
);
}
Linkコンポーネントを使うことで、ページ遷移がSPA方式になります。
画面全体がリロードされず、必要な部分だけが更新されるんです。
どんな場面で使うと便利？
SPAは、すべてのWebサイトに適しているわけではありません。
では、どんな場面で威力を発揮するのでしょうか？
向いているケース
以下のようなサービスでは、SPAが効果的です。
- 管理画面やダッシュボード
- チャットアプリ
- Todo管理ツール
- SNSのようなリアルタイム性が必要なサービス
これらに共通するのは、頻繁に画面を切り替える点です。
向いていないケース
逆に、以下のようなサイトには向きません。
- ブログサイト
- ニュースサイト
- 企業の紹介ページ
これらは更新頻度が低く、SEOが重要だからです。
SEO対策はどうする？
SPAの弱点は、検索エンジン対策（SEO）です。
なぜなら、JavaScriptで動的に内容を生成するからです。
メタ情報を設定する
Next.jsでは、Headコンポーネントを使ってメタ情報を設定できます。
import Head from "next/head";
export default function AboutPage() {
return (
<>
<Head>
<title>私たちについて - My SPA App</title>
<meta name="description" content="このサイトについての説明です" />
</Head>
<h1>私たちについて</h1>
<p>このサイトの説明ページです。</p>
</>
);
}
こうすることで、各ページに適切なタイトルと説明を設定できます。
ただし、完璧なSEO対策にはSSRやSSGとの組み合わせが必要です。
よくある質問
Q: SPAは難しそう...
A: 確かに最初は戸惑うかもしれません。
でも、基本的な仕組みを理解すれば大丈夫です。
まずは小さなアプリから始めてみましょう。
Q: 普通のWebサイトと何が違うの？
A: 一番の違いは、画面遷移の速さです。
普通のサイトは毎回全部読み込みますが、SPAは必要な部分だけ更新します。
だから操作がサクサクなんです。
Q: Next.js以外でもSPAは作れる？
A: もちろん作れます。
ReactやVue.jsでも可能です。
ただ、Next.jsは設定が簡単なので初心者におすすめです。
まとめ
今回は、Next.jsを使ったSPAの基本について解説しました。
SPAは画面遷移が速く、ユーザー体験が向上します。
ただし、すべてのサイトに適しているわけではありません。
まずは小さなプロジェクトで試してみてください。
実際に作ってみると、その便利さがよくわかるはずです。
著者について
とまだ
フルスタックエンジニア
Learning Next の創設者。Ruby on Rails と React を中心に、プログラミング教育に情熱を注いでいます。初心者が楽しく学べる環境作りを目指しています。
著者の詳細を見る →