Can you provide a Next.js v12 example?

[dungle-scrubs]

I've been trying to get it to work with Next.js v11 and now v12 but have never had any success. Would you mind providing an example?

Thanks

[qfdk]

@dungle-scrubs Hello, i use next v12.

You need the steps as follows :

1. Create a 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,
        onlyLogs: true,
        titleColor: "green",
    });
}

2. Import the wdyr.js in _app.js

import '../hooks/wdyr';

3. Add props in the compostant

const XXX=()=>{
    return <h1>xxx</h1>
}
XXX.whyDidYouRender = true;
export default XXX;

[dungle-scrubs]

@qfdk Thank you, that helped.

[apperside]

For me it didn't worked untlll I added

"jsxImportSource": "@welldone-software/why-did-you-render"

to tsconfig.ts

[mikechabot]

@apperside Thanks. Can confirm this was also the solution to allow wdyr logging for Next 13.