Zenn
Open1

動的ルーティングとSSGを含めた静的ページを構築する際の、paramsの型について

Next.js
Next.js
TypeScript
khalekhale

最後の関数getStaticPropsについて、getStaticPathsにおけるパスをparamsとして受け取る。
paramsの型が string | string[]であるため、getPostDataの引数がstringである場合に型エラーが生じる。

ベストプラクティスはどれか？

  • 無理やりas stringとして引数に渡すべきか
  • getPostData側の引数をunion型に拡張すべきか

そもそもなぜstring, string[]で渡ってくるのか理解してないからいけないのだと思う。

[id].tsx
import {
  GetStaticPaths,
  GetStaticProps,
  InferGetStaticPropsType,
  NextPage,
} from "next";
import Layout from "../../components/layout";
import { getAllPostIds, getPostData } from "../../lib/posts";

type Props = InferGetStaticPropsType<typeof getStaticProps>;

export const Post: NextPage<Props> = (): JSX.Element => {
  return <Layout home={undefined}>...</Layout>;
};

/**
 * {@linkcode Post}ページSSGへのパス取得用のファンクション
 *
 * @returns postページの動的パス
 */
export const getStaticPaths: GetStaticPaths = async () => {
  const paths = getAllPostIds();
  return {
    paths,
    fallback: false,
  };
};

/**
 * {@linkcode Post}ページSSGへの値取得用のファンクション
 *
 * @returns postに表示するブログ記事リスト
 */
export const getStaticProps: GetStaticProps = async ({ params }) => {
  const postData = getPostData(params.id);
  return {
    props: {
      postData,
    },
  };
};

export default Post;