NextJS 如何从 getInitialProps 中的 url 获取查询参数？

在Next.js中，getInitialProps是一个异步函数，你可以在这个函数中获取到几乎所有的初始化数据，包括上下文对象（context），它包含了一系列的属性，如query和params等。如果你需要从URL中获取查询参数，你可以通过context.query来访问。

以下是一个getInitialProps函数的例子，演示了如何从URL获取查询参数：

jsx
import React from 'react';

const MyPage = ({ queryParam }) => {
  // 在页面中使用查询参数
  return (
    <div>
      <p>查询参数的值是：{queryParam}</p>
    </div>
  );
};

MyPage.getInitialProps = async (ctx) => {
  // ctx.query 包含了所有的查询参数
  const { query } = ctx;

  // 假设你的URL是 "/my-page?search=nextjs"，你可以通过query.search获取'search'查询参数的值
  const queryParam = query.search;

  // 返回的对象将会作为props传递给页面组件
  return { queryParam };
};

export default MyPage;

在上面的例子中，我们假设你的页面URL是这样的：/my-page?search=nextjs。通过ctx.query你可以获取到search这个查询参数的值，然后将它作为queryParam传递给MyPage组件。

值得注意的是，从Next.js 9.3版本开始，官方推荐使用getStaticProps和getServerSideProps来代替getInitialProps，因为这两个新的数据获取方法能更好地配合Next.js的静态生成（Static Generation）和服务器端渲染（Server-Side Rendering）的特性。如果你的页面需要在请求时才去获取数据，那么应该使用getServerSideProps。如果查询参数是在用户浏览器与服务器间动态变化的，那么可以在客户端使用Router或useRouter钩子来获取。