はじめに (対象読者・この記事でわかること)

この記事は、Next.jsを使ったアプリケーション開発に携わっている方、特にgetInitialPropsからgetServerSidePropsへの移行を検討している方や、TypeScriptを用いてより型安全なデータ取得を実現したい方を主な対象読者としています。

この記事を読むことで、以下の点がわかるようになります。 * getInitialPropsとgetServerSidePropsの根本的な違いと、getServerSidePropsが推奨される理由。 * Next.jsのページコンポーネントでgetServerSidePropsを実装する基本的な方法。 * TypeScriptを活用して、getServerSidePropsで取得したデータの型を厳密に定義し、型安全な開発を進める方法。 * データ取得時のエラーハンドリングやリダイレクトの具体的な実装例。

Next.jsでは複数のデータフェッチ方法が提供されており、それぞれの特性を理解することは、パフォーマンスと開発効率の高いアプリケーションを構築する上で非常に重要です。本記事を通じて、getServerSidePropsの強力な機能を最大限に活用し、より堅牢なNext.jsアプリケーション開発の一助となれば幸いです。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。 * Next.jsの基本的なプロジェクト構築とページルーティングの概念。 * Reactの基本的なコンポーネント作成とプロパティ（props）の受け渡し。 * TypeScriptの基本的な型定義とインターフェースの利用方法。

Next.jsのデータフェッチ戦略：getServerSidePropsの重要性

Next.jsには、サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）を実現するための複数のデータフェッチメソッドが用意されています。かつてはgetInitialPropsが広く使われていましたが、現在はより目的に特化したgetServerSidePropsやgetStaticProps、getStaticPathsが推奨されています。ここでは、getInitialPropsとgetServerSidePropsの違い、そしてgetServerSidePropsのメリットについて掘り下げていきます。

getInitialPropsとgetServerSidePropsの違い

getInitialPropsは、Next.jsの初期バージョンから存在したデータフェッチメソッドで、サーバーサイドとクライアントサイドの両方で実行されるという特徴を持っていました。初回リクエスト時はサーバーで実行され、その後のクライアントサイドルーティング時はブラウザで実行されます。この柔軟性は一方で、実行環境の判断やキャッシュ戦略の制御を複雑にする要因にもなりました。

一方、getServerSidePropsは常にサーバーサイドで実行されます。これは、ページへのリクエストがあるたびに、サーバーでデータフェッチとHTML生成が行われることを意味します。この特性により、常に最新のデータをユーザーに提供できるという大きなメリットがあります。また、ビルド時に一度だけ実行されるgetStaticProps（静的サイト生成向け）とは異なり、リクエストごとの動的なデータに対応できます。

getServerSidePropsのメリット

getServerSidePropsを利用することには、以下のような多くのメリットがあります。

  1. SEO（検索エンジン最適化）に強い: ページがリクエストされるたびにサーバーでデータを取得し、完全にレンダリングされたHTMLを返すため、検索エンジンのクローラーが内容を正確にインデックスできます。これにより、動的なコンテンツでも高いSEO効果を期待できます。
  2. 常に最新のデータを提供: ユーザーがページにアクセスするたびにデータがフェッチされるため、常にリアルタイムに近い最新の情報を提供できます。ニュースサイトや株価情報など、頻繁に更新される情報を含むページに最適です。
  3. 機密情報の安全な扱い: サーバーサイドでのみ実行されるため、APIキーやデータベース接続情報といった機密性の高い情報を安全に扱うことができます。これらの情報はクライアントサイドに漏れることなく、サーバー内で完結します。
  4. 環境変数の適切な利用: クライアントサイドに公開したくない環境変数をgetServerSideProps内で安全に利用できます。NEXT_PUBLIC_プレフィックスを付けずに定義された環境変数は、サーバーサイドでのみアクセス可能です。
  5. 複雑なデータフェッチロジックの実行: サーバーの計算リソースを活用して、複数のAPIからのデータ統合や、データベースへの直接アクセスなど、クライアントサイドでは困難な複雑なデータ処理を実行できます。

