NextJS 如何在生产环境中获取页面 URL ？

在 Next.js 中，你可以使用 Next.js 提供的 useRouter 钩子或者在页面组件中使用 getServerSideProps、getStaticProps 或者 getInitialProps（不推荐，因为它已不是 Next.js 的主要渲染方式）来获取当前页面的 URL。以下是在生产环境获取页面 URL 的不同方法：

使用 useRouter

如果你正在编写一个函数组件，可以使用 useRouter 钩子来获取当前页面的 URL。

jsx
import { useRouter } from 'next/router';

function PageComponent() {
  const router = useRouter();
  
  console.log('当前页面 URL:', router.asPath); // 获取路径和查询字符串
  console.log('当前完整 URL:', `${window.location.origin}${router.asPath}`); // 仅在客户端代码中有效

  return (
    <div>
      <p>当前页面 URL: {router.asPath}</p>
    </div>
  );
}

export default PageComponent;

注意： window.location.origin 只能在浏览器端使用，因此你不能在服务器端渲染的代码中直接使用它。如果你尝试在 Next.js 的服务器端渲染中直接使用 window 对象，会引起错误。

使用 getServerSideProps

如果你需要在服务器端获取页面的 URL，并将其作为页面组件的属性传递，你可以使用 getServerSideProps。

jsx
export async function getServerSideProps(context) {
  const { req } = context;
  const host = req.headers.host; // 获取主机名和端口号
  const protocol = req.headers['x-forwarded-proto'] || 'http'; // 获取协议，或者假设是 HTTP
  const url = `${protocol}://${host}${req.url}`; // 组合完整的 URL

  return {
    props: { url }, // 将 URL 作为属性传递给页面组件
  };
}

function PageComponent({ url }) {
  return (
    <div>
      <p>当前页面 URL: {url}</p>
    </div>
  );
}

export default PageComponent;

注意： 在使用 getServerSideProps 时，req 对象代表 HTTP 请求对象，你可以从中获取到请求的相关信息，比如主机名、端口号、路径等。这种方式只在服务器端工作，因为它涉及到 Node.js 的 HTTP 请求对象。

使用环境变量

有时，你可能会有一个固定的生产环境 URL，可以将这个 URL 作为环境变量。然后，在代码中通过 process.env 来使用这个变量。

jsx
// .env.production
NEXT_PUBLIC_BASE_URL=https://your-production-site.com

// 在你的页面或组件代码中
const baseUrl = process.env.NEXT_PUBLIC_BASE_URL;

function PageComponent() {
  const router = useRouter();
  const fullPath = `${baseUrl}${router.asPath}`;

  return (
    <div>
      <p>当前页面 URL: {fullPath}</p>
    </div>
  );
}

export default PageComponent;

在这里，NEXT_PUBLIC_BASE_URL 是在 .env.production 文件中定义的环境变量，它包含你的生产环境 URL。注意，任何以 NEXT_PUBLIC_ 开头的环境变量都会暴露给浏览器。

这些方法可以让你在 Next.js 应用中获取页面的 URL，无论是在服务器端还是客户端。根据你的具体需求，选择最适合你情况的方法。