オリジナルNext.jsのuseRouter画像

ルーティングとは
- useRouterとは？
  - メソッド
  - オプションのデコレータ
    - useRouter使用例
    - 最後に

ルーティングとは

ルーティングは、Webへのハイパーリンクと同様に、各Webアプリケーションの重要な側面となっております。

それは、リクエストを処理するコードにリクエストをルーティングするメカニズムとなっているのです。

ルーティングに関連してNext.jsページは一意のURLパスによって参照および識別できます。

簡単に言ってしまえば、ルーティングはユーザーがWebサイトのさまざまなページに移動する為のプロセスです。

pagesディレクトリからデフォルトでエクスポートされたReactコンポーネントとなります。

当ブログの記事では、Next.jsでのルーティングについて知っておく必要のあるルーティング方法を初学者様に解説していきます。

前回では静的および動的ページを作成するLink、およびその小道具のいくつかを使用してページ遷移を実装ができるルーティングでしたが

『useRouter』フックを使用して、Next.jsアプリケーションをナビゲートする方法をご紹介致します。

『next/Link』が分からない方はこちらから学習できます。

dev-k.hatenablog.com

useRouterとは？

Routerオブジェクトに直接アクセスするパッケージとなります。

これは動的ルートでコンテンツをレンダリングするために使用するものでもあります。

Next.jsのページをリンクする際に、Linkコンポーネントを使用しJSXでルーティングを管理するのは非常に便利ですが、プログラムでルーティングの変更をトリガーする必要がある場合があります。

その場合はnext/routerパッケージで提供している、useRouterフックによって返されるルーターオブジェクトであり、それらはいくつかの便利なメソッドを提供しています。

useRouterフックを使用することで、現在のURLやパス、クエリパラメータなど、ルーティングに関連する情報にアクセスできます。

メソッド

useRouterを使用して、リダイレクトやルーティングのプログラム的な操作も行うことができます。

・ push()メソッド

プログラムによってURLの変更をトリガーできます。

push(url, as, options)

urlは移動先のURLとなります。

asブラウザに表示されるURLのオプションであり、カスタムURLを使用しURLをより読みやすくする場合もあります。

<Link href="/about" as="/dev-k">
          <a>About </a>
 </Link>

・ replace()メソッド

router.replace(url, as, options)

こちらのメソッドはpush()メソッドに非常によく似ています。

履歴スタックに新しいURLを追加しません。

つまり、ブラウザの戻るボタンを押して前のルートに戻ることはできない事になります。

最もよく使用するのはpush()およびprefetch()です。

prefetch()メソッドはLinkプログラムによって、ページをバックグラウンドでレンダリングするために必要なリソースをプリフェッチする事が可能となります。

import { useRouter } from 'next/router'

export default () => {
  const router = useRouter()

  useEffect(() => {
    router.prefetch('/about')
  })
}

<Link href="/about" prefetch>
  <a>About</a>
</Link>

これはプリフェッチを自動的に処理するタグがない場合に便利となります。

useRouterでは基本的には Next.jsでAPIをfetchする際にクエリパラメータを使用したい場合に活用したりします。

今回ではまず、useRouterフックでルート制御での基礎からしっかり学んでいきましょう。

オプションのデコレータ

options次の構成オプションを持ちparamとして送信する設定オプションのオブジェクトです。

router.push('/?counter=10', undefined, { shallow: true })

・ shallow

getStaticPropsやgetServerSidePropsまたはgetInitialPropsこれらを再実行させず、現在のページのパスを更新し変更していきます。

デフォルト状態では全てfalseとなっております。

・ locale

新しいページでのローケル設定

・ scroll

ページ遷移後に先頭にスクロールするかどうかのオプションとなり、デフォルトではtrueとなっています。

useRouter使用例

それではpagesフォルダに新しくblogpage.jsファイルを作成して下さい。

ファイル内は下記のように記述下さい。

// pages/blogpage

const BlogPage = () => {
    return <div style={{padding: 20}}>
      <h1>Hi, I'm dev.K</h1>
      <p>This is the dev.K blog page.</p>
    </div>
  }
  
  export default BlogPage;

index.jsファイルに下記のように記述します。

// pages/index.js

import { useRouter } from 'next/router';

export default function Home() {

  const router = useRouter();

  return (
    <div style={{ padding: 20 }}>
      <h1>Home</h1>
      <h2>push()メソッド</h2>
      <p>
        <button onClick={() => router.push('/blogpage')}>
          dev.K ページへ
        </button>
      </p>
      <p>
        <input
          type="checkbox"
          onChange={() => router.push('/blogpage')}
         />チェックボックスをクリックでページ移動
      </p>
      <br />

      <h2>replace()メソッド</h2>
      <div>
        <button onClick={() => router.replace('/blogpage')}>
          dev.K ページに移動しても、Homeには戻れません。
        </button>
      </div>
    </div>
  );
}

それぞれクリックしページ移動してみて下さい。

チェックボックスでは、push()メソッドにURLを渡す事によりチェック時にページ遷移が可能となります。

replace()メソッドでは、URLエントリを履歴スタックに追加するのを防ぎます

オリジナルuseRouterGIF画像

つまり、一度ページ遷移すると前のページに戻る事はできません。

さらに深く学ぶのであれば、useRouterはURLからクエリパラメータを取得しNext.jsアプリケーションをナビゲートする事が可能です。

IDはURLからのクエリに応じて、コンテンツを動的にレンダリングする特別なルートとなっています。

クエリIDを使用してデータベースにクエリを実行してから、動的ページに表示される一致するデータレコードを取得していきます。

完全なURLパスにする際はクエリ文字列を使用します。

JSONデータを用意し、独自の配列を作成します

[
    {
        "id": 1,
    "tirle": "My new next.js app"
    },
    {
        "id": 2,
        "name": "dev.k",
    },
    {
        "id": 3,
        "title": ""
    }
]

動的コンポーネント内で、URLからクエリID(id1、id2、id3、など)にアクセスが可能になります。

const router = useRouter();
    const {id} = router.query;

import Myblog  from '../project.json'

return(
{Myblog.map(myblog => {

 <div key={myblog.id}>

 <h2>{myblog.title}</h2>
 <p>{myblog.name}</p>

 </div>
)}

下記では、useRouterを使用し、現在のURLのパス名を取得できます。

import { useRouter } from 'next/router'

function MyComponent() {
  const router = useRouter()
  console.log(router.pathname) 
// 現在のURLのパス名をコンソールに出力する
  // ...
}