業務で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でドメイン以降のpathが取得できます。
パラメータやクエリは取得できず、たとえば
http://localhost:3000/blog/[id]の[id]の動的ルーティング部分は取得できません。

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

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