nextjsでリダイレクトを行う方法
ネット上であまりいい情報がなかったので自分なりにまとめます。
1. router.push
1つ目の方法はuseRouterを利用する方法です。
1"use client"; //Client Componentsでしか使用できない
2import { useRouter } from "next/navigation"; // next/router ではない
3
4export default function Page() {
5 const router = useRouter();
6 router.push("./どこか");
7 return <></>;
8}この方法はクライアントサイドでのみ使用できます。そのため主にユーザーの操作によってリダイレクトを行うときに使います。 また、この方法ではリダイレクトが行われるまで少し時間がかかるのでもとのページが表示されます。
2. redirect
2つ目の方法はredirectを利用する方法です。
1import { redirect } from "next/navigation";
2export default function Page() {
3 redirect("./どこか");
4 return <></>;
5}この方法はサーバーサイドでもクライアントサイドでも使用できます。そのため主にサーバーサイドでのリダイレクトに使います。そのため、ログインが必要なページで未ログイン時などに使います。また、404を表示するだけなら notFound を使います。
1import { notFound } from "next/navigation";
2export default function Page() {
3 notFound();
4 return <></>;
5}3. router.pushとredirectの違い
| router.push | redirect | |
|---|---|---|
| クライアントサイドで使用できる | ○ | ○ |
| サーバーサイドで使用できる | ×(ReactHookのため) | ○ |
| リダイレクトが行われるまでの時間 | 一瞬もとのページが表示される | サーバーサイドでの仕様の場合は表示されない |
| 主な使用方法 | ユーザーの操作によるリダイレクト | サーバーサイドでのリダイレクト |