Next.js+TypeScriptでServerSidePropsを受け渡す

概要

Next.js+TypeScript で ServerSideProps を受け渡す場合の例について記載します。

実装例

import { GetServerSideProps } from "next";

// propsの型を定義する
type Props = {
  title?: string;
  num?: number;
};

// ページコンポーネントを定義する
const TestPage = (props: Props) => {
  return (
    <>
      <h1>Test Page</h1>
      <h2>
        {props.title}:{props.num}
      </h2>
    </>
  );
};

export default TestPage;

// サーバサイドで実行する処理(getServerSideProps)を定義する
export const getServerSideProps: GetServerSideProps = async (context) => {
  // APIやDBからのデータ取得処理などを記載

  const props: Props = {
    title: "testtitle",
    num: 123,
  };

  return {
    props: props,
  };
};

解説

props の型を定義する

TypeScript の場合は、あらかじめ型を定義してから使用する必要がありますので、最初に以下で型(type)を定義しています。
ここでは、同じページ内で使用するので、Props という名前の型をとしています。
複数ページで同じようなデータ構成での props 受け渡しがある場合は、型定義を別ファイルとして使いまわすことになります。

type Props = {
  title?: string;
  num?: number;
};

ページコンポーネントは定義した型で props を受け取る

ページコンポーネント側（export defaultする関数）は、定義した型の値を引数として受け取ります。

const TestPage = (props: Props) => {

getServerSideProps を定義する

export する getServerSideProps 関数の型はGetServerSidePropsとします。
定義した型で引き渡すパラメータをまとめて、propsとしてreturnで返却しています。

export const getServerSideProps: GetServerSideProps = async (context) => {
  // APIやDBからのデータ取得処理などを記載

  const props: Props = {
    title: "testtitle",
    num: 123,
  };

  return {
    props: props,
  };
};

上記のような形とすることで、getServerSideProps で return するパラメータと、ページコンポーネント側で受け取るパラメータの形式を、型で保証することができます。