updated the readme

examples/with-why-did-you-render/README.md

@@ -1,7 +1,35 @@
 # Why did you render
 
-This is a simple example of getting [why-did-you-render](https://github.com/welldone-software/why-did-you-render) up and running.
-The header component will rerender despite the state staying the same. You can see details in developer console.
+This is a simple example of how to use [why-did-you-render](https://github.com/welldone-software/why-did-you-render).
+
+The header component will rerender despite the state staying the same.
+
+You can see `why-did-you-render` console logs about this redundant re-render in the developer console.
+
+## Installation guide
+
+1. add `why-did-you-render` to the project by running:
+
+   ```
+   yarn add @welldone-software/why-did-you-render
+   ```
+
+1. Create `scripts/wdyr.js` with the code:
+
+   ```jsx
+   import React from 'react'
+
+   if (process.env.NODE_ENV === 'development') {
+     if (typeof window !== 'undefined') {
+       const whyDidYouRender = require('@welldone-software/why-did-you-render')
+       whyDidYouRender(React, {
+         trackAllPureComponents: true,
+       })
+     }
+   }
+   ```
+
+1. import `scripts/wdyr.js` as the first import of `_app`.
 
 ## Deploy your own
 
@@ -20,5 +48,3 @@ yarn create next-app --example with-why-did-you-render with-why-did-you-render-a
 ```
 
 Deploy it to the cloud with [Vercel](https://vercel.com/new?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
-
-[![Deploy To Now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/vercel/next.js/tree/master/examples/with-why-did-you-render)