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

2022/02/27に公開約1,500字

概要

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するパラメータと、ページコンポーネント側で受け取るパラメータの形式を、型で保証することができます。

Discussion

ログインするとコメントできます