Next.js 入門 useRouter 基礎 ルート制御
ルーティングとは
ルーティングは、Webへのハイパーリンクと同様に、各Webアプリケーションの重要な側面となっております。
それは、リクエストを処理するコードにリクエストをルーティングするメカニズムとなっているのです。
ルーティングに関連してNext.jsページは一意のURLパスによって参照および識別できます。
簡単に言ってしまえば、ルーティングはユーザーがWebサイトのさまざまなページに移動する為のプロセスです。
pagesディレクトリからデフォルトでエクスポートされたReactコンポーネントとなります。
当ブログの記事では、Next.jsでのルーティングについて知っておく必要のあるルーティング方法を初学者様に解説していきます。
前回では静的および動的ページを作成するLink、およびその小道具のいくつかを使用してページ遷移を実装ができるルーティングでしたが
『useRouter』フックを使用して、Next.jsアプリケーションをナビゲートする方法をご紹介致します。
『next/Link』が分からない方はこちらから学習できます。
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エントリを履歴スタックに追加するのを防ぎます
つまり、一度ページ遷移すると前のページに戻る事はできません。
さらに深く学ぶのであれば、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のパス名をコンソールに出力する // ... }
最後に
useRouterは、Reactアプリケーションでルーティングを実装するための重要なツールであり、Next.jsの開発において欠かせないフックの1つです。
当ブログの記事の基礎でnext / link
を使用するだけでなく、あなたはさまざまな方法でルート間を移動する方法を知りました。
本日は以上となります。
最後まで読んで頂きありがとうございます。