Router query object not immediately populated from dynamic route params

Bug report

The router query object is not populated immediately from dynamic route params on either the server or the client.

Describe the bug

The example for Dynamic routing shows using useRouter() to extract a query param to use for rendering. However, on the server, and on client first load, query is an empty object.

This becomes a problem when relying on the param to do anything more than display it - for example using swr to retrieve data based on it.

It’s also unexpected, because it appears to be information that is knowable immediately, given either a req or a window.location.

To Reproduce

Example repro:

// [id].tsx
const TestPage: NextPage = () => {
  const router = useRouter()
  const { query } = router
  const id = query.id
  console.log('Props', process.browser, router)

  return <h1>ID: {id}</h1>
}

Actual behaviour

Visiting /42

There is one entry in the server log:

Props false undefined

The component runs twice on the client, with two entries in the client console: Props true undefined Props true 42

Expected behavior

I expect query to be populated the first time I call useRouter().

I expect a server log of Props false 42.

I expect the function to render once on the client, with one entry in the console: Props true 42

System information

• Version of Next.js: 9.3.1

[VinSpee]

I bumped into this today as well, and tried withRouter as well, but it behaves the same.

[Timer]

This should work:

const ProfilePage = ({ query }: Props) => {
  const { username } = query;
  const { data: user } = useSwr(() =>
    username ? `/api/v1/users/${username}` : false
  );

  if (!user) return null;
  return <div>{user.name}</div>;
};