Next.js useRouter() query: { amp: undefined }

I am having issues passing in query objects to useRouter() hook. I am attempting to capture URL params and pass it into a page component pages/post.js server-side using koa. and koa-router.

I am using Koa.js as my middleware based on next.js example: custom-koa-server and using Next’s documentation: Custom routes (using props from URL)

// server.js

app.prepare().then(() => {
  const server = new Koa();
  const router = new Router();

  router.get("/post/:slug", async ctx => {
    await app.render(ctx.req, ctx.res, "/post", { slug: ctx.params.slug });
    ctx.respond = false;
  });

  router.get("*", async ctx => {
    await handle(ctx.req, ctx.res);
    ctx.respond = false;
  });

  server.use(async (ctx, next) => {
    ctx.res.statusCode = 200;
    await next();
  });

  server.use(router.routes());
  server.listen(port, () => {
    console.log(`> Ready on http://localhost:${port}`);
  });
});

// pages/post.js

import { useRouter } from "next/router";

const Post = () => {
  const router = useRouter();
  console.log(useRouter());
  const { slug } = router.query;

  return <p>My Blog Post: {slug}</p>;
};

export default Post;

useRoute() console.log

// output: console.log(useRoute());

ServerRouter {
  route: '/post',
  pathname: '/post',
  query: { amp: undefined },
  asPath: '/post/testing' }

When attempting to access the query object, no matter what, I get { amp: undefined }

Any help on this will be super helpful! Thank you in advance!

[bduffany]

It seems a bit user-unfriendly that the router.query is not properly initialized until first render. What’s the technical reasoning behind this?

[chanced]

@jingyuanhe

All you need to do to resolve this is useEffect to make sure it runs after router has initialized.

For example:

  const [queryId, setQueryId] = useState(null)
  useEffect(()=> {
    if(router && router.query) {
      setQueryId(router.query.id)
    }
  }, [router])