From 5e23e4f1cd9f3b0873d405fa24fb5e344e2a9cd6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tr=E1=BA=A7n=20Ho=C3=A0ng=20T=C3=BA?= Date: Sat, 28 Mar 2026 17:14:31 +0700 Subject: [PATCH] docs: fix broken Next.js integration link and add setup guide The previous link to zeit/next.js example was broken as: 1. The GitHub org moved from zeit to vercel 2. The with-why-did-you-render example was removed from the repo Replaces the dead link with inline Next.js Pages Router setup instructions. Fixes #295 --- README.md | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index c8ccddd..664b5b9 100644 --- a/README.md +++ b/README.md @@ -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. + +```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)