これらのメリットを理解し、プロジェクトの要件に合わせてgetServerSidePropsを適切に活用することで、パフォーマンス、セキュリティ、開発効率の面で優れたNext.jsアプリケーションを構築することが可能になります。

Next.js + TypeScriptでgetServerSidePropsを実装する

ここでは、実際にNext.jsとTypeScriptを使ってgetServerSidePropsを実装する具体的な手順を解説します。型定義を適切に行うことで、データの取得からコンポーネントへの受け渡しまでを型安全に進めることができます。

ステップ1: 基本的なgetServerSidePropsの記述とデータ取得

まず、getServerSidePropsの基本的な構造を見ていきましょう。pagesディレクトリ内の任意のファイルで、getServerSidePropsという名前の非同期関数をexportすることで、そのページでサーバーサイドレンダリングが可能になります。

Tsx

// pages/products/[id].tsx (例: 商品詳細ページ)
import { GetServerSideProps, NextPage } from 'next';

// 取得するデータの型を定義
interface Product {
  id: string;
  name: string;
  price: number;
  description: string;
}

// ページコンポーネントに渡されるpropsの型を定義
interface ProductDetailPageProps {
  product: Product;
}

const ProductDetailPage: NextPage<ProductDetailPageProps> = ({ product }) => {
  if (!product) {
    return <div>商品が見つかりません。</div>;
  }

  return (
    <div>
      <h1>{product.name}</h1>
      <p>価格: ¥{product.price.toLocaleString()}</p>
      <p>{product.description}</p>
    </div>
  );
};

// getServerSidePropsの定義
export const getServerSideProps: GetServerSideProps<ProductDetailPageProps> = async (context) => {
  const { id } = context.params as { id: string }; // URLパラメータからidを取得

  try {
    // 外部APIからデータをフェッチする例
    // 環境変数を使用する場合、.env.local などに API_BASE_URL=http://localhost:3000/api と記述
    const res = await fetch(`${process.env.API_BASE_URL}/products/${id}`);

    if (!res.ok) {
      // HTTPエラーが発生した場合
      console.error(`API response was not ok: ${res.status}`);
      // 404ページへリダイレクト、またはエラーページを表示
      return { notFound: true };
    }

    const product: Product = await res.json();

    // 取得したデータをpropsとしてページコンポーネントに渡す
    return {
      props: {
        product,
      },
    };
  } catch (error) {
    console.error('Error fetching product data:', error);
    // エラー時は404ページへリダイレクト
    return { notFound: true };
  }
};

export default ProductDetailPage;

上記のコードでは、動的ルーティングの[id]から商品IDを取得し、それを元にAPIから商品データをフェッチしています。取得したデータはpropsオブジェクトとして返され、ページコンポーネントに渡されます。

ステップ2: TypeScriptでの型定義と型安全なデータ取得

TypeScriptを使用する最大のメリットは、コードの可読性と保守性を高め、実行時エラーを減らすことができる点です。getServerSidePropsにおいても、適切な型定義を行うことでその恩恵を最大限に受けることができます。

GetServerSideProps型の利用

Next.jsは、getServerSideProps関数の型を定義するためのGetServerSideProps型を提供しています。これはnextパッケージからインポートできます。

Typescript

import { GetServerSideProps } from 'next';

// GetServerSideProps<Props, Params>
// Props: ページコンポーネントに渡されるpropsの型
// Params: URLパラメータの型 (動的ルーティングの場合)
export const getServerSideProps: GetServerSideProps<ProductDetailPageProps, { id: string }> = async (context) => {
  // ...
};

このように型を指定することで、contextオブジェクトの構造や、propsとして何を返すべきかについてTypeScriptが補完やチェックを行ってくれます。特にcontext.paramsは、型を指定しないとParsedUrlQueryというジェネリックな型になるため、明示的に{ id: string }のように指定することで、より安全にアクセスできます。

