Next.js integration

[mikestopcontinues]

I've tried a number of locations, and I can't seem to make this work with Next. What's the recommended solution? Thanks!

[vzaidman]

I got to add it to the next.js examples indeed.

you can add it as an entry in next.config.js:

 webpack: (config, {dev, isServer, defaultLoaders}) => {
.....
    if (dev && !isServer) {
      const originalEntry = config.entry;
      config.entry = async () => {
        const entries = await originalEntry();
        if (entries['main.js'] && !entries['main.js'].includes('./common/whyDidYouRender.js')) {
          entries['main.js'].unshift('./common/whyDidYouRender.js');
        }
        return entries;
      };
    }

where ./common/whyDidYouRender.js looks like this:

import React from 'react';
import whyDidYouRender from '@welldone-software/why-did-you-render';

whyDidYouRender(React);

[vzaidman]

If anybody wants to open a next.js example here:
https://github.com/zeit/next.js/tree/master/examples

please notify me in this ticket.

[motiko]

I've created a PR vercel/next.js#10662

[vzaidman]

I've created a PR zeit/next.js#10662

beautiful!
when it's merged, you can open a PR with a link to the example added to the readme, so you would become a contributer of this library as well!
Thank you!

[motiko]

Quick update, message from maintainers:

This example is modifying the main entry using custom webpack configuration, let's try to avoid these kind of changes as they may cause unexpected issues, like hydration errors.

Please use a different method or give more information about why does it have to be this way 🙏

You can see my answer here . Hope it is enough and feel free to jump into the conversation if you feel like it @vzaidman 😃

[vzaidman]

here is a working example of integration with next.js.
If for some reason the proposed way doesn't work, you can always try using the more intrusive but reliable way I proposed at the comment above.

[mikestopcontinues]

With one of the recent Next updates, neither one of these methods work.

@vzaidman config.entry is now a function. Wrapping and resolving the function, then prepending the whyDidYouRender script completely breaks Next.

And @motiko, I'm sorry to say your solution simply doesn't result in any output.

Do either of you have any other ideas?

[francescovenica]

are these solutions working on the last versions of wdyr and next? I can't get it working...no errore but nothing in console

[mikestopcontinues]

@francescovenica I still haven't figured it out, and I gave it a good go.

[Vadorequest]

I'll give it a try. I just stumbled upon WDYU and I think that'd be a great addition to https://github.com/UnlyEd/next-right-now

Maybe I'll add into UnlyEd/next-right-now#42 if I get it to work.