Nextjs 如何获取上一个页面的 URL

在 Next.js 中，获取上一个页面的 URL 通常是通过 referer HTTP 头部来完成的。referer 头部在用户从一个页面导航到另一个页面时，会被浏览器自动设置，以指示请求是从哪个页面发起的。

这里有一个实际的例子，演示如何在 Next.js 的页面或 API 路由中获取 referer 头部：

步骤 1: 创建一个 API 路由

在 Next.js 项目中，你可以在 pages/api 目录下创建一个新的 API 文件。比如说，创建一个名为 referer.js 的文件：

js
// pages/api/referer.js

export default function handler(req, res) {
  const referer = req.headers['referer'] || 'Direct visit without referer';

  res.status(200).json({ referer });
}

这个 API 路由会检查来自客户端请求的 referer 头部，并将其发送回客户端。如果没有 referer 头部，它会假设是直接访问。

步骤 2: 在页面中调用 API

你可以在任何页面组件中调用这个 API 以获取 referer 头部。例如，在 pages/index.js 文件中：

jsx
// pages/index.js
import { useEffect, useState } from 'react';

function HomePage() {
  const [referer, setReferer] = useState('');

  useEffect(() => {
    async function fetchReferer() {
      const response = await fetch('/api/referer');
      const data = await response.json();
      setReferer(data.referer);
    }

    fetchReferer();
  }, []);

  return (
    <div>
      <h1>Welcome to the homepage!</h1>
      <p>The referer URL is: {referer}</p>
    </div>
  );
}

export default HomePage;

这个例子中，页面会在加载时调用我们创建的 /api/referer API，并展示从哪里被访问。

注意事项

• 请注意，referer 头部可以被用户或某些浏览器扩展修改或删除，因此不应依赖于它来进行重要的安全决策。
• 这个方法主要用于跟踪和日志记录目的。

使用以上方法，你应该能够在 Next.js 应用中有效地获取并利用上一个页面的 URL。