Next.js で /users/signup に到達したユーザーが前のページを知る方法

目次

1. 前のページを取得する必要性
2. 方法①：document.referrer を使う
3. 方法②：Next.js の useRouter().query を使う
4. 方法③：Next.js の useRouter() + localStorage を使う
5. おすすめの方法の選び方
6. まとめ

---

1. 前のページを取得する必要性

ユーザーが users/signup ページに到達した際に、どのページから来たのかを知ることは、以下のような場面で役立ちます。

• ユーザーの流入経路を分析し、最適化する。
• 特定のページからのコンバージョン率を計測する。
• A/B テストの効果を測定する。

この情報を取得するために、以下の3つの方法を紹介します。

---

2. 方法①：document.referrer を使う

実装手順

1. /users/signup のページで useEffect を使って document.referrer を取得。
2. ローカルステートに保存。

メリット・デメリット

✅ メリット:

• 追加設定なしで簡単に取得できる。

🚨 デメリット:

• document.referrer は 同一サイト内のみ取得可能。
• 外部サイトや noopener が設定されたリンクでは取得できない。

---

3. 方法②：Next.js の useRouter().query を使う

クエリパラメータを使って遷移元のページを渡す方法。

実装手順

1. ユーザーがページを遷移する際に router.push でクエリパラメータに遷移元を含める。
2. /users/signup でクエリパラメータから値を取得。

遷移元のページ（例: /jobs）

/users/signup ページ

メリット・デメリット

✅ メリット:

• 確実に前のページを取得可能。
• 外部サイトからの遷移でも問題なし。

🚨 デメリット:

• すべてのリンクに ?from=URL を追加する必要がある。

---

4. 方法③：Next.js の useRouter() + localStorage を使う

ページ遷移を記録し、/users/signup に来たら取得する方法。

実装手順

1. _app.js で localStorage に現在のページを記録。
2. /users/signup で localStorage から前のページを取得。

_app.js に追加

/users/signup で取得

メリット・デメリット

✅ メリット:

• Next.js のページ遷移すべてで自動的にトラッキング可能。

🚨 デメリット:

• localStorage は SSR では使えない ので useEffect 内で処理する必要あり。

---

5. どの方法を選ぶべきか？

方法	メリット	デメリット
document.referrer	簡単に実装できる	外部サイトや noopener の影響で取得できない
useRouter().query	確実に遷移元を取得可能	すべてのリンクに ?from=URL を追加する必要がある
localStorage	自動で記録可能	SSR時は使えず useEffect が必要

✅ おすすめの方法

• 同一サイト内のみで良い → document.referrer
• 確実に前のページを知りたい → useRouter().query
• ページ遷移を自動で記録したい → localStorage

---

6. まとめ

Next.js で /users/signup に到達したユーザーが前にいたページを知るには、状況に応じた適切な手法を選ぶことが重要です。用途に応じた方法を活用しましょう！

[cv:issue_marketplace_engineer]