无法在NextJS中获取查询参数

Question

我有API路由/api/form

// ./pages/api/form.js
import Router from 'next/router';
...
export default async function handler(req, res) {
    ...
    res.redirect(307, '/summary?username=username');
    Router.push({
        pathname: '/summary',
        query: {
            username: username
        }
    });
}

// ./pages/summary.js
import { useRouter } from 'next/router';
export default function Summary() {
    const router = useRouter();
    console.log(router.query);  // undefined
}

我无法获取查询参数。此外，如果更改Router.push和res.redirect的顺序，我仍然停留在/api/form路线上。

我还试着按照文档使用useRouter().push。尽管如此，我还是停留在/api/form路线上。

如何获得查询参数？

Answer 1

next/router允许您进行客户端转换：https://vercel.fyi/next-router-client-side。

对于用例，我建议将router.push事件放在表单提交事件中，如下所示：

<form
  onSubmit={() => {
    fetch(`/api/form`, {
      ...
    }).then((res) => {
      if (res.status === 200) {
        router.push({
          pathname: '/summary',
          query: {
            username: username
          }
        })
      }
    )
  }
}
>
...
</form>