在 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}¶m2=${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 对象访问路径参数。