如何在使用服务器端渲染和支持静态导出的 Next.js 13 中获取当前 URL

Next.js是一个React框架，提供了服务器端渲染（SSR）和静态导出（Static Export）功能。在Next.js 13及更高版本中，我们可以使用useRouter hook来获取当前的URL。本文将详细介绍如何在Next.js中使用服务器端渲染和静态导出的情况下获取当前URL。

1. 初始化一个Next.js项目

首先，我们需要安装Next.js。打开终端并执行以下命令：

npx create-next-app my-app
cd my-app
npm run dev

上述命令将创建一个名为my-app的Next.js项目，并在本地开发服务器上运行该项目。

2. 使用`useRouter`获取当前URL

Next.js的useRouter hook提供了一个简单的方式来获取当前的URL。在我们的应用程序中，可以像下面这样使用它：

import { useRouter } from 'next/router';

function MyComponent() {
  const router = useRouter();
  const currentUrl = router.asPath;

  return <p>当前URL是: {currentUrl}</p>;
}

export default MyComponent;

上述代码中，我们首先从next/router模块导入useRouter hook。然后，在MyComponent组件中使用useRouter hook获取当前的URL。通过调用router.asPath，我们可以获取到当前的URL，并将它显示在组件中。

3. 服务器端渲染（SSR）中获取当前URL

在Next.js中，我们可以通过在页面的getServerSideProps静态方法中获取当前URL来实现服务器端渲染。

假设我们有一个名为/pages/example.js的页面，我们可以在该页面中编写以下代码来获取当前URL：

export async function getServerSideProps(context) {
  const currentUrl = context.req.url;
  return {
    props: {
      currentUrl
    }
  }
}

function ExamplePage({ currentUrl }) {
  return <p>当前URL是: {currentUrl}</p>;
}

export default ExamplePage;

上述代码中，我们导出了一个名为getServerSideProps的异步函数，它可以在服务器端获取当前的URL。getServerSideProps函数接收一个上下文context参数，其中包含了请求的相关信息。通过访问context.req.url，我们可以获取到当前的URL。然后，我们将获取到的URL作为props传递给页面组件。

在上述示例中，我们导出了一个名为ExamplePage的页面组件，它接收一个currentUrl prop，并将其显示在组件中。

4. 静态导出（Static Export）中获取当前URL

在Next.js中可以将页面导出为静态HTML文件，以便在不需要服务器的情况下进行部署。在静态导出的情况下，我们可以使用useEffect hook在客户端获取当前URL。

假设我们有一个名为/pages/example.js的页面，我们可以在该页面中编写以下代码来获取当前URL：

import { useEffect, useState } from 'react';

function ExamplePage() {
  const [currentUrl, setCurrentUrl] = useState('');

  useEffect(() => {
    setCurrentUrl(window.location.href);
  }, []);

  return <p>当前URL是: {currentUrl}</p>;
}

export default ExamplePage;

在上述示例中，我们使用useEffect hook来在页面加载时获取当前的URL。通过访问window.location.href，我们可以获取到当前的URL。然后，我们使用useState hook来保存当前的URL，并将其显示在组件中。

总结

本文介绍了如何在Next.js 13中使用服务器端渲染和静态导出的情况下获取当前URL。我们可以使用useRouter hook来获取当前URL，或者使用getServerSideProps函数在服务器端获取当前URL。在静态导出的情况下，我们可以使用useEffect hook在客户端获取当前URL。

通过合理使用这些技术，我们可以轻松地在Next.js应用程序中获取当前URL，并根据需要进行进一步的处理。