The values of router.query differ during the 2 rendering.

[jim-king-2000]

Bug report

Describe the bug

A complete page refresh will lead to next.js rendering twice. The values of router.query are NOT the same between the 2 rendering. The first value is {}, and the second value is the correct one.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Go to 'https://github.com/jim-king-2000/nextbugrepro', clone the code.
2. cd nextbugrepro, npm run dev
3. Open browser, open debug tool.
4. Type "localhost:3000?a=b" in the address bar and press enter.
5. See the console window in the debug tool. There are two values printed. The first one is {} and the second one is {a: "b"}.

Expected behavior

1. It should be rendered only once on client-side.
2. The value of router.query should always be the query string of the url.

Screenshots

None.

System information

• Next.js: 9.2.2
• OS: Win10
• Browser (if applies) Chrome
• Version of Next.js: 13.9.0

Additional context

The bug causes failure of the following statement.

const [index, setIndex] = React.useState(router.query.index);

The value of index will be undefined. The second correct value of router.query.index would be ignored by React.useState(...).

[timneutkens]

Duplicate of #8259

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.