Nextjs如何在服务器端访问url参数？

在 Next.js 中，服务器端访问 URL 参数主要是在页面的 getServerSideProps 或者 getInitialProps 函数中完成的。这些函数在服务器端运行，并可以获取到包括查询参数在内的完整请求信息。

使用 getServerSideProps

定义

getServerSideProps 是一个异步函数，用于在每次页面请求时运行，以便在渲染前从服务器端获取必要的数据。这个函数可以访问到请求时的所有参数，包括 URL 查询参数。

示例

假设你有一个页面，其 URL 可能是 /products?category=shoes，你希望在服务器端获取 category 参数，然后基于此参数从数据库或 API 获取数据。

jsx
// pages/products.js
export async function getServerSideProps(context) {
  // 从context.params或context.query中获取URL参数
  const { query } = context;
  const { category } = query;

  // 假设我们根据category从某个API获取产品数据
  const products = await fetchProductsByCategory(category);

  // 返回的props将传递给React组件
  return {
    props: {
      products,
    },
  };
}

function Products({ products }) {
  return (
    <div>
      <h1>Products</h1>
      {products.map(product => (
        <div key={product.id}>{product.name}</div>
      ))}
    </div>
  );
}

export default Products;

在上面的例子中，getServerSideProps 函数通过 context.query 访问到 URL 中的查询参数 category，然后使用这个参数去获取相应的产品数据。

使用 getInitialProps

定义

getInitialProps 是 Next.js 较早的一个功能，允许你在服务器端或客户端获取数据，依赖于页面请求的方式。它也可以接受一个上下文对象，其中包含了 URL 的查询参数。

示例

以下是如何在使用 getInitialProps 时访问 URL 参数的示例：

jsx
// pages/products.js
Products.getInitialProps = async (ctx) => {
  // 这里的ctx.query包含了所有的URL查询参数
  const { category } = ctx.query;

  // 根据category查询产品数据
  const products = await fetchProductsByCategory(category);
  return { products };
};

function Products({ products }) {
  return (
    <div>
      <h1>Products</h1>
      {products.map(product => (
        <div key={product.id}>{product.name}</div>
      ))}
    </div>
  );
}

export default Products;

总结

在 Next.js 中，无论是使用 getServerSideProps 还是 getInitialProps，你都可以在服务器端方便地获取和使用 URL 参数来进行数据获取或其他操作。这对于构建服务端渲染的应用程序非常有用，可以显著提升应用的性能和用户体验。