Next.jsでシングルページアプリケーションを構築する方法

Next.jsはシングルページアプリケーション（SPA）の構築を完全にサポートしています。

これには、プリフェッチによる高速なルート遷移、クライアントサイドでのデータ取得、ブラウザAPIの使用、サードパーティ製クライアントライブラリとの統合、静的ルートの作成などが含まれます。

既存のSPAをお持ちの場合、コードを大幅に変更することなくNext.jsに移行できます。Next.jsを使用すると、必要に応じてサーバー機能を段階的に追加できます。

シングルページアプリケーション（SPA）とは？

SPAの定義は様々です。「厳密なSPA」を次のように定義します。

クライアントサイドレンダリング（CSR）: アプリケーションは1つのHTMLファイル（例: index.html）で提供されます。すべてのルート、ページ遷移、データ取得はブラウザのJavaScriptによって処理されます。
フルページリロードなし: 各ルートで新しいドキュメントをリクエストするのではなく、クライアントサイドのJavaScriptが現在のページのDOMを操作し、必要に応じてデータを取得します。

厳密なSPAでは、ページがインタラクティブになる前に大量のJavaScriptをロードする必要があることがよくあります。さらに、クライアントのデータウォーターフォールは管理が困難になる場合があります。Next.jsでSPAを構築することで、これらの問題を解決できます。

SPAでNext.jsを使用する理由

Next.jsはJavaScriptバンドルを自動的にコード分割し、異なるルートへの複数のHTMLエントリポイントを生成できます。これにより、クライアントサイドで不要なJavaScriptコードのロードを回避し、バンドルサイズを縮小してページロードを高速化できます。

next/linkコンポーネントはルートを自動的にプリフェッチし、厳密なSPAの高速なページ遷移を提供しますが、URLへのアプリケーションルーティング状態の永続化（リンクや共有のため）という利点もあります。

Next.jsは静的サイトとして、またはすべてがクライアントサイドでレンダリングされる厳密なSPAとしても開始できます。プロジェクトが成長した場合、Next.jsを使用すると、必要に応じてより多くのサーバー機能（例: React Server Components、Server Actionsなど）を段階的に追加できます。

例

SPAを構築するためによく使われる一般的なパターンと、Next.jsがそれらをどのように解決するかを見てみましょう。

Context Provider内でのReactの`use`の使用

親コンポーネント（またはレイアウト）でデータを取得し、Promiseを返し、Reactのuseフックでクライアントコンポーネントで値をアンラップすることをお勧めします。

Next.jsはサーバーで早期にデータ取得を開始できます。この例では、それがルートレイアウトです。アプリケーションのエントリポイントです。サーバーはすぐにクライアントに応答をストリーミングし始めることができます。

データ取得をルートレイアウトに「ホイスト」することで、Next.jsはアプリケーションの他のコンポーネントよりも早く指定されたリクエストを開始します。これにより、クライアントのウォーターフォールが排除され、クライアントとサーバー間の複数の往復が防止されます。また、サーバーがデータベースの場所に近い（理想的にはコロケーションされている）ため、パフォーマンスを大幅に向上させることもできます。

たとえば、ルートレイアウトを更新してPromiseを呼び出しますが、それを待たないでください。

import { UserProvider } from './user-provider'
import { getUser } from './user' // some server-side function
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  let userPromise = getUser() // do NOT await
 
  return (
    <html lang="en">
      <body>
        <UserProvider userPromise={userPromise}>{children}</UserProvider>
      </body>
    </html>
  )
}

Promiseをクライアントコンポーネントに渡して遅延させることもできますが、このパターンは通常、Reactのコンテキストプロバイダーと組み合わせて使用されます。これにより、カスタムReactフックを使用してクライアントコンポーネントから簡単にアクセスできるようになります。

PromiseをReactコンテキストプロバイダーに転送できます

'use client';
 
import { createContext, useContext, ReactNode } from 'react';
 
