【Next.js】useRouterの型定義方法

プログラミング

useRouterを使用してルート名をpropsで渡す際の型定義に少し悩んだのでメモしておきます。

結論

NextRouterをインポートして型定義することでエラーが解消されました。

//型定義しない場合の警告文
Parameter 'router' implicitly has an 'any' type.ts(7006)

コード例

page/[id].tsxからArticleコンポーネントにルート名を渡すと仮定します。

親ファイル

import { useRouter } from "next/router";
import {Article} from "{componentPath}"

const Page = () => {
  const router = useRouter();
  return (
      <Article router />
  )
}

子ファイル

import type { NextRouter } from "next/router";

export const Article = (router: NextRouter) => {
  const { id } = router.query;
  ...
}

まとめ

これで合っているかは定かではないのですが、警告文は出なくなったのでこのまま進めていこうと思います。

ー　この記事をシェアする？　ー

この記事にコメントする

このサイトはreCAPTCHAとGoogleによって保護されています。プライバシーポリシーと利用規約が適用されます。

Related / 関連記事