取得データの型定義

APIから取得するデータの型を事前に定義しておくことも重要です。上記の例ではProductインターフェースを定義しました。これにより、APIレスポンスの構造とコンポーネント内で使用するデータの構造が一致していることを保証できます。

Typescript

interface Product {
  id: string;
  name: string;
  price: number;
  description: string;
}

ページコンポーネントのpropsの型定義

getServerSidePropsから渡されるpropsをページコンポーネントで受け取る際も、その型を明示的に指定します。

Typescript

interface ProductDetailPageProps {
  product: Product;
}

const ProductDetailPage: NextPage<ProductDetailPageProps> = ({ product }) => {
  // ...
};

これにより、productオブジェクトのプロパティ（例: product.name）にアクセスする際に、TypeScriptが型チェックを行い、存在しないプロパティへのアクセスなどを事前に警告してくれます。これは、大規模なアプリケーションやチーム開発において、非常に強力な安全策となります。

ステップ3: エラーハンドリングとリダイレクト

データフェッチは常に成功するとは限りません。APIエラー、ネットワークエラー、データが存在しない場合など、様々なケースを考慮したエラーハンドリングが不可欠です。

notFound: trueでの404ページ表示

getServerSidePropsの戻り値として{ notFound: true }を返すことで、Next.jsは自動的に404ページを表示します。これは、指定されたIDのデータが見つからない場合などに非常に便利です。

Typescript

// ... getServerSideProps内
const res = await fetch(`${process.env.API_BASE_URL}/products/${id}`);

if (!res.ok) { // APIからのレスポンスが200番台以外の場合
  return { notFound: true }; // 404ページへ
}

const product: Product = await res.json();
if (!product) { // データが空の場合など
  return { notFound: true };
}

// ...

redirectでのページ遷移

特定の条件が満たされた場合に別のページへリダイレクトさせたい場合は、redirectプロパティを使用します。

Typescript

// pages/admin.tsx (例: 管理者ページ)
import { GetServerSideProps, NextPage } from 'next';

const AdminPage: NextPage = () => {
  return <h1>管理者ページへようこそ！</h1>;
};

export const getServerSideProps: GetServerSideProps = async (context) => {
  // ここでユーザーの認証状態を確認する（例: Cookieからトークンを読み取る）
  const userIsAuthenticated = false; // 実際には認証ロジックをここに記述

  if (!userIsAuthenticated) {
    // 認証されていない場合、ログインページへリダイレクト
    return {
      redirect: {
        destination: '/login', // リダイレクト先のパス
        permanent: false,      // 一時的なリダイレクト (302)
      },
    };
  }

  return {
    props: {}, // 認証済みであれば空のpropsを返す
  };
};

export default AdminPage;

permanent: falseはHTTPステータスコード302（一時的なリダイレクト）、permanent: trueは301（永続的なリダイレクト）に対応します。SEOの観点からも適切に使い分けることが重要です。

ハマった点やエラー解決