type User = any;
type UserContextType = {
  userPromise: Promise<User | null>;
};
 
const UserContext = createContext<UserContextType | null>(null);
 
export function useUser(): UserContextType {
  let context = useContext(UserContext);
  if (context === null) {
    throw new Error('useUser must be used within a UserProvider');
  }
  return context;
}
 
export function UserProvider({
  children,
  userPromise
}: {
  children: ReactNode;
  userPromise: Promise<User | null>;
}) {
  return (
    <UserContext.Provider value={{ userPromise }}>
      {children}
    </UserContext.Provider>
  );
}

最後に、任意のクライアントコンポーネントでuseUser()カスタムフックを呼び出し、Promiseをアンラップできます

'use client'
 
import { use } from 'react'
import { useUser } from './user-provider'
 
export function Profile() {
  const { userPromise } = useUser()
  const user = use(userPromise)
 
  return '...'
}

Promiseを消費するコンポーネント（例: 上記のProfile）はサスペンドされます。これにより、部分的ハイドレーションが可能になります。JavaScriptのロードが完了する前に、ストリーミングおよびプリレンダリングされたHTMLを確認できます。

SWRによるSPA

SWRは、人気のReactデータ取得ライブラリです。

SWR 2.3.0（およびReact 19以降）では、既存のSWRベースのクライアントデータ取得コードと並行して、サーバー機能の採用を段階的に進めることができます。これは、上記のuse()パターンの抽象化です。これは、データ取得をクライアントとサーバー間で移動したり、両方を使用したりできることを意味します。

クライアントのみ: useSWR(key, fetcher)
サーバーのみ: useSWR(key) + RSC提供データ
混合: useSWR(key, fetcher) + RSC提供データ

たとえば、アプリケーションを<SWRConfig>とfallbackでラップします。

import { SWRConfig } from 'swr'
import { getUser } from './user' // some server-side function
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <SWRConfig
      value={{
        fallback: {
          // We do NOT await getUser() here
          // Only components that read this data will suspend
          '/api/user': getUser(),
        },
      }}
    >
      {children}
    </SWRConfig>
  )
}

これはServer Componentであるため、getUser()はCookieやヘッダーを安全に読み取ったり、データベースと通信したりできます。個別のAPIルートは不要です。<SWRConfig>の下にあるクライアントコンポーネントは、同じキーでuseSWR()を呼び出してユーザーデータを取得できます。useSWRを使用するコンポーネントコードは、既存のクライアント取得ソリューションから**変更を必要としません**。

'use client'
 
import useSWR from 'swr'
 
export function Profile() {
  const fetcher = (url) => fetch(url).then((res) => res.json())
  // The same SWR pattern you already know
  const { data, error } = useSWR('/api/user', fetcher)
 
  return '...'
}

fallbackデータはプリレンダリングして初期HTMLレスポンスに含めることができ、その後useSWRを使用して子コンポーネントで即座に読み取ることができます。SWRのポーリング、再検証、キャッシングは引き続きクライアントサイドのみで実行されるため、SPAで頼りにしているすべてのインタラクティブ性が維持されます。

初期fallbackデータはNext.jsによって自動的に処理されるため、dataがundefinedかどうかをチェックするために以前必要だった条件付きロジックを削除できます。データがロード中の場合、最も近い<Suspense>境界はサスペンドされます。

	SWR	RSC	RSC + SWR
SSRデータ
SSR中のストリーミング
リクエストの重複排除
クライアントサイド機能

React QueryによるSPA

React Queryは、クライアントとサーバーの両方でNext.jsと共に使用できます。これにより、厳密なSPAを構築できるだけでなく、React Queryと組み合わせたNext.jsのサーバー機能も活用できます。

React Queryのドキュメントで詳細を確認してください。

ブラウザのみでコンポーネントをレンダリングする

