Skip to content

docs: fix broken Next.js integration link and add inline setup guide #331

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
tranhoangtu-it wants to merge 1 commit into
base: master
Choose a base branch
from
+13 −1
Open

docs: fix broken Next.js integration link and add inline setup guide #331

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 13 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,7 +176,19 @@ if (process.env.NODE_ENV === 'development') {
* [Why Did You Render v4 Released!](https://medium.com/welldone-software/why-did-you-render-v4-released-48e0f0b99d4c) - TypeScript support, Custom hooks tracking (like React-Redux’s useSelector), Tracking of all pure components.

## Integration With Other Libraries
* [Next.js example](https://github.com/zeit/next.js/tree/canary/examples/with-why-did-you-render)
* **Next.js**: Create a `wdyr.js` file and import it as the **first import** in `pages/_app.js` (Pages Router) or `app/layout.js` (App Router). See the [Next.js integration discussion](https://github.com/welldone-software/why-did-you-render/issues/266) for setup details.
Copy link

Copilot AI Mar 28, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The README suggests importing wdyr.js as the first import in app/layout.js for the App Router. In Next.js App Router, app/layout.js is a Server Component by default, and importing/initializing why-did-you-render there can cause build/runtime issues (and won’t reliably apply to client components). Consider removing the app/layout.js instruction or changing it to a client-only entry point (e.g., a 'use client' provider/component imported by the layout) and keep the README pointing to the #266 discussion for App Router specifics.

Suggested change
* **Next.js**: Create a `wdyr.js` file and import it as the **first import** in `pages/_app.js` (Pages Router) or `app/layout.js` (App Router). See the [Next.js integration discussion](https://github.com/welldone-software/why-did-you-render/issues/266) for setup details.
* **Next.js**: Create a `wdyr.js` file. For the **Pages Router**, import it as the **first import** in `pages/_app.js`. For the **App Router**, initialize it from a client-only entry point (for example, a `'use client'` provider/component) and follow the recommendations in the [Next.js integration discussion](https://github.com/welldone-software/why-did-you-render/issues/266).

Copilot uses AI. Check for mistakes.

```js
// wdyr.js
import React from 'react';

if (process.env.NODE_ENV === 'development') {
const whyDidYouRender = require('@welldone-software/why-did-you-render');
whyDidYouRender(React, {
trackAllPureComponents: true,
});
}
```
* [React-Redux With Hooks](https://medium.com/welldone-software/why-did-you-render-v4-released-48e0f0b99d4c)
* [Mobx is currently not supported](https://github.com/welldone-software/why-did-you-render/issues/162)
* [React-Native flipper plugin made by @allen-hsu](https://github.com/allen-hsu/wdyr-flipper#wdry-flipper-reporter)
Expand Down
Loading