getServerSidePropsの実装において、特に初心者が陥りがちな問題点と、その解決策をいくつか紹介します。

  1. ブラウザAPIへのアクセス: getServerSidePropsはサーバーサイドでのみ実行されるため、windowやdocumentといったブラウザ固有のグローバルオブジェクトにはアクセスできません。これらのAPIを使用しようとすると、ReferenceError: window is not definedのようなエラーが発生します。

  2. 環境変数の扱い: Next.jsでは環境変数を安全に管理するために、特定のルールがあります。.env.localなどに定義した環境変数は、デフォルトではサーバーサイドでのみアクセス可能です。クライアントサイド（ブラウザで実行されるコード）でアクセスしたい場合は、変数名の先頭にNEXT_PUBLIC_を付ける必要があります。getServerSideProps内ではサーバーサイドのコードとして実行されるため、NEXT_PUBLIC_プレフィックスがなくても環境変数にアクセスできますが、これを誤解してクライアントサイドのコードでprocess.env.MY_VARにアクセスしようとするとundefinedになります。

  3. 非同期処理の待機漏れ: getServerSidePropsは非同期関数であり、内部でfetchなどの非同期処理を行う場合、awaitキーワードを忘れずに使用する必要があります。awaitを付け忘れると、Promiseが解決される前にデータが返されてしまい、予期せぬ挙動やエラーにつながります。

  4. Propsのシリアライズの問題: getServerSidePropsから返されるpropsオブジェクトは、JSONシリアライズ可能な形式である必要があります。関数、Dateオブジェクト、Set、Mapなどは直接渡せません。これらを渡したい場合は、文字列に変換するなど、シリアライズ可能な形式に変換する必要があります。特にDateオブジェクトはよく問題になるので、ISO文字列などに変換して渡しましょう。

解決策

  • ブラウザAPIへのアクセス: getServerSideProps内でブラウザAPIが必要な場合は、そのロジックをクライアントサイドのコンポーネント内に移動させるか、別のサーバーサイドのデータ取得方法を検討してください。getServerSidePropsの役割は、あくまでサーバーサイドでページ生成に必要なデータを準備することです。

  • 環境変数の扱い: getServerSideProps内で使用する環境変数は、NEXT_PUBLIC_を付けずに定義し、process.env.YOUR_VARとして直接アクセスしてください。クライアントサイドで必要な環境変数にのみNEXT_PUBLIC_を付けると良いでしょう。

  • 非同期処理の待機漏れ: 常にfetchやデータベース操作などのPromiseを返す関数にはawaitを付けて、処理が完了するのを待機するように徹底してください。

  • Propsのシリアライズの問題: 例えばDateオブジェクトを渡す場合は、以下のように文字列に変換してから渡します。

    ```typescript // getServerSideProps内 const data = await fetchData(); return { props: { createdAt: data.createdAt.toISOString(), // DateオブジェクトをISO文字列に変換 }, };

    // コンポーネント内 const MyComponent: NextPage<{ createdAt: string }> = ({ createdAt }) => { const date = new Date(createdAt); // 文字列からDateオブジェクトに再変換 return

    作成日: {date.toLocaleDateString()}

    ; }; ```

これらの点に注意することで、getServerSidePropsをより安全に、そして効率的に使用することができます。

まとめ

本記事では、Next.jsとTypeScript環境において、getInitialPropsの代わりにgetServerSidePropsを利用したサーバーサイドでのデータ取得方法とそのメリットについて詳しく解説しました。

  • getServerSidePropsの強力な特性: getServerSidePropsは常にサーバーサイドで実行されるため、SEOに強く、常に最新のデータをユーザーに提供できるという大きな利点があります。
  • TypeScriptによる型安全な開発: GetServerSideProps型やカスタムインターフェースを用いることで、データ取得からコンポーネントへのプロパティ受け渡しまでを厳密に型チェックし、バグの発生を未然に防ぎ、コードの保守性を高めます。
  • 堅牢なエラーハンドリング: notFound: trueやredirectオプションを適切に利用することで、データが見つからない場合や認証状態に応じた柔軟なルーティング制御が可能になります。

この記事を通して、Next.jsにおけるgetServerSidePropsの基本的な使い方、TypeScriptとの連携による型安全な実装、そしてよくある問題とその解決策を理解し、ご自身のプロジェクトに自信を持って導入できるようになることが、読者の皆さんが得られたであろう最大のメリットです。

今後は、getStaticPropsやIncremental Static Regeneration (ISR)、SWRなどの異なるデータフェッチ戦略との組み合わせや、より複雑な認証フローとデータ取得の連携についても記事にする予定です。Next.jsの奥深いデータフェッチの世界を一緒に探求していきましょう。

参考資料