クライアントコンポーネントはnext build中にプリレンダリングされます。クライアントコンポーネントのプリレンダリングを無効にして、ブラウザ環境でのみロードしたい場合は、next/dynamicを使用できます。

import dynamic from 'next/dynamic'
 
const ClientOnlyComponent = dynamic(() => import('./component'), {
  ssr: false,
})

これは、windowやdocumentのようなブラウザAPIに依存するサードパーティ製ライブラリに役立ちます。useEffectを追加してこれらのAPIの存在を確認し、存在しない場合はnullまたはプリレンダリングされるローディング状態を返すこともできます。

クライアントでのシャロー（浅い）ルーティング

Create React AppやViteのような厳密なSPAから移行する場合、URLの状態を更新するためにシャロー（浅い）ルーティングを行う既存のコードがあるかもしれません。これは、デフォルトのNext.jsファイルシステムルーティングを使用せずに、アプリケーション内のビューを手動で切り替えるのに役立ちます。

Next.jsでは、ネイティブのwindow.history.pushStateおよびwindow.history.replaceStateメソッドを使用して、ページをリロードせずにブラウザの履歴スタックを更新できます。

pushStateおよびreplaceStateの呼び出しは、Next.js Routerに統合され、usePathnameおよびuseSearchParamsと同期させることができます。

'use client'
 
import { useSearchParams } from 'next/navigation'
 
export default function SortProducts() {
  const searchParams = useSearchParams()
 
  function updateSorting(sortOrder: string) {
    const urlSearchParams = new URLSearchParams(searchParams.toString())
    urlSearchParams.set('sort', sortOrder)
    window.history.pushState(null, '', `?${urlSearchParams.toString()}`)
  }
 
  return (
    <>
      <button onClick={() => updateSorting('asc')}>Sort Ascending</button>
      <button onClick={() => updateSorting('desc')}>Sort Descending</button>
    </>
  )
}

Next.jsでのルーティングとナビゲーションの仕組みについて詳しく学んでください。

クライアントコンポーネントでのServer Actionsの使用

クライアントコンポーネントを使用しながら、Server Actionsを段階的に導入できます。これにより、APIルートを呼び出すためのボイラープレートコードを削除し、代わりにuseActionStateのようなReact機能を使用して、ローディング状態やエラー状態を処理できます。

たとえば、最初のServer Actionを作成します。

'use server'
 
export async function create() {}

JavaScript関数を呼び出すのと同様に、クライアントからServer Actionをインポートして使用できます。APIエンドポイントを手動で作成する必要はありません。

'use client'
 
import { create } from './actions'
 
export function Button() {
  return <button onClick={() => create()}>Create</button>
}

Server Actionsを使用したデータ更新について詳しく学んでください。

静的エクスポート（オプション）

Next.jsは、完全に静的なサイトを生成することもサポートしています。これは、厳密なSPAよりもいくつかの利点があります。

自動コード分割: 単一のindex.htmlを送信するのではなく、Next.jsはルートごとにHTMLファイルを生成するため、訪問者はクライアントJavaScriptバンドルを待つことなく、コンテンツをより速く取得できます。
ユーザーエクスペリエンスの向上: すべてのルートの最小限のスケルトンではなく、各ルートの完全にレンダリングされたページを取得できます。ユーザーがクライアントサイドでナビゲートすると、遷移はインスタントでSPAのようなままです。

静的エクスポートを有効にするには、構成を更新します。

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  output: 'export',
}
 
export default nextConfig

next buildを実行すると、Next.jsはアプリケーションのHTML/CSS/JSアセットを含むoutフォルダを作成します。

注意: 静的エクスポートではNext.jsサーバー機能はサポートされていません。詳細を確認してください。

既存プロジェクトをNext.jsに移行する

ガイドに従って、Next.jsへの段階的な移行が可能です。

Pages Routerを使用したSPAをすでに利用している場合は、App Routerへの段階的な採用方法を学ぶことができます。