# 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. ローカルステートに保存。

![img](/mosaic-code.jpg)

### メリット・デメリット
✅ **メリット**:
- 追加設定なしで簡単に取得できる。

🚨 **デメリット**:
- `document.referrer` は **同一サイト内のみ取得可能**。
- 外部サイトや `noopener` が設定されたリンクでは取得できない。

---

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

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

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

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

![img](/mosaic-code.jpg)

**`/users/signup` ページ**

![img](/mosaic-code.jpg)

### メリット・デメリット
✅ **メリット**:
- **確実に**前のページを取得可能。
- 外部サイトからの遷移でも問題なし。

🚨 **デメリット**:
- すべてのリンクに `?from=URL` を追加する必要がある。

---

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

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

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

**`_app.js` に追加**

![img](/mosaic-code.jpg)

**`/users/signup` で取得**

![img](/mosaic-code.jpg)

### メリット・デメリット
✅ **メリット**:
- **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]

# 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. ローカルステートに保存。

```tsx
import { useEffect, useState } from "react";

export default function SignupPage() {
  const [referrer, setReferrer] = useState("");

  useEffect(() => {
    setReferrer(document.referrer); // 直前のページのURLを取得
  }, []);

  return (
    <div>
      <h1>Signup Page</h1>
      {referrer && <p>前のページ: {referrer}</p>}
    </div>
  );
}
```

### メリット・デメリット
✅ **メリット**:
- 追加設定なしで簡単に取得できる。

🚨 **デメリット**:
- `document.referrer` は **同一サイト内のみ取得可能**。
- 外部サイトや `noopener` が設定されたリンクでは取得できない。

---

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

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

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

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

```tsx
import { useRouter } from "next/router";

export default function JobsPage() {
  const router = useRouter();

  const handleSignupRedirect = () => {
    router.push(`/users/signup?from=${encodeURIComponent(router.asPath)}`);
  };

  return (
    <div>
      <h1>Jobs Page</h1>
      <button onClick={handleSignupRedirect}>Sign Up</button>
    </div>
  );
}
```

**`/users/signup` ページ**

```tsx
import { useRouter } from "next/router";

export default function SignupPage() {
  const router = useRouter();
  const referrer = router.query.from || "不明";

  return (
    <div>
      <h1>Signup Page</h1>
      <p>前のページ: {decodeURIComponent(referrer)}</p>
    </div>
  );
}
```

### メリット・デメリット
✅ **メリット**:
- **確実に**前のページを取得可能。
- 外部サイトからの遷移でも問題なし。

🚨 **デメリット**:
- すべてのリンクに `?from=URL` を追加する必要がある。

---

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

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

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

**`_app.js` に追加**

```tsx
import { useEffect } from "react";
import { useRouter } from "next/router";

function MyApp({ Component, pageProps }) {
  const router = useRouter();

  useEffect(() => {
    const handleRouteChange = (url) => {
      localStorage.setItem("previousPage", url);
    };

    router.events.on("routeChangeStart", handleRouteChange);
    return () => {
      router.events.off("routeChangeStart", handleRouteChange);
    };
  }, [router]);

  return <Component {...pageProps} />;
}

export default MyApp;
```

**`/users/signup` で取得**

```tsx
import { useEffect, useState } from "react";

export default function SignupPage() {
  const [referrer, setReferrer] = useState("");

  useEffect(() => {
    const prevPage = localStorage.getItem("previousPage") || "不明";
    setReferrer(prevPage);
  }, []);

  return (
    <div>
      <h1>Signup Page</h1>
      <p>前のページ: {referrer}</p>
    </div>
  );
}
```

### メリット・デメリット
✅ **メリット**:
- **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` に到達したユーザーが前にいたページを知るには、状況に応じた適切な手法を選ぶことが重要です。用途に応じた方法を活用しましょう！


[![image](https://firebasestorage.googleapis.com/v0/b/issue-pro-42602.appspot.com/o/topics%2F17fa658b-53c7-4ca0-a28b-e588ed1bd371?alt=media&token=2c00afff-85ff-4428-8d15-696ab676dcb0)](https://i-ssue.com/lp/check_salary)

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

目次

続きは、単価診断を受けたエンジニア限定で公開中（30秒）

続きは、
単価診断を受けたエンジニア限定で公開中（30秒）