如何在 NextJS 中使用查询参数？

在 Next.js 中，您可以使用查询参数来使应用程序能够响应 URL 中的动态信息。查询参数通常用于搜索、过滤、分页等。在 Next.js 中，有几种方法可以获取和使用查询参数。

假设您有一个名为 posts 的页面，您希望根据URL中的查询参数来过滤显示的帖子列表。

使用 useRouter 钩子

在 Next.js 的函数式组件中，您可以使用 useRouter 钩子来访问当前路由的信息。这个钩子提供了一个 query 对象，它包含了所有的查询参数。

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

const Posts = () => {
  const router = useRouter();
  const { search } = router.query;

  // 你可以使用查询参数 `search` 来过滤帖子，
  // 比如发送一个 API 请求或者过滤本地数据
  // ...

  return (
    <div>
      {/* 渲染过滤后的帖子列表 */}
    </div>
  );
};

export default Posts;

在这个例子中，如果用户访问的 URL 是 /posts?search=nextjs，那么 router.query.search 将会是 'nextjs'。

使用 getServerSideProps 或 getStaticProps

如果您需要在页面渲染之前获取查询参数，您可以在服务器端使用 getServerSideProps（对于服务器端渲染的页面）或 getStaticProps（对于静态生成的页面，但在这种情况下，查询参数仅用于动态路由）。

javascript
export async function getServerSideProps(context) {
  const { query } = context;
  const { search } = query;

  // 现在您可以使用查询参数 `search` 来获取数据，
  // 比如从外部API获取过滤后的帖子列表
  // ...

  return {
    props: {
      // 返回的 props 将会传递给页面组件
    },
  };
}

在这个例子中，getServerSideProps 函数在每次请求时运行，并使您可以在服务器端使用查询参数来获取数据，然后将结果作为属性传递给页面组件。

使用 withRouter 高阶组件

对于类组件，您可以使用 withRouter 高阶组件来注入路由属性，包括查询参数。

javascript
import { withRouter } from 'next/router';

class Posts extends React.Component {
  render() {
    const { search } = this.props.router.query;

    // 使用查询参数 `search` 来过滤帖子
    // ...

    return (
      <div>
        {/* 渲染过滤后的帖子列表 */}
      </div>
    );
  }
}

export default withRouter(Posts);

这将允许您在类组件中访问查询参数，并且可以像在函数组件中一样使用它们。

注意事项

• 当您首次渲染组件时，查询参数可能不会立即可用，因为 Next.js 可以在客户端进行导航而不需要重新加载页面。如果您依赖于查询参数来渲染内容或触发某些效果，您可能需要处理查询参数尚未定义的情况。
• 对于动态路由，您可以使用文件和文件夹命名来获取路由参数，例如 [postId].js 来获取 postId，查询参数的工作方式与上述相同。

通过上述方法，您可以在 Next.js 应用程序中有效地利用查询参数来增强页面的动态性和交互性。