add example for why-did-you-render (vercel#10662)

* add example for why-did-you-render

* Load whyDidYouRender from _app.js

To avoid custom webpack main entry modifications
as this can cause [hydration errors](vercel#10662 (review))

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

@@ -0,0 +1,45 @@
+# 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.
+
+## Deploy your own
+
+Deploy the example using [ZEIT Now](https://zeit.co/now):
+
+[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/new/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-why-did-you-render)
+
+## How to use
+
+### Using `create-next-app`
+
+Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-why-did-you-render with-why-did-you-render-app
+# or
+yarn create next-app --example with-why-did-you-render with-why-did-you-render-app
+```
+
+### Download manually
+
+Download the example:
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-why-did-you-render
+cd with-why-did-you-render
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+# or
+yarn
+yarn dev
+```
+
+Deploy it to the cloud with [ZEIT Now](https://zeit.co/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/zeit/next.js/tree/master/examples/with-why-did-you-render)

examples/with-why-did-you-render/components/header.js

@@ -0,0 +1,19 @@
+import React, { useState, useEffect } from 'react'
+
+const Header = () => {
+  const [objState, setObjState] = useState({ name: 'World' })
+
+  useEffect(() => {
+    setObjState({ name: 'World' })
+  }, [])
+
+  return (
+    <header>
+      <h1>Hello {objState.name} !</h1>
+    </header>
+  )
+}
+
+Header.whyDidYouRender = true
+
+export default Header

examples/with-why-did-you-render/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "why-did-you-render",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@welldone-software/why-did-you-render": "^4.0.4",
+    "next": "latest",
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0"
+  },
+  "license": "ISC"
+}

examples/with-why-did-you-render/pages/_app.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import whyDidYouRender from '@welldone-software/why-did-you-render'
+
+if (typeof window !== 'undefined' && process.env.NODE_ENV === 'development') {
+  whyDidYouRender(React)
+}
+
+export default ({ Component, pageProps }) => <Component {...pageProps} />

examples/with-why-did-you-render/pages/index.js

@@ -0,0 +1,7 @@
+import Header from '../components/header.js'
+
+export default () => (
+  <div>
+    <Header />
+  </div>
+)