Next.jsにおけるパラメータの型

Query パラメータの型指定: Next.jsでは、クエリパラメータを扱うためにqueryオブジェクトを使用します。queryオブジェクトはデフォルトでstring型となりますが、パラメータの型を指定することもできます。

例えば、以下のようなURLがあるとします: /users?id=123&name=John

次のように、queryオブジェクトの型を指定することができます:

import { useRouter } from 'next/router';
const MyComponent = () => {
  const router = useRouter();
  const { id, name } = router.query;
  // idとnameの型を指定する
  const userId: string = id as string;
  const userName: string = name as string;
  // パラメータを使った処理を行う
  // ...
  return (
    // コンポーネントの表示
  );
};

動的なルートパラメータの型指定: Next.jsでは、動的なルートパラメータを使用することができます。例えば、[id].tsxというファイルを作成し、URLの一部としてidを受け取る場合を考えてみましょう。

以下は、動的なルートパラメータの型指定の例です:

import { useRouter } from 'next/router';
const UserPage = () => {
  const router = useRouter();
  const { id } = router.query;
  // idの型を指定する
  const userId: string = id as string;
  // パラメータを使った処理を行う
  // ...
  return (
    // ユーザーページの表示
  );
};
export default UserPage;

以上が、Next.jsにおけるパラメータの型指定のシンプルで簡単な方法です。これらの方法を使って、パラメータの型を正しく指定し、安全なコーディングを行うことができます。