Next.jsにおけるURLの管理・制御の方法(next/linkとnext/router)

環境

  • windows10
  • DockerDesktop for Win 3.5.x
  • node 16.13.1
  • npm 8.1.2
  • TypeScript 4.5
  • React 17.0.1
  • Next.js 12.0.7
  • VsCode
  • gitbash 2.32.0.1

next/linkとnext/router

next/link

next/link | Next.js
組み込みの Link コンポーネントを使用して、ルート間のクライアント側のトランジションを有効にします。
  • こちらは、リンク用のコンポーネントを作成するための機能
  • Next.jsにはLinkコンポーネントが用意されているので、propsでURLオブジェクトを渡してあげるだけで、自動的にフォーマットして URL 文字列を作成してくれる。
  • Linkコンポーネントでaタグをラップする

frontend\next-web\src\components\atomic\Atoms\Link\BasicLink.tsx

import React  from 'react'
import Link from 'next/link'

..割愛
const BasicLink = (props) => {
  const { href, name } = props

  return (
    <Link
      href={{
        pathname: href.pathname,
        query: href.query
      }}
    >
      <a>{name}</a>
    </Link>
  )
}

export default BasicLink

frontend\next-web\src\pages\posts\[postId]\index.tsx

  • 呼び出す側でurlオブジェクトを渡すことにより、idやクエリパラメーター等を含む動的なpathも簡単に生成できる
// 以下の例では、 /posts/1/comments/1?category=hoge 等のurlが生成される

<BasicLink
  href={{
    pathname: '/posts/[postId]/comments/[commentId]',
    query: { postId: post.id, commentId: comment.id, category: "hoge" }
  }}
  name={comment.content}
/>

next/router

next/router | Next.js
Next.js の Router API について学び、useRouter フックを利用してページ内のルーターインスタンスにアクセスしてみましょう。
  • こちらは、urlを取得・操作するための機能
  • Next.jsにはuseRouterというHooksが用意されているのでこちらを使用する
  • routerオブジェクトを取得したり、ページ遷移の処理を実装することが可能

routerオブジェクトの取得

import { useRouter } from'next/router'

const Sample= () => {
  const router = useRouter()
  console.log(router) // routerオブジェクトが取得できる
  ... 割愛
}

routerオブジェクトに含まれる主な内容

  • asPath: ブラウザに表示される実際のパス(クエリ含む)
    “/posts/1/comments/1?category=hoge” など
  • pathname:現在のルート
    “/posts/[postId]/comments/[commentId]”
  • query:クエリ文字列
    {postId: ‘1’, commentId: ‘1’, category: ‘hoge’}

Router API

  • Router APIを利用して、urlを操作することが可能
ページ遷移
// 事前に定義されたルートへの遷移
router.push('/signin')

// urlオブジェクトを渡して動的なurlへ遷移することも可能

router.push({
  pathname: '/posts/[postId]/comments/[commentId]',
  query: { postId: 1, commentId: 3, category: 'hoge' }
})

※外部URLに対してはwindow.locationを使用する

1つ前のページに戻る(ブラウザの戻るボタンをクリックするのと同じ)
router.back()
ページリロード
router.reload()
イベントのリッスン

例えば、urlの変更を感知して何か処理を行いたい時などに便利

router.events()

以上です。

タイトルとURLをコピーしました