🦄

【Next.js】useRouterで取得できる項目まとめ

2022/11/15に公開

Next.js

useRouterで取得できる各項目について、毎回調べたり出力したりしているので、いい加減まとめようと思い書きました。

📖 内容

useRouterとは
useRouterの利用方法
useRouterで取得できる項目名と中身について

おまけ

basePathとは
クエリパラメータのvalueだけを取得する方法

🖋 useRouterとは

Nextが提供している、アプリケーションのルートオブジェクトにアクセスするためのhooksです。

たとえば処理の中でURLを参照し「どのページにいるのか」「クエリパラメータの値はなにか」などを判断するときによく利用されます。

また、反対に処理の中からパスを渡し、ページを遷移させたりするケースも多いです。

公式ドキュメントは以下リンクです。

useRouterの使い方

useRouterをimportし、定数に代入して使います。

定数名はなんでもよいですが慣例的にrouterとすることが多いと思います。

import { useRouter } from "next/router";

const RouterExample = () => {
  const router = useRouter()
  return <>サンプルです</>
}

上記のサンプルでは定数routerにuseRouterで取得したオブジェクトが代入されています。

そのため、ルートオブジェクトから参照したい値があればrouter.{hoge}の形をとります。

useRouterで取得できる項目とその中身一覧

サンプルとなるURL

https://yakkun-love.jp/column/detail?id=888

上記のURLに対してuseRouterを使用した場合に、取得できる中からよく参照されるものを一覧化しました。

とはいえほんの数個ですが。

useRouterでよく参照する項目一覧

asPath: "/column/detail?id=888"
- プロトコル, ホストを除いたパスとクエリパラメータ部分
basePath: ""
- 利用できるbasePath（next.config.{js|ts}で設定できる）
query: {id: '888'}
- クエリパラメータのvalueが文字列となったオブジェクト
router: "/column/detail"
- プロトコル, ホスト, クエリパラメータを除くパス部分

🍬 おまけ

basePathとは

たとえばyakkun-love.jp/secondというパスでデプロイしたい場合、next.config.{js|ts}で下記のように設定します。

next.config.js

module.exports = {
  basePath: '/second',
}

このように設定し、Linkを下記のように配置したとします。

(Next.js v13から<a>が不要になりましたね)

ソース側

<Link href="/column">リンク</Link>

すると下記のように出力されます。

ブラウザ側

<a href="/second/column">リンク</a>

basePathに設定した文字列が意味通り、ベースとなるパスになるということです。

クエリパラメータのvalueのみを参照したい場合