docs: fix broken Next.js integration link and add inline setup guide#331
Conversation
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 welldone-software#295
There was a problem hiding this comment.
Pull request overview
Updates the documentation to remove a dead Next.js example link and replace it with an inline setup snippet plus a pointer to the existing Next.js integration discussion, addressing the broken-link report in #295.
Changes:
- Removed the broken external Next.js example link (old
zeit/next.jsURL / removed example). - Added an inline
wdyr.jssetup snippet for Next.js. - Linked to the Next.js integration discussion (#266) for broader/App Router guidance.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
|
||
| ## 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. |
There was a problem hiding this comment.
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.
| * **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). |
Problem
The Next.js integration link in the README points to
https://github.com/zeit/next.js/tree/canary/examples/with-why-did-you-renderwhich is broken for two reasons:zeittovercelwith-why-did-you-renderexample was removed from the Next.js repositoryThis was reported in #295.
Solution
Changes
README.md: replaced dead link with inlinewdyr.jssetup example and a link to the integration discussionFixes #295