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)