nextjs getServerSideProps 获取url中的参数

在 Next.js 中，可以使用 getServerSideProps 函数的上下文对象来获取 URL 中的参数。getServerSideProps 函数接收一个上下文对象（通常命名为 context），其中包含了有关请求的信息，包括查询参数、路径参数等。

以下是一个使用 getServerSideProps 获取 URL 中查询参数的示例：

// pages/example.js 或 pages/example/[id].js  
  
export async function getServerSideProps(context) {  
  const { query } = context;  
  const { param1, param2 } = query;  
  
  // 在这里，可以使用 param1 和 param2 进行数据获取或其他操作  
  // 例如，从 API 获取数据  
  
  const res = await fetch(`https://api.example.com/data?param1=${param1}&param2=${param2}`);  
  const data = await res.json();  
  
  // 返回数据给页面组件  
  return { props: { data } };  
}  
  
export default function Example({ data }) {  
  // 在这里，可以使用从 getServerSideProps 返回的数据  
  return (  
    <div>  
      {/* 显示数据 */}  
    </div>  
  );  
}

在上面的示例中，context.query 对象包含了 URL 中的查询参数。可以通过解构赋值的方式从 query 对象中提取所需的参数，如 param1 和 param2。然后，可以使用这些参数进行数据获取或其他操作，并将结果作为 props 返回给页面组件。

请注意，如果正在使用动态路由（例如 pages/example/id.js），还可以通过 context.params 对象访问路径参数。