在next.js中获取url查询参数时遇到问题

import { useRouter } from 'next/router';

const router = useRouter();
const { query } = router;

console.log(query.param1); // 输出：value1
console.log(query.param2); // 输出：value2

import { useRouter } from 'next/router';

const MyPage = ({ query }) => {
  // 使用查询参数进行页面渲染
  return (
    <div>
      <h1>Query Parameter: {query.param1}</h1>
    </div>
  );
};

MyPage.getInitialProps = async (context) => {
  const { query } = context;
  return { query };
};

export default MyPage;