Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Using `rewrites` in `next.config.js` causes double renders

See original GitHub issue

Run `next info` (available from version 12.0.8 and up)

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 21.2.0: Sun Nov 28 20:29:10 PST 2021; root:xnu-8019.61.5~1/RELEASE_ARM64_T8101
Binaries:
  Node: 16.13.1
  npm: 8.3.0
  Yarn: 1.22.17
  pnpm: 6.11.0
Relevant packages:
  next: 12.0.8-canary.17
  react: 17.0.2
  react-dom: 17.0.2

What version of Next.js are you using?

12.0.7 and 12.0.8-canary.17 both reproduce

What version of Node.js are you using?

16.13.1

What browser are you using?

Chrome and Safari both reproduce

What operating system are you using?

macOS 12.1 (21C52)

How are you deploying your application?

Vercel, next dev and next start all reproduce

Describe the Bug

When a rewrites function is specified in next.config.js, every page renders twice in the browser, regardless of the nature of this function.

Expected Behavior

Specifying a rewrites function does not cause double renders.

To Reproduce

Clone https://github.com/valerie-makes/nextjs-rewrites-bug
Install dependencies: npm install
Build and start the app: npm run build && npm start
Visit the index page and observe the browser console:
```
rendering Home
rendering Home
```
Comment out the rewrites function in next.config.js
Repeat Step 3 and Step 4:
```
rendering Home
```

Issue Analytics

State:
Created 2 years ago
Comments:8 (5 by maintainers)

Top GitHub Comments

2reactions

MaedahBatoolcommented, Feb 7, 2022

Submitted PR to update these details. 😃

2reactions

balazsorban44commented, Jan 6, 2022

Thank you for raising this issue. This is actually expected when you have a rewrites in your config and is vaguely hinted at in the docs here: https://nextjs.org/docs/advanced-features/automatic-static-optimization

During prerendering, the router’s query object will be empty since we do not have query information to provide during this phase. After hydration, Next.js will trigger an update to your application to provide the route parameters in the query object.

So what is happening in your code is that the page gets statically optimized at build time without query params.

Rewrites can have params that we need to provide in the query e.g. /some/:path so if any rewrites are present, we trigger a re-render iterating over the rewrites to provide the parsed params.

We will try to make this more clear in the docs.