Next.jsで今の場所（current url）を取得

業務でcurrent urlを使用する機会があったのでメモ。

useRouter

Next.jsにはuseRouterというhookがあるので、そちらを使用しました。

URLを取得する方法

JavaScript

import { useRouter } from "next/router";

const router = useRouter(); 

console.log(router.pathname)
// http://localhost:3000/aaa/bbb ▶︎ /aaa/bbb

useRouterを使うことで現在のページのドメイン以下のURLを取得することができます。

routerオブジェクト

※よく使いそうなもの

pathname

router.pathnameでドメイン以降のpathが取得できます。
パラメータやクエリは取得できず、たとえば
http://localhost:3000/blog/[id]の[id]の動的ルーティング部分は取得できません。

asPath

router.asPathでドメイン以降のpathと[id]の中身も文字列で取得できます。
http://localhost:3000/blog/[id]の[id]の中身が[aaa]ならば/blog/aaaで取得できます。

query

router.queryでオブジェクトとして動的ルーティングの中身を取得できます。
http://localhost:3000/blog/aaaの[aaa]が[id]の場合{ id: 'aaa' }として取得できます。

そのほかにも色々あるみたいなので気になる方は調べてみてください。
https://nextjs.org/docs/api-reference/next/router