From dbad9db68c49f32603b42b2a0f1851abe454cfbf Mon Sep 17 00:00:00 2001
From: Joe Haddad <joe.haddad@zeit.co>
Date: Mon, 18 May 2020 17:44:18 -0400
Subject: [PATCH] Update Examples for Fast Refresh (#13068)

---
 .eslintrc.json                                |  22 +-
 examples/amp-story/pages/index.js             | 230 ++++++------
 examples/analyze-bundles/pages/about.js       |   4 +-
 examples/analyze-bundles/pages/contact.js     |   4 +-
 .../pages/about.js                            |  20 +-
 .../pages/about.js                            |  20 +-
 .../api-routes-rest/pages/api/user/[id].js    |   2 +-
 examples/api-routes-rest/pages/api/users.js   |   2 +-
 examples/api-routes/components/Person.js      |  16 +-
 examples/api-routes/pages/api/people/[id].js  |   2 +-
 examples/api-routes/pages/api/people/index.js |   2 +-
 examples/basic-css/pages/index.js             |  36 +-
 examples/basic-export/pages/about.js          |   4 +-
 examples/basic-export/pages/about2.js         |   4 +-
 examples/basic-export/pages/day/index.js      |   4 +-
 examples/basic-export/pages/index.js          |  18 +-
 examples/cms-contentful/components/date.js    |  12 +-
 .../cms-contentful/pages/api/exit-preview.js  |   2 +-
 examples/cms-contentful/pages/api/preview.js  |   2 +-
 .../cms-datocms/pages/api/exit-preview.js     |   2 +-
 examples/cms-datocms/pages/api/preview.js     |   2 +-
 .../cms-prismic/pages/api/exit-preview.js     |   2 +-
 examples/cms-prismic/pages/api/preview.js     |   2 +-
 examples/cms-sanity/pages/api/exit-preview.js |   2 +-
 examples/cms-sanity/pages/api/preview.js      |   2 +-
 .../cms-takeshape/pages/api/exit-preview.js   |   2 +-
 examples/cms-takeshape/pages/api/preview.js   |   2 +-
 examples/custom-server-actionhero/pages/a.js  |   4 +-
 examples/custom-server-actionhero/pages/b.js  |   4 +-
 .../custom-server-actionhero/pages/index.js   |  30 +-
 examples/custom-server-express/pages/a.js     |   4 +-
 examples/custom-server-express/pages/b.js     |   4 +-
 examples/custom-server-express/pages/index.js |  30 +-
 examples/custom-server-fastify/pages/a.js     |   4 +-
 examples/custom-server-fastify/pages/b.js     |   4 +-
 examples/custom-server-fastify/pages/index.js |  30 +-
 examples/custom-server-hapi/pages/a.js        |   4 +-
 examples/custom-server-hapi/pages/b.js        |   4 +-
 examples/custom-server-hapi/pages/index.js    |  30 +-
 examples/custom-server-koa/pages/a.js         |   4 +-
 examples/custom-server-koa/pages/b.js         |   4 +-
 examples/custom-server-koa/pages/index.js     |  30 +-
 examples/custom-server-polka/pages/a.js       |   4 +-
 examples/custom-server-polka/pages/b.js       |   4 +-
 examples/custom-server-polka/pages/index.js   |  30 +-
 examples/custom-server-typescript/pages/a.tsx |   4 +-
 examples/custom-server-typescript/pages/b.tsx |   4 +-
 .../custom-server-typescript/pages/index.tsx  |  30 +-
 examples/custom-server/pages/a.js             |   4 +-
 examples/custom-server/pages/b.js             |   4 +-
 examples/custom-server/pages/index.js         |  30 +-
 examples/gh-pages/pages/about.js              |  20 +-
 examples/gh-pages/pages/index.js              |  18 +-
 examples/head-elements/pages/index.js         |  22 +-
 .../layout-component/components/layout.js     |  57 +--
 examples/layout-component/pages/about.js      |  12 +-
 examples/layout-component/pages/contact.js    |  12 +-
 examples/layout-component/pages/index.js      |  12 +-
 .../nested-components/components/paragraph.js |  24 +-
 examples/nested-components/components/post.js |  38 +-
 examples/nested-components/pages/index.js     |  72 ++--
 .../progressive-render/components/Loading.js  |  28 +-
 examples/ssr-caching/pages/blog/[id].js       |   2 +-
 examples/ssr-caching/pages/index.js           |  40 ++-
 examples/svg-components/pages/index.js        |  26 +-
 examples/using-preact/pages/about.js          |   4 +-
 examples/using-preact/pages/index.js          |  18 +-
 examples/using-router/components/Header.js    |  14 +-
 examples/using-router/pages/about.js          |  14 +-
 examples/using-router/pages/index.js          |  14 +-
 .../components/header.js                      |  12 +-
 examples/with-absolute-imports/pages/index.js |  12 +-
 .../components/app.js                         |   2 +-
 .../pages/index.js                            |   2 +-
 examples/with-ant-design-less/pages/index.js  | 132 ++++---
 .../with-ant-design-mobile/pages/about.js     |  16 +-
 .../with-ant-design-mobile/pages/index.js     |  16 +-
 .../layouts/main.tsx                          |  22 +-
 .../pages/example.tsx                         |   4 +-
 .../pages/index.tsx                           | 118 +++---
 .../pages/welcome.tsx                         |   4 +-
 examples/with-ant-design/pages/index.js       | 163 +++++----
 examples/with-aphrodite/pages/index.js        |  12 +-
 examples/with-apollo/components/App.js        |  92 ++---
 .../with-apollo/components/ErrorMessage.js    |  28 +-
 examples/with-app-layout/pages/_app.js        |  12 +-
 examples/with-app-layout/pages/index.js       |   2 +-
 .../components/ButtonComponent.js             |   2 +-
 .../components/CheckboxComponent.js           |   2 +-
 .../components/DateTimePickerComponent.js     |   2 +-
 .../components/DropdownMenuComponent.js       |   2 +-
 examples/with-atlaskit/pages/index.js         |   2 +-
 examples/with-cerebral/components/Clock.js    |   2 +-
 .../with-cerebral/modules/clock/provider.js   |   2 +-
 .../with-cookie-auth-fauna/pages/api/login.js |   2 +-
 .../pages/api/logout.js                       |   2 +-
 .../pages/api/profile.js                      |   2 +-
 .../pages/api/signup.js                       |   2 +-
 examples/with-cxs/pages/index.js              |  12 +-
 examples/with-docker/pages/index.js           |   2 +-
 examples/with-dotenv/pages/index.js           |   4 +-
 .../layouts/BlueLayout.js                     |   2 +-
 .../layouts/GreenLayout.js                    |   2 +-
 .../layouts/RedLayout.js                      |   2 +-
 .../with-dynamic-import/components/Header.js  |  22 +-
 .../with-dynamic-import/components/hello1.js  |   4 +-
 .../with-dynamic-import/components/hello2.js  |   4 +-
 .../with-dynamic-import/components/hello3.js  |   4 +-
 .../with-dynamic-import/components/hello4.js  |   4 +-
 .../with-dynamic-import/components/hello5.js  |   4 +-
 .../with-electron/renderer/pages/index.js     |   2 +-
 .../pages/index.js                            |   2 +-
 examples/with-fela/pages/index.js             |  14 +-
 .../utils/auth/initFirebase.js                |   2 +-
 .../utils/auth/logout.js                      |   2 +-
 .../utils/middleware/commonMiddleware.js      |   4 +-
 .../utils/middleware/cookieSession.js         |  14 +-
 .../utils/middleware/cookieSessionRefresh.js  |  10 +-
 .../utils/pageWrappers/withAuthUser.js        |   2 +-
 .../utils/pageWrappers/withAuthUserInfo.js    |   2 +-
 .../with-firebase-hosting/src/pages/about.jsx |  12 +-
 .../with-firebase-hosting/src/pages/index.jsx |  12 +-
 examples/with-firebase/context/userContext.js |   2 +-
 examples/with-firebase/pages/_app.js          |  12 +-
 examples/with-firebase/pages/index.js         |   2 +-
 examples/with-flow/components/Page.js         |  21 +-
 examples/with-flow/pages/about.js             |  12 +-
 examples/with-flow/pages/contact.js           |  12 +-
 examples/with-flow/pages/index.js             |  12 +-
 examples/with-glamor/pages/index.js           |   4 +-
 .../components/Header.js                      |  48 +--
 .../components/Page.js                        |  14 +-
 .../components/amp/AmpAnalytics.js            |  32 +-
 .../components/amp/AmpIncludeCustomElement.js |  34 +-
 .../pages/_document.js                        |   2 +-
 .../with-google-analytics-amp/pages/about.js  |  12 +-
 .../pages/contact.js                          |   2 +-
 .../with-google-analytics-amp/pages/index.js  |  12 +-
 .../components/Header.js                      |  48 +--
 .../with-google-analytics/components/Page.js  |  14 +-
 .../with-google-analytics/pages/_document.js  |   2 +-
 examples/with-google-analytics/pages/about.js |  12 +-
 .../with-google-analytics/pages/contact.js    |   2 +-
 examples/with-google-analytics/pages/index.js |  12 +-
 .../with-graphql-faunadb/components/Footer.js | 340 +++++++++---------
 .../components/GuestbookEntry.js              | 106 +++---
 .../components/GuestbookEntryDivider.js       |  38 +-
 .../with-graphql-faunadb/components/Header.js |  32 +-
 .../with-graphql-faunadb/components/Hero.js   |   2 +-
 examples/with-graphql-hooks/components/app.js |  86 ++---
 .../components/error-message.js               |  28 +-
 .../lib/with-graphql-client.js                |   2 +-
 examples/with-graphql-hooks/pages/about.js    |  52 +--
 examples/with-graphql-hooks/pages/index.js    |  14 +-
 examples/with-graphql-react/pages/index.js    |   2 +-
 examples/with-grommet/pages/index.js          |  20 +-
 examples/with-http2/pages/about.js            |  18 +-
 examples/with-http2/pages/index.js            |  18 +-
 examples/with-iron-session/lib/fetchJson.js   |   2 +-
 examples/with-linaria/pages/index.js          |   2 +-
 .../with-lingui/components/LangSwitcher.js    |   2 +-
 examples/with-lingui/components/withLang.js   |   5 +-
 examples/with-mdx/components/button.js        |  30 +-
 .../pages/index.tsx                           |   2 +-
 .../pages/other.tsx                           |   2 +-
 .../pages/ssg.tsx                             |   2 +-
 .../pages/ssr.tsx                             |   2 +-
 .../with-mobx-state-tree/components/Clock.js  |   2 +-
 examples/with-mobx-state-tree/pages/index.js  |   2 +-
 examples/with-mobx-state-tree/pages/other.js  |   2 +-
 examples/with-mobx-state-tree/pages/ssg.js    |   2 +-
 examples/with-mobx-state-tree/pages/ssr.js    |   2 +-
 examples/with-mocha/pages/index.js            |  22 +-
 .../with-next-css/component/hello-world.js    |  12 +-
 examples/with-next-css/pages/index.js         |  12 +-
 examples/with-next-less/pages/index.js        |   8 +-
 examples/with-next-offline/pages/index.js     |   6 +-
 .../with-next-sass/components/hello-world.js  |  12 +-
 examples/with-next-sass/pages/index.js        |  12 +-
 examples/with-next-seo/pages/index.js         |  84 ++---
 examples/with-next-seo/pages/jsonld.js        |  50 +--
 examples/with-now-env/pages/index.js          |  45 +--
 examples/with-orbit-components/pages/index.js |   2 +-
 examples/with-patternfly/pages/index.js       |   2 +-
 examples/with-polyfills/pages/index.js        |   4 +-
 examples/with-portals-ssr/pages/_document.js  |   2 +-
 examples/with-portals/pages/_document.js      |   2 +-
 examples/with-prefetching/pages/about.js      |   4 +-
 examples/with-prefetching/pages/contact.js    |   4 +-
 examples/with-prefetching/pages/features.js   |   4 +-
 examples/with-prefetching/pages/index.js      |   4 +-
 examples/with-quill-js/pages/index.js         |   6 +-
 examples/with-react-ga/pages/about.js         |   4 +-
 examples/with-react-ga/pages/index.js         |  18 +-
 examples/with-react-helmet/pages/_document.js |   2 +-
 examples/with-react-helmet/pages/index.js     |   4 +-
 examples/with-react-intl/components/Layout.js |   2 +-
 examples/with-react-intl/components/Nav.js    |  56 +--
 examples/with-react-intl/pages/about.js       |   2 +-
 examples/with-react-intl/pages/index.js       |   2 +-
 examples/with-react-md/pages/index.js         |   2 +-
 .../with-react-native-web/pages/alternate.js  |  22 +-
 examples/with-react-toolbox/pages/index.js    |  26 +-
 .../with-redux-persist/components/clock.js    |   2 +-
 .../lib/with-redux-store.js                   |   2 +-
 .../with-redux-thunk/lib/with-redux-store.js  |   2 +-
 examples/with-redux-thunk/store.js            |   2 +-
 .../with-redux-wrapper/components/Clock.js    |   2 +-
 .../with-redux-wrapper/store/count/reducer.js |   2 +-
 .../with-redux-wrapper/store/tick/reducer.js  |   2 +-
 examples/with-relay-modern/lib/withData.js    |   2 +-
 examples/with-rematch/shared/withRematch.js   |   2 +-
 .../components/Header.js                      |  48 +--
 .../with-segment-analytics/pages/_document.js |   2 +-
 .../with-segment-analytics/pages/about.js     |  12 +-
 .../with-segment-analytics/pages/contact.js   |   2 +-
 .../with-segment-analytics/pages/index.js     |  12 +-
 examples/with-semantic-ui/pages/index.js      |  84 ++---
 examples/with-shallow-routing/pages/about.js  |   4 +-
 .../with-static-export/components/post.js     |  20 +-
 .../with-static-export/pages/post/[id].js     |  31 +-
 .../packages/web-app/pages/index.js           |  12 +-
 examples/with-storybook/components/index.js   |   4 +-
 examples/with-storybook/pages/index.js        |  15 +-
 .../with-strict-csp-hash/pages/_document.js   |   2 +-
 examples/with-strict-csp-hash/pages/index.js  |   4 +-
 examples/with-strict-csp/pages/index.js       |   4 +-
 .../pages/api/checkout_sessions/[id].ts       |   5 +-
 .../pages/api/checkout_sessions/index.ts      |   5 +-
 .../pages/api/payment_intents/index.ts        |   5 +-
 examples/with-style-sheet/pages/index.js      |  14 +-
 .../with-styled-components-rtl/pages/index.js |   4 +-
 .../with-styled-components/pages/index.js     |   4 +-
 .../with-styled-jsx-plugins/pages/index.js    |  42 +--
 examples/with-styled-jsx-scss/pages/index.js  |  40 ++-
 examples/with-styletron/pages/index.js        |   2 +-
 .../with-typescript-graphql/pages/about.tsx   |  20 +-
 .../pages/index.tsx                           |   5 +-
 .../with-typescript/pages/api/users/index.ts  |   4 +-
 examples/with-typestyle/pages/index.js        |   4 +-
 .../pages/index.js                            |  20 +-
 .../pages/index.js                            |   6 +-
 .../pages/contact.js                          |   4 +-
 .../with-why-did-you-render/pages/_app.js     |   4 +-
 .../with-why-did-you-render/pages/index.js    |  12 +-
 examples/with-xstate/components/Counter.js    |  22 +-
 .../packages/web-app/pages/index.js           |  16 +-
 examples/with-zones/blog/pages/blog/index.js  |  43 ++-
 .../with-zones/blog/pages/blog/post/[id].js   |   2 +-
 examples/with-zones/home/components/Header.js |   4 +-
 examples/with-zones/home/pages/about.js       |   4 +-
 examples/with-zones/home/pages/index.js       |  28 +-
 package.json                                  |   1 +
 yarn.lock                                     |  67 +++-
 254 files changed, 2338 insertions(+), 1888 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index 97c7a3b57c..02206f92a1 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,7 +1,7 @@
 {
   "root": true,
   "parser": "babel-eslint",
-  "plugins": ["react", "react-hooks", "jest"],
+  "plugins": ["react", "react-hooks", "jest", "import"],
   "env": {
     "browser": true,
     "commonjs": true,
@@ -91,6 +91,26 @@
         "packages/create-next-app/templates/**/*"
       ],
       "rules": { "react/react-in-jsx-scope": "off" }
+    },
+    {
+      "files": ["examples/**/*"],
+      "rules": {
+        "import/no-anonymous-default-export": [
+          "error",
+          {
+            // React components:
+            "allowArrowFunction": false,
+            "allowAnonymousClass": false,
+            "allowAnonymousFunction": false,
+
+            // Non-React stuff:
+            "allowArray": true,
+            "allowCallExpression": true,
+            "allowLiteral": true,
+            "allowObject": true
+          }
+        ]
+      }
     }
   ],
   "rules": {
diff --git a/examples/amp-story/pages/index.js b/examples/amp-story/pages/index.js
index d7b9e05dcc..7446873a84 100644
--- a/examples/amp-story/pages/index.js
+++ b/examples/amp-story/pages/index.js
@@ -2,122 +2,124 @@ import Head from 'next/head'
 
 export const config = { amp: true }
 
-export default () => (
-  <>
-    <Head>
-      <title>Example AMP Story in Next.js</title>
-      <script
-        async
-        key="amp-story"
-        custom-element="amp-story"
-        src="https://cdn.ampproject.org/v0/amp-story-1.0.js"
-      />
-      <script
-        async
-        key="amp-video"
-        custom-element="amp-video"
-        src="https://cdn.ampproject.org/v0/amp-video-0.1.js"
-      />
-    </Head>
+export default function Home() {
+  return (
+    <>
+      <Head>
+        <title>Example AMP Story in Next.js</title>
+        <script
+          async
+          key="amp-story"
+          custom-element="amp-story"
+          src="https://cdn.ampproject.org/v0/amp-story-1.0.js"
+        />
+        <script
+          async
+          key="amp-video"
+          custom-element="amp-video"
+          src="https://cdn.ampproject.org/v0/amp-video-0.1.js"
+        />
+      </Head>
 
-    <amp-story
-      standalone=""
-      title="Stories in AMP - Hello World"
-      publisher="AMP Project"
-      publisher-logo-src="https://amp.dev/favicons/coast-228x228.png"
-      poster-portrait-src="https://amp.dev/static/samples/img/story_dog2_portrait.jpg"
-      poster-square-src="https://amp.dev/static/samples/img/story_dog2_square.jpg"
-      poster-landscape-src="https://amp.dev/static/samples/img/story_dog2_landscape.jpg"
-    >
-      {/* <!-- A story consists of one or more pages. Each page is declared by an `amp-story-page` element. Pages are designed by layering videos, images and text. Here we have a page that uses two layers. One layer filling the available space with an image and one text layer that shows a heading. --> */}
-      <amp-story-page id="page-1">
-        <amp-story-grid-layer template="fill">
-          <amp-img
-            src="https://amp.dev/static/samples/img/story_dog2.jpg"
-            width="720"
-            height="1280"
-            layout="responsive"
-          />
-        </amp-story-grid-layer>
-        <amp-story-grid-layer template="vertical">
-          <h1>Hello World</h1>
-          <p>This is an AMP Story.</p>
-        </amp-story-grid-layer>
-      </amp-story-page>
-
-      {/* <!-- Here we have a page consisting of a video which autoplays and loops. --> */}
-      <amp-story-page id="page-2">
-        <amp-story-grid-layer template="fill">
-          <amp-video
-            autoplay=""
-            loop=""
-            width="720"
-            height="960"
-            poster="https://amp.dev/static/samples/img/story_video_dog_cover.jpg"
-            layout="responsive"
-          >
-            <source
-              src="https://amp.dev/static/samples/video/story_video_dog.mp4"
-              type="video/mp4"
+      <amp-story
+        standalone=""
+        title="Stories in AMP - Hello World"
+        publisher="AMP Project"
+        publisher-logo-src="https://amp.dev/favicons/coast-228x228.png"
+        poster-portrait-src="https://amp.dev/static/samples/img/story_dog2_portrait.jpg"
+        poster-square-src="https://amp.dev/static/samples/img/story_dog2_square.jpg"
+        poster-landscape-src="https://amp.dev/static/samples/img/story_dog2_landscape.jpg"
+      >
+        {/* <!-- A story consists of one or more pages. Each page is declared by an `amp-story-page` element. Pages are designed by layering videos, images and text. Here we have a page that uses two layers. One layer filling the available space with an image and one text layer that shows a heading. --> */}
+        <amp-story-page id="page-1">
+          <amp-story-grid-layer template="fill">
+            <amp-img
+              src="https://amp.dev/static/samples/img/story_dog2.jpg"
+              width="720"
+              height="1280"
+              layout="responsive"
             />
-          </amp-video>
-        </amp-story-grid-layer>
-      </amp-story-page>
+          </amp-story-grid-layer>
+          <amp-story-grid-layer template="vertical">
+            <h1>Hello World</h1>
+            <p>This is an AMP Story.</p>
+          </amp-story-grid-layer>
+        </amp-story-page>
 
-      {/* <!-- Pre-defined entry animations make it possible to create dynamic pages without videos. The length and initial delay can be customized using the `animate-in-duration` and `animate-in-delay` properties. The [animations sample](/documentation/examples/visual-effects/amp_story_animations/) shows all available animantions in action. --> */}
-      <amp-story-page id="animation-demo">
-        <amp-story-grid-layer template="fill">
-          <amp-img
-            src="https://amp.dev/static/samples/img/story_dog4.jpg"
-            animate-in="fly-in-top"
-            width="720"
-            height="1280"
-            layout="responsive"
-          />
-        </amp-story-grid-layer>
-        <amp-story-grid-layer template="thirds">
-          <h2
-            animate-in="fly-in-bottom"
-            grid-area="lower-third"
-            animate-in-delay="0.4s"
-          >
-            Best walk ever!
-          </h2>
-        </amp-story-grid-layer>
-      </amp-story-page>
+        {/* <!-- Here we have a page consisting of a video which autoplays and loops. --> */}
+        <amp-story-page id="page-2">
+          <amp-story-grid-layer template="fill">
+            <amp-video
+              autoplay=""
+              loop=""
+              width="720"
+              height="960"
+              poster="https://amp.dev/static/samples/img/story_video_dog_cover.jpg"
+              layout="responsive"
+            >
+              <source
+                src="https://amp.dev/static/samples/video/story_video_dog.mp4"
+                type="video/mp4"
+              />
+            </amp-video>
+          </amp-story-grid-layer>
+        </amp-story-page>
 
-      {/* <!-- Stories can use predefined layouts to style the page. Here we're using the `thirds` template. For an overview about the available layouts take a look at the [layouts sample](/documentation/examples/style-layout/amp_story_layouts/). --> */}
-      <amp-story-page id="layout-demo">
-        <amp-story-grid-layer template="thirds">
-          <amp-img
-            grid-area="upper-third"
-            src="https://amp.dev/static/samples/img/story_thirds_1.jpg"
-            width="560"
-            height="420"
-            layout="responsive"
-          />
-          <amp-img
-            grid-area="middle-third"
-            src="https://amp.dev/static/samples/img/story_thirds_2.jpg"
-            width="560"
-            height="420"
-            layout="responsive"
-          />
-          <amp-img
-            grid-area="lower-third"
-            src="https://amp.dev/static/samples/img/story_thirds_3.jpg"
-            width="560"
-            height="420"
-            layout="responsive"
-          />
-        </amp-story-grid-layer>
-      </amp-story-page>
+        {/* <!-- Pre-defined entry animations make it possible to create dynamic pages without videos. The length and initial delay can be customized using the `animate-in-duration` and `animate-in-delay` properties. The [animations sample](/documentation/examples/visual-effects/amp_story_animations/) shows all available animantions in action. --> */}
+        <amp-story-page id="animation-demo">
+          <amp-story-grid-layer template="fill">
+            <amp-img
+              src="https://amp.dev/static/samples/img/story_dog4.jpg"
+              animate-in="fly-in-top"
+              width="720"
+              height="1280"
+              layout="responsive"
+            />
+          </amp-story-grid-layer>
+          <amp-story-grid-layer template="thirds">
+            <h2
+              animate-in="fly-in-bottom"
+              grid-area="lower-third"
+              animate-in-delay="0.4s"
+            >
+              Best walk ever!
+            </h2>
+          </amp-story-grid-layer>
+        </amp-story-page>
 
-      {/* <!-- A "bookend" panel containing links to other resources will appear on the last page of your story if you include an `amp-story-bookend` that references a [bookend JSON config](/static/samples/json/bookend.json). --> */}
-      <amp-story-bookend
-        src="https://amp.dev/static/samples/json/bookend.json"
-        layout="nodisplay"
-      />
-    </amp-story>
-  </>
-)
+        {/* <!-- Stories can use predefined layouts to style the page. Here we're using the `thirds` template. For an overview about the available layouts take a look at the [layouts sample](/documentation/examples/style-layout/amp_story_layouts/). --> */}
+        <amp-story-page id="layout-demo">
+          <amp-story-grid-layer template="thirds">
+            <amp-img
+              grid-area="upper-third"
+              src="https://amp.dev/static/samples/img/story_thirds_1.jpg"
+              width="560"
+              height="420"
+              layout="responsive"
+            />
+            <amp-img
+              grid-area="middle-third"
+              src="https://amp.dev/static/samples/img/story_thirds_2.jpg"
+              width="560"
+              height="420"
+              layout="responsive"
+            />
+            <amp-img
+              grid-area="lower-third"
+              src="https://amp.dev/static/samples/img/story_thirds_3.jpg"
+              width="560"
+              height="420"
+              layout="responsive"
+            />
+          </amp-story-grid-layer>
+        </amp-story-page>
+
+        {/* <!-- A "bookend" panel containing links to other resources will appear on the last page of your story if you include an `amp-story-bookend` that references a [bookend JSON config](/static/samples/json/bookend.json). --> */}
+        <amp-story-bookend
+          src="https://amp.dev/static/samples/json/bookend.json"
+          layout="nodisplay"
+        />
+      </amp-story>
+    </>
+  )
+}
diff --git a/examples/analyze-bundles/pages/about.js b/examples/analyze-bundles/pages/about.js
index 5fd65c2baf..46817af02a 100644
--- a/examples/analyze-bundles/pages/about.js
+++ b/examples/analyze-bundles/pages/about.js
@@ -1 +1,3 @@
-export default () => <div>About us</div>
+export default function About() {
+  return <div>About us</div>
+}
diff --git a/examples/analyze-bundles/pages/contact.js b/examples/analyze-bundles/pages/contact.js
index b0fdbcd7a4..c3dcb2c564 100644
--- a/examples/analyze-bundles/pages/contact.js
+++ b/examples/analyze-bundles/pages/contact.js
@@ -1 +1,3 @@
-export default () => <div>This is the contact page.</div>
+export default function Contact() {
+  return <div>This is the contact page.</div>
+}
diff --git a/examples/api-routes-apollo-server-and-client-auth/pages/about.js b/examples/api-routes-apollo-server-and-client-auth/pages/about.js
index 37a11a9e09..4d21f1676c 100644
--- a/examples/api-routes-apollo-server-and-client-auth/pages/about.js
+++ b/examples/api-routes-apollo-server-and-client-auth/pages/about.js
@@ -1,11 +1,13 @@
 import Link from 'next/link'
 
-export default () => (
-  <div>
-    This is a static page goto{' '}
-    <Link href="/">
-      <a>dynamic</a>
-    </Link>{' '}
-    page.
-  </div>
-)
+export default function About() {
+  return (
+    <div>
+      This is a static page goto{' '}
+      <Link href="/">
+        <a>dynamic</a>
+      </Link>{' '}
+      page.
+    </div>
+  )
+}
diff --git a/examples/api-routes-apollo-server-and-client/pages/about.js b/examples/api-routes-apollo-server-and-client/pages/about.js
index 37a11a9e09..4d21f1676c 100644
--- a/examples/api-routes-apollo-server-and-client/pages/about.js
+++ b/examples/api-routes-apollo-server-and-client/pages/about.js
@@ -1,11 +1,13 @@
 import Link from 'next/link'
 
-export default () => (
-  <div>
-    This is a static page goto{' '}
-    <Link href="/">
-      <a>dynamic</a>
-    </Link>{' '}
-    page.
-  </div>
-)
+export default function About() {
+  return (
+    <div>
+      This is a static page goto{' '}
+      <Link href="/">
+        <a>dynamic</a>
+      </Link>{' '}
+      page.
+    </div>
+  )
+}
diff --git a/examples/api-routes-rest/pages/api/user/[id].js b/examples/api-routes-rest/pages/api/user/[id].js
index 07b5e4f419..3e58bc4e1d 100644
--- a/examples/api-routes-rest/pages/api/user/[id].js
+++ b/examples/api-routes-rest/pages/api/user/[id].js
@@ -1,4 +1,4 @@
-export default (req, res) => {
+export default function userHandler(req, res) {
   const {
     query: { id, name },
     method,
diff --git a/examples/api-routes-rest/pages/api/users.js b/examples/api-routes-rest/pages/api/users.js
index 288d6f4229..2b7865b70b 100644
--- a/examples/api-routes-rest/pages/api/users.js
+++ b/examples/api-routes-rest/pages/api/users.js
@@ -1,7 +1,7 @@
 // Fake users data
 const users = [{ id: 1 }, { id: 2 }, { id: 3 }]
 
-export default (req, res) => {
+export default function handler(req, res) {
   // Get data from your database
   res.status(200).json(users)
 }
diff --git a/examples/api-routes/components/Person.js b/examples/api-routes/components/Person.js
index d43584b166..a53dc51a2b 100644
--- a/examples/api-routes/components/Person.js
+++ b/examples/api-routes/components/Person.js
@@ -1,9 +1,11 @@
 import Link from 'next/link'
 
-export default ({ person }) => (
-  <li>
-    <Link href="/person/[id]" as={`/person/${person.id}`}>
-      <a>{person.name}</a>
-    </Link>
-  </li>
-)
+export default function Person({ person }) {
+  return (
+    <li>
+      <Link href="/person/[id]" as={`/person/${person.id}`}>
+        <a>{person.name}</a>
+      </Link>
+    </li>
+  )
+}
diff --git a/examples/api-routes/pages/api/people/[id].js b/examples/api-routes/pages/api/people/[id].js
index d114988e59..7620901340 100644
--- a/examples/api-routes/pages/api/people/[id].js
+++ b/examples/api-routes/pages/api/people/[id].js
@@ -1,6 +1,6 @@
 import { people } from '../../../data'
 
-export default ({ query: { id } }, res) => {
+export default function personHandler({ query: { id } }, res) {
   const filtered = people.filter((p) => p.id === id)
 
   // User with id exists
diff --git a/examples/api-routes/pages/api/people/index.js b/examples/api-routes/pages/api/people/index.js
index a5651c23cd..0c56720da8 100644
--- a/examples/api-routes/pages/api/people/index.js
+++ b/examples/api-routes/pages/api/people/index.js
@@ -1,5 +1,5 @@
 import { people } from '../../../data'
 
-export default (req, res) => {
+export default function handler(req, res) {
   res.status(200).json(people)
 }
diff --git a/examples/basic-css/pages/index.js b/examples/basic-css/pages/index.js
index f7764277e1..692f0300d8 100644
--- a/examples/basic-css/pages/index.js
+++ b/examples/basic-css/pages/index.js
@@ -1,17 +1,19 @@
-export default () => (
-  <div className="hello">
-    <p>Hello World</p>
-    <style jsx>{`
-      .hello {
-        font: 15px Helvetica, Arial, sans-serif;
-        background: #eee;
-        padding: 100px;
-        text-align: center;
-        transition: 100ms ease-in background;
-      }
-      .hello:hover {
-        background: #ccc;
-      }
-    `}</style>
-  </div>
-)
+export default function Home() {
+  return (
+    <div className="hello">
+      <p>Hello World</p>
+      <style jsx>{`
+        .hello {
+          font: 15px Helvetica, Arial, sans-serif;
+          background: #eee;
+          padding: 100px;
+          text-align: center;
+          transition: 100ms ease-in background;
+        }
+        .hello:hover {
+          background: #ccc;
+        }
+      `}</style>
+    </div>
+  )
+}
diff --git a/examples/basic-export/pages/about.js b/examples/basic-export/pages/about.js
index 5fd65c2baf..46817af02a 100644
--- a/examples/basic-export/pages/about.js
+++ b/examples/basic-export/pages/about.js
@@ -1 +1,3 @@
-export default () => <div>About us</div>
+export default function About() {
+  return <div>About us</div>
+}
diff --git a/examples/basic-export/pages/about2.js b/examples/basic-export/pages/about2.js
index fd84a738a1..2b8fe3f38c 100644
--- a/examples/basic-export/pages/about2.js
+++ b/examples/basic-export/pages/about2.js
@@ -1 +1,3 @@
-export default () => <div>About 2</div>
+export default function About2() {
+  return <div>About 2</div>
+}
diff --git a/examples/basic-export/pages/day/index.js b/examples/basic-export/pages/day/index.js
index cc40049196..a3cd64f291 100644
--- a/examples/basic-export/pages/day/index.js
+++ b/examples/basic-export/pages/day/index.js
@@ -1 +1,3 @@
-export default () => <div>Hello Day</div>
+export default function Day() {
+  return <div>Hello Day</div>
+}
diff --git a/examples/basic-export/pages/index.js b/examples/basic-export/pages/index.js
index d0b1f36361..7bb25eccba 100644
--- a/examples/basic-export/pages/index.js
+++ b/examples/basic-export/pages/index.js
@@ -1,9 +1,11 @@
 import Link from 'next/link'
-export default () => (
-  <div>
-    Hello World.{' '}
-    <Link href="/about">
-      <a>About</a>
-    </Link>
-  </div>
-)
+export default function Home() {
+  return (
+    <div>
+      Hello World.{' '}
+      <Link href="/about">
+        <a>About</a>
+      </Link>
+    </div>
+  )
+}
diff --git a/examples/cms-contentful/components/date.js b/examples/cms-contentful/components/date.js
index 01025f8471..e5426bc2cf 100644
--- a/examples/cms-contentful/components/date.js
+++ b/examples/cms-contentful/components/date.js
@@ -1,7 +1,9 @@
 import { format } from 'date-fns'
 
-export default ({ dateString }) => (
-  <time dateTime={dateString}>
-    {format(new Date(dateString), 'LLLL	d, yyyy')}
-  </time>
-)
+export default function Date({ dateString }) {
+  return (
+    <time dateTime={dateString}>
+      {format(new Date(dateString), 'LLLL	d, yyyy')}
+    </time>
+  )
+}
diff --git a/examples/cms-contentful/pages/api/exit-preview.js b/examples/cms-contentful/pages/api/exit-preview.js
index d35f0ff3a7..6c63a0a6e8 100644
--- a/examples/cms-contentful/pages/api/exit-preview.js
+++ b/examples/cms-contentful/pages/api/exit-preview.js
@@ -1,4 +1,4 @@
-export default async (_, res) => {
+export default async function exit(_, res) {
   // Exit the current user from "Preview Mode". This function accepts no args.
   res.clearPreviewData()
 
diff --git a/examples/cms-contentful/pages/api/preview.js b/examples/cms-contentful/pages/api/preview.js
index 0baa35773a..e5344f80c0 100644
--- a/examples/cms-contentful/pages/api/preview.js
+++ b/examples/cms-contentful/pages/api/preview.js
@@ -1,6 +1,6 @@
 import { getPreviewPostBySlug } from '../../lib/api'
 
-export default async (req, res) => {
+export default async function preview(req, res) {
   const { secret, slug } = req.query
 
   if (
diff --git a/examples/cms-datocms/pages/api/exit-preview.js b/examples/cms-datocms/pages/api/exit-preview.js
index d35f0ff3a7..6c63a0a6e8 100644
--- a/examples/cms-datocms/pages/api/exit-preview.js
+++ b/examples/cms-datocms/pages/api/exit-preview.js
@@ -1,4 +1,4 @@
-export default async (_, res) => {
+export default async function exit(_, res) {
   // Exit the current user from "Preview Mode". This function accepts no args.
   res.clearPreviewData()
 
diff --git a/examples/cms-datocms/pages/api/preview.js b/examples/cms-datocms/pages/api/preview.js
index 5343f2ead5..ca7d293272 100644
--- a/examples/cms-datocms/pages/api/preview.js
+++ b/examples/cms-datocms/pages/api/preview.js
@@ -1,6 +1,6 @@
 import { getPreviewPostBySlug } from '../../lib/api'
 
-export default async (req, res) => {
+export default async function preview(req, res) {
   // Check the secret and next parameters
   // This secret should only be known to this API route and the CMS
   if (
diff --git a/examples/cms-prismic/pages/api/exit-preview.js b/examples/cms-prismic/pages/api/exit-preview.js
index d35f0ff3a7..6c63a0a6e8 100644
--- a/examples/cms-prismic/pages/api/exit-preview.js
+++ b/examples/cms-prismic/pages/api/exit-preview.js
@@ -1,4 +1,4 @@
-export default async (_, res) => {
+export default async function exit(_, res) {
   // Exit the current user from "Preview Mode". This function accepts no args.
   res.clearPreviewData()
 
diff --git a/examples/cms-prismic/pages/api/preview.js b/examples/cms-prismic/pages/api/preview.js
index a994edcea8..1fccac78ff 100644
--- a/examples/cms-prismic/pages/api/preview.js
+++ b/examples/cms-prismic/pages/api/preview.js
@@ -10,7 +10,7 @@ function linkResolver(doc) {
   return `/${doc.uid}`
 }
 
-export default async (req, res) => {
+export default async function preview(req, res) {
   const ref = req.query.token
 
   // Check the token parameter against the Prismic SDK
diff --git a/examples/cms-sanity/pages/api/exit-preview.js b/examples/cms-sanity/pages/api/exit-preview.js
index d35f0ff3a7..6c63a0a6e8 100644
--- a/examples/cms-sanity/pages/api/exit-preview.js
+++ b/examples/cms-sanity/pages/api/exit-preview.js
@@ -1,4 +1,4 @@
-export default async (_, res) => {
+export default async function exit(_, res) {
   // Exit the current user from "Preview Mode". This function accepts no args.
   res.clearPreviewData()
 
diff --git a/examples/cms-sanity/pages/api/preview.js b/examples/cms-sanity/pages/api/preview.js
index 721f972d25..6fb6b02f5a 100644
--- a/examples/cms-sanity/pages/api/preview.js
+++ b/examples/cms-sanity/pages/api/preview.js
@@ -1,6 +1,6 @@
 import { getPreviewPostBySlug } from '../../lib/api'
 
-export default async (req, res) => {
+export default async function preview(req, res) {
   // Check the secret and next parameters
   // This secret should only be known to this API route and the CMS
   if (
diff --git a/examples/cms-takeshape/pages/api/exit-preview.js b/examples/cms-takeshape/pages/api/exit-preview.js
index d35f0ff3a7..6c63a0a6e8 100644
--- a/examples/cms-takeshape/pages/api/exit-preview.js
+++ b/examples/cms-takeshape/pages/api/exit-preview.js
@@ -1,4 +1,4 @@
-export default async (_, res) => {
+export default async function exit(_, res) {
   // Exit the current user from "Preview Mode". This function accepts no args.
   res.clearPreviewData()
 
diff --git a/examples/cms-takeshape/pages/api/preview.js b/examples/cms-takeshape/pages/api/preview.js
index ed7becac3f..35ca2fd1d8 100644
--- a/examples/cms-takeshape/pages/api/preview.js
+++ b/examples/cms-takeshape/pages/api/preview.js
@@ -1,6 +1,6 @@
 import { getPreviewPostBySlug } from '../../lib/api'
 
-export default async (req, res) => {
+export default async function preview(req, res) {
   // Check the secret and next parameters
   // This secret should only be known to this API route and the CMS
   if (
diff --git a/examples/custom-server-actionhero/pages/a.js b/examples/custom-server-actionhero/pages/a.js
index 16eb9898c1..5619ede396 100644
--- a/examples/custom-server-actionhero/pages/a.js
+++ b/examples/custom-server-actionhero/pages/a.js
@@ -1 +1,3 @@
-export default () => <div>a</div>
+export default function A() {
+  return <div>a</div>
+}
diff --git a/examples/custom-server-actionhero/pages/b.js b/examples/custom-server-actionhero/pages/b.js
index 3791f48bdc..ca1631c34e 100644
--- a/examples/custom-server-actionhero/pages/b.js
+++ b/examples/custom-server-actionhero/pages/b.js
@@ -1 +1,3 @@
-export default () => <div>b</div>
+export default function B() {
+  return <div>b</div>
+}
diff --git a/examples/custom-server-actionhero/pages/index.js b/examples/custom-server-actionhero/pages/index.js
index 2dfad58236..e4b1f66d58 100644
--- a/examples/custom-server-actionhero/pages/index.js
+++ b/examples/custom-server-actionhero/pages/index.js
@@ -1,17 +1,19 @@
 import React from 'react'
 import Link from 'next/link'
 
-export default () => (
-  <ul>
-    <li>
-      <Link href="/b" as="/a">
-        <a>a</a>
-      </Link>
-    </li>
-    <li>
-      <Link href="/a" as="/b">
-        <a>b</a>
-      </Link>
-    </li>
-  </ul>
-)
+export default function Home() {
+  return (
+    <ul>
+      <li>
+        <Link href="/b" as="/a">
+          <a>a</a>
+        </Link>
+      </li>
+      <li>
+        <Link href="/a" as="/b">
+          <a>b</a>
+        </Link>
+      </li>
+    </ul>
+  )
+}
diff --git a/examples/custom-server-express/pages/a.js b/examples/custom-server-express/pages/a.js
index 16eb9898c1..5619ede396 100644
--- a/examples/custom-server-express/pages/a.js
+++ b/examples/custom-server-express/pages/a.js
@@ -1 +1,3 @@
-export default () => <div>a</div>
+export default function A() {
+  return <div>a</div>
+}
diff --git a/examples/custom-server-express/pages/b.js b/examples/custom-server-express/pages/b.js
index 3791f48bdc..ca1631c34e 100644
--- a/examples/custom-server-express/pages/b.js
+++ b/examples/custom-server-express/pages/b.js
@@ -1 +1,3 @@
-export default () => <div>b</div>
+export default function B() {
+  return <div>b</div>
+}
diff --git a/examples/custom-server-express/pages/index.js b/examples/custom-server-express/pages/index.js
index 2dfad58236..e4b1f66d58 100644
--- a/examples/custom-server-express/pages/index.js
+++ b/examples/custom-server-express/pages/index.js
@@ -1,17 +1,19 @@
 import React from 'react'
 import Link from 'next/link'
 
-export default () => (
-  <ul>
-    <li>
-      <Link href="/b" as="/a">
-        <a>a</a>
-      </Link>
-    </li>
-    <li>
-      <Link href="/a" as="/b">
-        <a>b</a>
-      </Link>
-    </li>
-  </ul>
-)
+export default function Home() {
+  return (
+    <ul>
+      <li>
+        <Link href="/b" as="/a">
+          <a>a</a>
+        </Link>
+      </li>
+      <li>
+        <Link href="/a" as="/b">
+          <a>b</a>
+        </Link>
+      </li>
+    </ul>
+  )
+}
diff --git a/examples/custom-server-fastify/pages/a.js b/examples/custom-server-fastify/pages/a.js
index 16eb9898c1..5619ede396 100644
--- a/examples/custom-server-fastify/pages/a.js
+++ b/examples/custom-server-fastify/pages/a.js
@@ -1 +1,3 @@
-export default () => <div>a</div>
+export default function A() {
+  return <div>a</div>
+}
diff --git a/examples/custom-server-fastify/pages/b.js b/examples/custom-server-fastify/pages/b.js
index 3791f48bdc..ca1631c34e 100644
--- a/examples/custom-server-fastify/pages/b.js
+++ b/examples/custom-server-fastify/pages/b.js
@@ -1 +1,3 @@
-export default () => <div>b</div>
+export default function B() {
+  return <div>b</div>
+}
diff --git a/examples/custom-server-fastify/pages/index.js b/examples/custom-server-fastify/pages/index.js
index 2dfad58236..e4b1f66d58 100644
--- a/examples/custom-server-fastify/pages/index.js
+++ b/examples/custom-server-fastify/pages/index.js
@@ -1,17 +1,19 @@
 import React from 'react'
 import Link from 'next/link'
 
-export default () => (
-  <ul>
-    <li>
-      <Link href="/b" as="/a">
-        <a>a</a>
-      </Link>
-    </li>
-    <li>
-      <Link href="/a" as="/b">
-        <a>b</a>
-      </Link>
-    </li>
-  </ul>
-)
+export default function Home() {
+  return (
+    <ul>
+      <li>
+        <Link href="/b" as="/a">
+          <a>a</a>
+        </Link>
+      </li>
+      <li>
+        <Link href="/a" as="/b">
+          <a>b</a>
+        </Link>
+      </li>
+    </ul>
+  )
+}
diff --git a/examples/custom-server-hapi/pages/a.js b/examples/custom-server-hapi/pages/a.js
index c5359797af..34a43965ee 100644
--- a/examples/custom-server-hapi/pages/a.js
+++ b/examples/custom-server-hapi/pages/a.js
@@ -1,3 +1,5 @@
 import React from 'react'
 
-export default () => <div>a</div>
+export default function A() {
+  return <div>a</div>
+}
diff --git a/examples/custom-server-hapi/pages/b.js b/examples/custom-server-hapi/pages/b.js
index 9bde4d9dc5..fbd5c97a99 100644
--- a/examples/custom-server-hapi/pages/b.js
+++ b/examples/custom-server-hapi/pages/b.js
@@ -1,3 +1,5 @@
 import React from 'react'
 
-export default () => <div>b</div>
+export default function B() {
+  return <div>b</div>
+}
diff --git a/examples/custom-server-hapi/pages/index.js b/examples/custom-server-hapi/pages/index.js
index 2dfad58236..e4b1f66d58 100644
--- a/examples/custom-server-hapi/pages/index.js
+++ b/examples/custom-server-hapi/pages/index.js
@@ -1,17 +1,19 @@
 import React from 'react'
 import Link from 'next/link'
 
-export default () => (
-  <ul>
-    <li>
-      <Link href="/b" as="/a">
-        <a>a</a>
-      </Link>
-    </li>
-    <li>
-      <Link href="/a" as="/b">
-        <a>b</a>
-      </Link>
-    </li>
-  </ul>
-)
+export default function Home() {
+  return (
+    <ul>
+      <li>
+        <Link href="/b" as="/a">
+          <a>a</a>
+        </Link>
+      </li>
+      <li>
+        <Link href="/a" as="/b">
+          <a>b</a>
+        </Link>
+      </li>
+    </ul>
+  )
+}
diff --git a/examples/custom-server-koa/pages/a.js b/examples/custom-server-koa/pages/a.js
index 16eb9898c1..5619ede396 100644
--- a/examples/custom-server-koa/pages/a.js
+++ b/examples/custom-server-koa/pages/a.js
@@ -1 +1,3 @@
-export default () => <div>a</div>
+export default function A() {
+  return <div>a</div>
+}
diff --git a/examples/custom-server-koa/pages/b.js b/examples/custom-server-koa/pages/b.js
index 3791f48bdc..ca1631c34e 100644
--- a/examples/custom-server-koa/pages/b.js
+++ b/examples/custom-server-koa/pages/b.js
@@ -1 +1,3 @@
-export default () => <div>b</div>
+export default function B() {
+  return <div>b</div>
+}
diff --git a/examples/custom-server-koa/pages/index.js b/examples/custom-server-koa/pages/index.js
index 2dfad58236..e4b1f66d58 100644
--- a/examples/custom-server-koa/pages/index.js
+++ b/examples/custom-server-koa/pages/index.js
@@ -1,17 +1,19 @@
 import React from 'react'
 import Link from 'next/link'
 
-export default () => (
-  <ul>
-    <li>
-      <Link href="/b" as="/a">
-        <a>a</a>
-      </Link>
-    </li>
-    <li>
-      <Link href="/a" as="/b">
-        <a>b</a>
-      </Link>
-    </li>
-  </ul>
-)
+export default function Home() {
+  return (
+    <ul>
+      <li>
+        <Link href="/b" as="/a">
+          <a>a</a>
+        </Link>
+      </li>
+      <li>
+        <Link href="/a" as="/b">
+          <a>b</a>
+        </Link>
+      </li>
+    </ul>
+  )
+}
diff --git a/examples/custom-server-polka/pages/a.js b/examples/custom-server-polka/pages/a.js
index c5359797af..34a43965ee 100644
--- a/examples/custom-server-polka/pages/a.js
+++ b/examples/custom-server-polka/pages/a.js
@@ -1,3 +1,5 @@
 import React from 'react'
 
-export default () => <div>a</div>
+export default function A() {
+  return <div>a</div>
+}
diff --git a/examples/custom-server-polka/pages/b.js b/examples/custom-server-polka/pages/b.js
index 9bde4d9dc5..fbd5c97a99 100644
--- a/examples/custom-server-polka/pages/b.js
+++ b/examples/custom-server-polka/pages/b.js
@@ -1,3 +1,5 @@
 import React from 'react'
 
-export default () => <div>b</div>
+export default function B() {
+  return <div>b</div>
+}
diff --git a/examples/custom-server-polka/pages/index.js b/examples/custom-server-polka/pages/index.js
index 2dfad58236..e4b1f66d58 100644
--- a/examples/custom-server-polka/pages/index.js
+++ b/examples/custom-server-polka/pages/index.js
@@ -1,17 +1,19 @@
 import React from 'react'
 import Link from 'next/link'
 
-export default () => (
-  <ul>
-    <li>
-      <Link href="/b" as="/a">
-        <a>a</a>
-      </Link>
-    </li>
-    <li>
-      <Link href="/a" as="/b">
-        <a>b</a>
-      </Link>
-    </li>
-  </ul>
-)
+export default function Home() {
+  return (
+    <ul>
+      <li>
+        <Link href="/b" as="/a">
+          <a>a</a>
+        </Link>
+      </li>
+      <li>
+        <Link href="/a" as="/b">
+          <a>b</a>
+        </Link>
+      </li>
+    </ul>
+  )
+}
diff --git a/examples/custom-server-typescript/pages/a.tsx b/examples/custom-server-typescript/pages/a.tsx
index c5359797af..34a43965ee 100644
--- a/examples/custom-server-typescript/pages/a.tsx
+++ b/examples/custom-server-typescript/pages/a.tsx
@@ -1,3 +1,5 @@
 import React from 'react'
 
-export default () => <div>a</div>
+export default function A() {
+  return <div>a</div>
+}
diff --git a/examples/custom-server-typescript/pages/b.tsx b/examples/custom-server-typescript/pages/b.tsx
index 9bde4d9dc5..fbd5c97a99 100644
--- a/examples/custom-server-typescript/pages/b.tsx
+++ b/examples/custom-server-typescript/pages/b.tsx
@@ -1,3 +1,5 @@
 import React from 'react'
 
-export default () => <div>b</div>
+export default function B() {
+  return <div>b</div>
+}
diff --git a/examples/custom-server-typescript/pages/index.tsx b/examples/custom-server-typescript/pages/index.tsx
index cfdee1de63..c16da51ea4 100644
--- a/examples/custom-server-typescript/pages/index.tsx
+++ b/examples/custom-server-typescript/pages/index.tsx
@@ -1,17 +1,19 @@
 import React from 'react'
 import Link from 'next/link'
 
-export default () => (
-  <ul>
-    <li>
-      <Link href="/a" as="/a">
-        <a>a</a>
-      </Link>
-    </li>
-    <li>
-      <Link href="/b" as="/b">
-        <a>b</a>
-      </Link>
-    </li>
-  </ul>
-)
+export default function Home() {
+  return (
+    <ul>
+      <li>
+        <Link href="/a" as="/a">
+          <a>a</a>
+        </Link>
+      </li>
+      <li>
+        <Link href="/b" as="/b">
+          <a>b</a>
+        </Link>
+      </li>
+    </ul>
+  )
+}
diff --git a/examples/custom-server/pages/a.js b/examples/custom-server/pages/a.js
index c5359797af..34a43965ee 100644
--- a/examples/custom-server/pages/a.js
+++ b/examples/custom-server/pages/a.js
@@ -1,3 +1,5 @@
 import React from 'react'
 
-export default () => <div>a</div>
+export default function A() {
+  return <div>a</div>
+}
diff --git a/examples/custom-server/pages/b.js b/examples/custom-server/pages/b.js
index 9bde4d9dc5..fbd5c97a99 100644
--- a/examples/custom-server/pages/b.js
+++ b/examples/custom-server/pages/b.js
@@ -1,3 +1,5 @@
 import React from 'react'
 
-export default () => <div>b</div>
+export default function B() {
+  return <div>b</div>
+}
diff --git a/examples/custom-server/pages/index.js b/examples/custom-server/pages/index.js
index 2dfad58236..e4b1f66d58 100644
--- a/examples/custom-server/pages/index.js
+++ b/examples/custom-server/pages/index.js
@@ -1,17 +1,19 @@
 import React from 'react'
 import Link from 'next/link'
 
-export default () => (
-  <ul>
-    <li>
-      <Link href="/b" as="/a">
-        <a>a</a>
-      </Link>
-    </li>
-    <li>
-      <Link href="/a" as="/b">
-        <a>b</a>
-      </Link>
-    </li>
-  </ul>
-)
+export default function Home() {
+  return (
+    <ul>
+      <li>
+        <Link href="/b" as="/a">
+          <a>a</a>
+        </Link>
+      </li>
+      <li>
+        <Link href="/a" as="/b">
+          <a>b</a>
+        </Link>
+      </li>
+    </ul>
+  )
+}
diff --git a/examples/gh-pages/pages/about.js b/examples/gh-pages/pages/about.js
index a24a1be77d..a5944741ac 100644
--- a/examples/gh-pages/pages/about.js
+++ b/examples/gh-pages/pages/about.js
@@ -1,12 +1,14 @@
 import Link from 'next/link'
-export default () => (
-  <div>
-    <div>About us</div>
+export default function About() {
+  return (
     <div>
-      Back to{' '}
-      <Link href="/" as={process.env.BACKEND_URL + '/'}>
-        <a>Home</a>
-      </Link>
+      <div>About us</div>
+      <div>
+        Back to{' '}
+        <Link href="/" as={process.env.BACKEND_URL + '/'}>
+          <a>Home</a>
+        </Link>
+      </div>
     </div>
-  </div>
-)
+  )
+}
diff --git a/examples/gh-pages/pages/index.js b/examples/gh-pages/pages/index.js
index 19bee536c0..d587aba089 100644
--- a/examples/gh-pages/pages/index.js
+++ b/examples/gh-pages/pages/index.js
@@ -1,9 +1,11 @@
 import Link from 'next/link'
-export default () => (
-  <div>
-    Hello World.{' '}
-    <Link href="/about" as={process.env.BACKEND_URL + '/about'}>
-      <a>About</a>
-    </Link>
-  </div>
-)
+export default function Home() {
+  return (
+    <div>
+      Hello World.{' '}
+      <Link href="/about" as={process.env.BACKEND_URL + '/about'}>
+        <a>About</a>
+      </Link>
+    </div>
+  )
+}
diff --git a/examples/head-elements/pages/index.js b/examples/head-elements/pages/index.js
index c8c5abd6d2..90348e986d 100644
--- a/examples/head-elements/pages/index.js
+++ b/examples/head-elements/pages/index.js
@@ -1,13 +1,15 @@
 import Head from 'next/head'
 
-export default () => (
-  <div>
-    <Head>
-      <title>This page has a title 🤔</title>
-      <meta charSet="utf-8" />
-      <meta name="viewport" content="initial-scale=1.0, width=device-width" />
-    </Head>
+export default function Home() {
+  return (
+    <div>
+      <Head>
+        <title>This page has a title 🤔</title>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
+      </Head>
 
-    <h1>This page has a title 🤔</h1>
-  </div>
-)
+      <h1>This page has a title 🤔</h1>
+    </div>
+  )
+}
diff --git a/examples/layout-component/components/layout.js b/examples/layout-component/components/layout.js
index 7be2640201..a6c43e1311 100644
--- a/examples/layout-component/components/layout.js
+++ b/examples/layout-component/components/layout.js
@@ -1,31 +1,36 @@
 import Link from 'next/link'
 import Head from 'next/head'
 
-export default ({ children, title = 'This is the default title' }) => (
-  <div>
-    <Head>
-      <title>{title}</title>
-      <meta charSet="utf-8" />
-      <meta name="viewport" content="initial-scale=1.0, width=device-width" />
-    </Head>
-    <header>
-      <nav>
-        <Link href="/">
-          <a>Home</a>
-        </Link>{' '}
-        |
-        <Link href="/about">
-          <a>About</a>
-        </Link>{' '}
-        |
-        <Link href="/contact">
-          <a>Contact</a>
-        </Link>
-      </nav>
-    </header>
+export default function Layout({
+  children,
+  title = 'This is the default title',
+}) {
+  return (
+    <div>
+      <Head>
+        <title>{title}</title>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
+      </Head>
+      <header>
+        <nav>
+          <Link href="/">
+            <a>Home</a>
+          </Link>{' '}
+          |
+          <Link href="/about">
+            <a>About</a>
+          </Link>{' '}
+          |
+          <Link href="/contact">
+            <a>Contact</a>
+          </Link>
+        </nav>
+      </header>
 
-    {children}
+      {children}
 
-    <footer>{'I`m here to stay'}</footer>
-  </div>
-)
+      <footer>{'I`m here to stay'}</footer>
+    </div>
+  )
+}
diff --git a/examples/layout-component/pages/about.js b/examples/layout-component/pages/about.js
index d3f62c544b..bc65e34a64 100644
--- a/examples/layout-component/pages/about.js
+++ b/examples/layout-component/pages/about.js
@@ -1,7 +1,9 @@
 import Layout from '../components/layout'
 
-export default () => (
-  <Layout title="About us">
-    <div>About us</div>
-  </Layout>
-)
+export default function About() {
+  return (
+    <Layout title="About us">
+      <div>About us</div>
+    </Layout>
+  )
+}
diff --git a/examples/layout-component/pages/contact.js b/examples/layout-component/pages/contact.js
index d1c641c2e8..1a0559f172 100644
--- a/examples/layout-component/pages/contact.js
+++ b/examples/layout-component/pages/contact.js
@@ -1,7 +1,9 @@
 import Layout from '../components/layout'
 
-export default () => (
-  <Layout title="Contact us">
-    <div>Contact</div>
-  </Layout>
-)
+export default function Contact() {
+  return (
+    <Layout title="Contact us">
+      <div>Contact</div>
+    </Layout>
+  )
+}
diff --git a/examples/layout-component/pages/index.js b/examples/layout-component/pages/index.js
index 4016a7c214..a5814308f9 100644
--- a/examples/layout-component/pages/index.js
+++ b/examples/layout-component/pages/index.js
@@ -1,7 +1,9 @@
 import Layout from '../components/layout'
 
-export default () => (
-  <Layout>
-    <div>Hello World.</div>
-  </Layout>
-)
+export default function Home() {
+  return (
+    <Layout>
+      <div>Hello World.</div>
+    </Layout>
+  )
+}
diff --git a/examples/nested-components/components/paragraph.js b/examples/nested-components/components/paragraph.js
index f7a477f2d4..00fe06ab0b 100644
--- a/examples/nested-components/components/paragraph.js
+++ b/examples/nested-components/components/paragraph.js
@@ -1,11 +1,13 @@
-export default ({ children }) => (
-  <p>
-    {children}
-    <style jsx>{`
-      p {
-        font: 13px Helvetica, Arial;
-        margin: 10px 0;
-      }
-    `}</style>
-  </p>
-)
+export default function Paragraph({ children }) {
+  return (
+    <p>
+      {children}
+      <style jsx>{`
+        p {
+          font: 13px Helvetica, Arial;
+          margin: 10px 0;
+        }
+      `}</style>
+    </p>
+  )
+}
diff --git a/examples/nested-components/components/post.js b/examples/nested-components/components/post.js
index 774206c795..25c0b6c009 100644
--- a/examples/nested-components/components/post.js
+++ b/examples/nested-components/components/post.js
@@ -1,19 +1,21 @@
-export default ({ title, children }) => (
-  <div className="main">
-    <h1>{title}</h1>
-    {children}
-    <style jsx>{`
-      .main {
-        font: 15px Helvetica, Arial;
-        border: 1px solid #eee;
-        padding: 0 10px;
-      }
+export default function Post({ title, children }) {
+  return (
+    <div className="main">
+      <h1>{title}</h1>
+      {children}
+      <style jsx>{`
+        .main {
+          font: 15px Helvetica, Arial;
+          border: 1px solid #eee;
+          padding: 0 10px;
+        }
 
-      h1 {
-        font-size: 16px;
-        font-weight: bold;
-        margin: 10px 0;
-      }
-    `}</style>
-  </div>
-)
+        h1 {
+          font-size: 16px;
+          font-weight: bold;
+          margin: 10px 0;
+        }
+      `}</style>
+    </div>
+  )
+}
diff --git a/examples/nested-components/pages/index.js b/examples/nested-components/pages/index.js
index 231c6c2735..54eb82ad6d 100644
--- a/examples/nested-components/pages/index.js
+++ b/examples/nested-components/pages/index.js
@@ -1,45 +1,47 @@
 import P from '../components/paragraph'
 import Post from '../components/post'
 
-export default () => (
-  <div className="main">
-    <Post title="My first blog post">
-      <P>Hello there</P>
-      <P>This is an example of a componentized blog post</P>
-    </Post>
+export default function Home() {
+  return (
+    <div className="main">
+      <Post title="My first blog post">
+        <P>Hello there</P>
+        <P>This is an example of a componentized blog post</P>
+      </Post>
 
-    <hr />
+      <hr />
 
-    <Post title="My second blog post">
-      <P>Hello there</P>
-      <P>This is another example.</P>
-      <P>Wa-hoo!</P>
-    </Post>
+      <Post title="My second blog post">
+        <P>Hello there</P>
+        <P>This is another example.</P>
+        <P>Wa-hoo!</P>
+      </Post>
 
-    <hr />
+      <hr />
 
-    <Post title="The final blog post">
-      <P>C’est fin</P>
-    </Post>
+      <Post title="The final blog post">
+        <P>C’est fin</P>
+      </Post>
 
-    <style jsx>{`
-      .main {
-        margin: auto;
-        max-width: 420px;
-        padding: 10px;
-      }
+      <style jsx>{`
+        .main {
+          margin: auto;
+          max-width: 420px;
+          padding: 10px;
+        }
 
-      hr {
-        width: 100px;
-        border-width: 0;
-        margin: 20px auto;
-        text-align: center;
-      }
+        hr {
+          width: 100px;
+          border-width: 0;
+          margin: 20px auto;
+          text-align: center;
+        }
 
-      hr::before {
-        content: '***';
-        color: #ccc;
-      }
-    `}</style>
-  </div>
-)
+        hr::before {
+          content: '***';
+          color: #ccc;
+        }
+      `}</style>
+    </div>
+  )
+}
diff --git a/examples/progressive-render/components/Loading.js b/examples/progressive-render/components/Loading.js
index 3f54ec2076..e93b53b681 100644
--- a/examples/progressive-render/components/Loading.js
+++ b/examples/progressive-render/components/Loading.js
@@ -1,15 +1,17 @@
 import React from 'react'
 
-export default () => (
-  <div>
-    <h3>Loading...</h3>
-    <style jsx>{`
-      div {
-        align-items: center;
-        display: flex;
-        height: 50vh;
-        justify-content: center;
-      }
-    `}</style>
-  </div>
-)
+export default function Loading() {
+  return (
+    <div>
+      <h3>Loading...</h3>
+      <style jsx>{`
+        div {
+          align-items: center;
+          display: flex;
+          height: 50vh;
+          justify-content: center;
+        }
+      `}</style>
+    </div>
+  )
+}
diff --git a/examples/ssr-caching/pages/blog/[id].js b/examples/ssr-caching/pages/blog/[id].js
index eca5dcb51d..786f5aaa3f 100644
--- a/examples/ssr-caching/pages/blog/[id].js
+++ b/examples/ssr-caching/pages/blog/[id].js
@@ -1,6 +1,6 @@
 import React from 'react'
 
-export default function (props) {
+export default function Post(props) {
   return (
     <div>
       <h1>My {props.id} blog post</h1>
diff --git a/examples/ssr-caching/pages/index.js b/examples/ssr-caching/pages/index.js
index 16f384d872..abcc88ed33 100644
--- a/examples/ssr-caching/pages/index.js
+++ b/examples/ssr-caching/pages/index.js
@@ -1,21 +1,23 @@
 import Link from 'next/link'
 
-export default () => (
-  <ul>
-    <li>
-      <Link href="/blog?id=first" as="/blog/first">
-        <a>My first blog post</a>
-      </Link>
-    </li>
-    <li>
-      <Link href="/blog?id=second" as="/blog/second">
-        <a>My second blog post</a>
-      </Link>
-    </li>
-    <li>
-      <Link href="/blog?id=last" as="/blog/last">
-        <a>My last blog post</a>
-      </Link>
-    </li>
-  </ul>
-)
+export default function Home() {
+  return (
+    <ul>
+      <li>
+        <Link href="/blog?id=first" as="/blog/first">
+          <a>My first blog post</a>
+        </Link>
+      </li>
+      <li>
+        <Link href="/blog?id=second" as="/blog/second">
+          <a>My second blog post</a>
+        </Link>
+      </li>
+      <li>
+        <Link href="/blog?id=last" as="/blog/last">
+          <a>My last blog post</a>
+        </Link>
+      </li>
+    </ul>
+  )
+}
diff --git a/examples/svg-components/pages/index.js b/examples/svg-components/pages/index.js
index 9777b8bac7..16d2741c8d 100644
--- a/examples/svg-components/pages/index.js
+++ b/examples/svg-components/pages/index.js
@@ -1,15 +1,17 @@
 import React from 'react'
 import Cat from '../svgs/cat.svg'
 
-export default () => (
-  <div className="container">
-    <marquee>SVG Cat!</marquee>
-    <Cat />
-    <style jsx>{`
-      .container {
-        width: 600px;
-        margin: 100px auto;
-      }
-    `}</style>
-  </div>
-)
+export default function Home() {
+  return (
+    <div className="container">
+      <marquee>SVG Cat!</marquee>
+      <Cat />
+      <style jsx>{`
+        .container {
+          width: 600px;
+          margin: 100px auto;
+        }
+      `}</style>
+    </div>
+  )
+}
diff --git a/examples/using-preact/pages/about.js b/examples/using-preact/pages/about.js
index f89b580228..7e49d190c0 100644
--- a/examples/using-preact/pages/about.js
+++ b/examples/using-preact/pages/about.js
@@ -1,3 +1,5 @@
 import React from 'react'
 
-export default () => <div>About us</div>
+export default function About() {
+  return <div>About us</div>
+}
diff --git a/examples/using-preact/pages/index.js b/examples/using-preact/pages/index.js
index 7ce33b4c15..1e03e5c696 100644
--- a/examples/using-preact/pages/index.js
+++ b/examples/using-preact/pages/index.js
@@ -1,11 +1,13 @@
 import React from 'react'
 import Link from 'next/link'
 
-export default () => (
-  <div>
-    Hello World.{' '}
-    <Link href="/about">
-      <a>About</a>
-    </Link>
-  </div>
-)
+export default function Home() {
+  return (
+    <div>
+      Hello World.{' '}
+      <Link href="/about">
+        <a>About</a>
+      </Link>
+    </div>
+  )
+}
diff --git a/examples/using-router/components/Header.js b/examples/using-router/components/Header.js
index 3de6f707ea..22090caa18 100644
--- a/examples/using-router/components/Header.js
+++ b/examples/using-router/components/Header.js
@@ -1,11 +1,13 @@
 import { useRouter } from 'next/router'
 
-export default () => (
-  <div>
-    <Link href="/">Home</Link>
-    <Link href="/about">About</Link>
-  </div>
-)
+export default function Header() {
+  return (
+    <div>
+      <Link href="/">Home</Link>
+      <Link href="/about">About</Link>
+    </div>
+  )
+}
 
 const Link = ({ children, href }) => {
   const router = useRouter()
diff --git a/examples/using-router/pages/about.js b/examples/using-router/pages/about.js
index d4cd9f42ac..3db9c42926 100644
--- a/examples/using-router/pages/about.js
+++ b/examples/using-router/pages/about.js
@@ -1,8 +1,10 @@
 import Header from '../components/header'
 
-export default () => (
-  <div>
-    <Header />
-    <p>This is the about page.</p>
-  </div>
-)
+export default function About() {
+  return (
+    <div>
+      <Header />
+      <p>This is the about page.</p>
+    </div>
+  )
+}
diff --git a/examples/using-router/pages/index.js b/examples/using-router/pages/index.js
index ddb3984fd2..4ead9ec92d 100644
--- a/examples/using-router/pages/index.js
+++ b/examples/using-router/pages/index.js
@@ -1,8 +1,10 @@
 import Header from '../components/header'
 
-export default () => (
-  <div>
-    <Header />
-    <p>HOME PAGE is here!</p>
-  </div>
-)
+export default function Home() {
+  return (
+    <div>
+      <Header />
+      <p>HOME PAGE is here!</p>
+    </div>
+  )
+}
diff --git a/examples/with-absolute-imports/components/header.js b/examples/with-absolute-imports/components/header.js
index 31971a9bcb..362f53bc73 100644
--- a/examples/with-absolute-imports/components/header.js
+++ b/examples/with-absolute-imports/components/header.js
@@ -1,5 +1,7 @@
-export default () => (
-  <header>
-    <h1>Hello world!</h1>
-  </header>
-)
+export default function Header() {
+  return (
+    <header>
+      <h1>Hello world!</h1>
+    </header>
+  )
+}
diff --git a/examples/with-absolute-imports/pages/index.js b/examples/with-absolute-imports/pages/index.js
index e17069078b..54c8bf2647 100644
--- a/examples/with-absolute-imports/pages/index.js
+++ b/examples/with-absolute-imports/pages/index.js
@@ -1,7 +1,9 @@
 import Header from 'components/header.js'
 
-export default () => (
-  <div>
-    <Header />
-  </div>
-)
+export default function Home() {
+  return (
+    <div>
+      <Header />
+    </div>
+  )
+}
diff --git a/examples/with-algolia-react-instantsearch/components/app.js b/examples/with-algolia-react-instantsearch/components/app.js
index 5c4f65713a..cafb52474f 100644
--- a/examples/with-algolia-react-instantsearch/components/app.js
+++ b/examples/with-algolia-react-instantsearch/components/app.js
@@ -37,7 +37,7 @@ HitComponent.propTypes = {
   hit: PropTypes.object,
 }
 
-export default class extends React.Component {
+export default class App extends React.Component {
   static propTypes = {
     searchState: PropTypes.object,
     resultsState: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
diff --git a/examples/with-algolia-react-instantsearch/pages/index.js b/examples/with-algolia-react-instantsearch/pages/index.js
index 1436be772d..d4da96f6bc 100644
--- a/examples/with-algolia-react-instantsearch/pages/index.js
+++ b/examples/with-algolia-react-instantsearch/pages/index.js
@@ -9,7 +9,7 @@ const updateAfter = 700
 const searchStateToUrl = (searchState) =>
   searchState ? `${window.location.pathname}?${qs.stringify(searchState)}` : ''
 
-export default class extends React.Component {
+export default class Home extends React.Component {
   static propTypes = {
     resultsState: PropTypes.object,
     searchState: PropTypes.object,
diff --git a/examples/with-ant-design-less/pages/index.js b/examples/with-ant-design-less/pages/index.js
index e76c2e295a..a73f721c09 100644
--- a/examples/with-ant-design-less/pages/index.js
+++ b/examples/with-ant-design-less/pages/index.js
@@ -11,64 +11,78 @@ import {
 const FormItem = Form.Item
 const Option = Select.Option
 
-export default () => (
-  <div style={{ marginTop: 100 }}>
-    <Form layout="horizontal">
-      <FormItem
-        label="Input Number"
-        labelCol={{ span: 8 }}
-        wrapperCol={{ span: 8 }}
-      >
-        <InputNumber
-          size="large"
-          min={1}
-          max={10}
-          style={{ width: 100 }}
-          defaultValue={3}
-          name="inputNumber"
-        />
-        <a href="#">Link</a>
-      </FormItem>
-
-      <FormItem label="Switch" labelCol={{ span: 8 }} wrapperCol={{ span: 8 }}>
-        <Switch defaultChecked name="switch" />
-      </FormItem>
-
-      <FormItem label="Slider" labelCol={{ span: 8 }} wrapperCol={{ span: 8 }}>
-        <Slider defaultValue={70} />
-      </FormItem>
-
-      <FormItem label="Select" labelCol={{ span: 8 }} wrapperCol={{ span: 8 }}>
-        <Select
-          size="large"
-          defaultValue="lucy"
-          style={{ width: 192 }}
-          name="select"
+export default function Home() {
+  return (
+    <div style={{ marginTop: 100 }}>
+      <Form layout="horizontal">
+        <FormItem
+          label="Input Number"
+          labelCol={{ span: 8 }}
+          wrapperCol={{ span: 8 }}
         >
-          <Option value="jack">jack</Option>
-          <Option value="lucy">lucy</Option>
-          <Option value="disabled" disabled>
-            disabled
-          </Option>
-          <Option value="yiminghe">yiminghe</Option>
-        </Select>
-      </FormItem>
+          <InputNumber
+            size="large"
+            min={1}
+            max={10}
+            style={{ width: 100 }}
+            defaultValue={3}
+            name="inputNumber"
+          />
+          <a href="#">Link</a>
+        </FormItem>
 
-      <FormItem
-        label="DatePicker"
-        labelCol={{ span: 8 }}
-        wrapperCol={{ span: 8 }}
-      >
-        <DatePicker name="startDate" />
-      </FormItem>
-      <FormItem style={{ marginTop: 48 }} wrapperCol={{ span: 8, offset: 8 }}>
-        <Button size="large" type="primary" htmlType="submit">
-          OK
-        </Button>
-        <Button size="large" style={{ marginLeft: 8 }}>
-          Cancel
-        </Button>
-      </FormItem>
-    </Form>
-  </div>
-)
+        <FormItem
+          label="Switch"
+          labelCol={{ span: 8 }}
+          wrapperCol={{ span: 8 }}
+        >
+          <Switch defaultChecked name="switch" />
+        </FormItem>
+
+        <FormItem
+          label="Slider"
+          labelCol={{ span: 8 }}
+          wrapperCol={{ span: 8 }}
+        >
+          <Slider defaultValue={70} />
+        </FormItem>
+
+        <FormItem
+          label="Select"
+          labelCol={{ span: 8 }}
+          wrapperCol={{ span: 8 }}
+        >
+          <Select
+            size="large"
+            defaultValue="lucy"
+            style={{ width: 192 }}
+            name="select"
+          >
+            <Option value="jack">jack</Option>
+            <Option value="lucy">lucy</Option>
+            <Option value="disabled" disabled>
+              disabled
+            </Option>
+            <Option value="yiminghe">yiminghe</Option>
+          </Select>
+        </FormItem>
+
+        <FormItem
+          label="DatePicker"
+          labelCol={{ span: 8 }}
+          wrapperCol={{ span: 8 }}
+        >
+          <DatePicker name="startDate" />
+        </FormItem>
+        <FormItem style={{ marginTop: 48 }} wrapperCol={{ span: 8, offset: 8 }}>
+          <Button size="large" type="primary" htmlType="submit">
+            OK
+          </Button>
+          <Button size="large" style={{ marginLeft: 8 }}>
+            Cancel
+          </Button>
+        </FormItem>
+      </Form>
+    </div>
+  )
+}
diff --git a/examples/with-ant-design-mobile/pages/about.js b/examples/with-ant-design-mobile/pages/about.js
index 6a8c5ec05d..768451b116 100644
--- a/examples/with-ant-design-mobile/pages/about.js
+++ b/examples/with-ant-design-mobile/pages/about.js
@@ -2,10 +2,12 @@ import Layout from '../components/Layout'
 import { Button } from 'antd-mobile'
 import Link from 'next/link'
 
-export default () => (
-  <Layout title="About">
-    <Link href="/">
-      <Button>Go to Index</Button>
-    </Link>
-  </Layout>
-)
+export default function About() {
+  return (
+    <Layout title="About">
+      <Link href="/">
+        <Button>Go to Index</Button>
+      </Link>
+    </Layout>
+  )
+}
diff --git a/examples/with-ant-design-mobile/pages/index.js b/examples/with-ant-design-mobile/pages/index.js
index 5417c6b372..a762ed590c 100644
--- a/examples/with-ant-design-mobile/pages/index.js
+++ b/examples/with-ant-design-mobile/pages/index.js
@@ -2,10 +2,12 @@ import Layout from '../components/Layout'
 import { Button } from 'antd-mobile'
 import Link from 'next/link'
 
-export default () => (
-  <Layout title="Index">
-    <Link href="/about">
-      <Button>Go to About</Button>
-    </Link>
-  </Layout>
-)
+export default function Home() {
+  return (
+    <Layout title="Index">
+      <Link href="/about">
+        <Button>Go to About</Button>
+      </Link>
+    </Layout>
+  )
+}
diff --git a/examples/with-ant-design-pro-layout-less/layouts/main.tsx b/examples/with-ant-design-pro-layout-less/layouts/main.tsx
index 68aeeb8464..f184beb722 100644
--- a/examples/with-ant-design-pro-layout-less/layouts/main.tsx
+++ b/examples/with-ant-design-pro-layout-less/layouts/main.tsx
@@ -56,13 +56,15 @@ const menuItemRender = (options: MenuDataItem, element: React.ReactNode) => (
   </Link>
 )
 
-export default ({ children }) => (
-  <ProLayout
-    style={{ minHeight: '100vh' }}
-    route={ROUTES}
-    menuItemRender={menuItemRender}
-    menuHeaderRender={menuHeaderRender}
-  >
-    {children}
-  </ProLayout>
-)
+export default function Main({ children }) {
+  return (
+    <ProLayout
+      style={{ minHeight: '100vh' }}
+      route={ROUTES}
+      menuItemRender={menuItemRender}
+      menuHeaderRender={menuHeaderRender}
+    >
+      {children}
+    </ProLayout>
+  )
+}
diff --git a/examples/with-ant-design-pro-layout-less/pages/example.tsx b/examples/with-ant-design-pro-layout-less/pages/example.tsx
index 85f5d48b38..a5b0b407f9 100644
--- a/examples/with-ant-design-pro-layout-less/pages/example.tsx
+++ b/examples/with-ant-design-pro-layout-less/pages/example.tsx
@@ -1,3 +1,5 @@
 import MainLayout from '../layouts/main'
 
-export default () => <MainLayout>Example page</MainLayout>
+export default function Example() {
+  return <MainLayout>Example page</MainLayout>
+}
diff --git a/examples/with-ant-design-pro-layout-less/pages/index.tsx b/examples/with-ant-design-pro-layout-less/pages/index.tsx
index b02d16fe84..840676f77d 100644
--- a/examples/with-ant-design-pro-layout-less/pages/index.tsx
+++ b/examples/with-ant-design-pro-layout-less/pages/index.tsx
@@ -13,59 +13,73 @@ import MainLayout from '../layouts/main'
 const FormItem = Form.Item
 const Option = Select.Option
 
-export default () => (
-  <MainLayout>
-    <Form layout="horizontal">
-      <FormItem
-        label="Input Number"
-        labelCol={{ span: 8 }}
-        wrapperCol={{ span: 8 }}
-      >
-        <InputNumber
-          size="large"
-          min={1}
-          max={10}
-          style={{ width: 100 }}
-          defaultValue={3}
-          name="inputNumber"
-        />
-        <a href="#">Link</a>
-      </FormItem>
+export default function Home() {
+  return (
+    <MainLayout>
+      <Form layout="horizontal">
+        <FormItem
+          label="Input Number"
+          labelCol={{ span: 8 }}
+          wrapperCol={{ span: 8 }}
+        >
+          <InputNumber
+            size="large"
+            min={1}
+            max={10}
+            style={{ width: 100 }}
+            defaultValue={3}
+            name="inputNumber"
+          />
+          <a href="#">Link</a>
+        </FormItem>
 
-      <FormItem label="Switch" labelCol={{ span: 8 }} wrapperCol={{ span: 8 }}>
-        <Switch defaultChecked />
-      </FormItem>
+        <FormItem
+          label="Switch"
+          labelCol={{ span: 8 }}
+          wrapperCol={{ span: 8 }}
+        >
+          <Switch defaultChecked />
+        </FormItem>
 
-      <FormItem label="Slider" labelCol={{ span: 8 }} wrapperCol={{ span: 8 }}>
-        <Slider defaultValue={70} />
-      </FormItem>
+        <FormItem
+          label="Slider"
+          labelCol={{ span: 8 }}
+          wrapperCol={{ span: 8 }}
+        >
+          <Slider defaultValue={70} />
+        </FormItem>
 
-      <FormItem label="Select" labelCol={{ span: 8 }} wrapperCol={{ span: 8 }}>
-        <Select size="large" defaultValue="lucy" style={{ width: 192 }}>
-          <Option value="jack">jack</Option>
-          <Option value="lucy">lucy</Option>
-          <Option value="disabled" disabled>
-            disabled
-          </Option>
-          <Option value="yiminghe">yiminghe</Option>
-        </Select>
-      </FormItem>
+        <FormItem
+          label="Select"
+          labelCol={{ span: 8 }}
+          wrapperCol={{ span: 8 }}
+        >
+          <Select size="large" defaultValue="lucy" style={{ width: 192 }}>
+            <Option value="jack">jack</Option>
+            <Option value="lucy">lucy</Option>
+            <Option value="disabled" disabled>
+              disabled
+            </Option>
+            <Option value="yiminghe">yiminghe</Option>
+          </Select>
+        </FormItem>
 
-      <FormItem
-        label="DatePicker"
-        labelCol={{ span: 8 }}
-        wrapperCol={{ span: 8 }}
-      >
-        <DatePicker name="startDate" />
-      </FormItem>
-      <FormItem style={{ marginTop: 48 }} wrapperCol={{ span: 8, offset: 8 }}>
-        <Button size="large" type="primary" htmlType="submit">
-          OK
-        </Button>
-        <Button size="large" style={{ marginLeft: 8 }}>
-          Cancel
-        </Button>
-      </FormItem>
-    </Form>
-  </MainLayout>
-)
+        <FormItem
+          label="DatePicker"
+          labelCol={{ span: 8 }}
+          wrapperCol={{ span: 8 }}
+        >
+          <DatePicker name="startDate" />
+        </FormItem>
+        <FormItem style={{ marginTop: 48 }} wrapperCol={{ span: 8, offset: 8 }}>
+          <Button size="large" type="primary" htmlType="submit">
+            OK
+          </Button>
+          <Button size="large" style={{ marginLeft: 8 }}>
+            Cancel
+          </Button>
+        </FormItem>
+      </Form>
+    </MainLayout>
+  )
+}
diff --git a/examples/with-ant-design-pro-layout-less/pages/welcome.tsx b/examples/with-ant-design-pro-layout-less/pages/welcome.tsx
index 197d8b3a35..b9cbb48699 100644
--- a/examples/with-ant-design-pro-layout-less/pages/welcome.tsx
+++ b/examples/with-ant-design-pro-layout-less/pages/welcome.tsx
@@ -1,3 +1,5 @@
 import MainLayout from '../layouts/main'
 
-export default () => <MainLayout>Welcome!</MainLayout>
+export default function Welcome() {
+  return <MainLayout>Welcome!</MainLayout>
+}
diff --git a/examples/with-ant-design/pages/index.js b/examples/with-ant-design/pages/index.js
index b619f2a663..0cf82133b5 100644
--- a/examples/with-ant-design/pages/index.js
+++ b/examples/with-ant-design/pages/index.js
@@ -15,86 +15,91 @@ const content = {
   marginTop: '100px',
 }
 
-export default () => (
-  <div style={content}>
-    <div className="text-center mb-5">
-      <Link href="#">
-        <a className="logo mr-0">
-          <SmileFilled size={48} strokeWidth={1} />
-        </a>
-      </Link>
+export default function Home() {
+  return (
+    <div style={content}>
+      <div className="text-center mb-5">
+        <Link href="#">
+          <a className="logo mr-0">
+            <SmileFilled size={48} strokeWidth={1} />
+          </a>
+        </Link>
 
-      <p className="mb-0 mt-3 text-disabled">Welcome to the world !</p>
-    </div>
-    <div>
-      <Form layout="horizontal">
-        <FormItem
-          label="Input Number"
-          labelCol={{ span: 8 }}
-          wrapperCol={{ span: 8 }}
-        >
-          <InputNumber
-            size="large"
-            min={1}
-            max={10}
-            style={{ width: 100 }}
-            defaultValue={3}
-            name="inputNumber"
-          />
-        </FormItem>
-
-        <FormItem
-          label="Switch"
-          labelCol={{ span: 8 }}
-          wrapperCol={{ span: 8 }}
-        >
-          <Switch defaultChecked name="switch" />
-        </FormItem>
-
-        <FormItem
-          label="Slider"
-          labelCol={{ span: 8 }}
-          wrapperCol={{ span: 8 }}
-        >
-          <Slider defaultValue={70} />
-        </FormItem>
-
-        <FormItem
-          label="Select"
-          labelCol={{ span: 8 }}
-          wrapperCol={{ span: 8 }}
-        >
-          <Select
-            size="large"
-            defaultValue="lucy"
-            style={{ width: 192 }}
-            name="select"
+        <p className="mb-0 mt-3 text-disabled">Welcome to the world !</p>
+      </div>
+      <div>
+        <Form layout="horizontal">
+          <FormItem
+            label="Input Number"
+            labelCol={{ span: 8 }}
+            wrapperCol={{ span: 8 }}
           >
-            <Option value="jack">jack</Option>
-            <Option value="lucy">lucy</Option>
-            <Option value="disabled" disabled>
-              disabled
-            </Option>
-            <Option value="yiminghe">yiminghe</Option>
-          </Select>
-        </FormItem>
+            <InputNumber
+              size="large"
+              min={1}
+              max={10}
+              style={{ width: 100 }}
+              defaultValue={3}
+              name="inputNumber"
+            />
+          </FormItem>
 
-        <FormItem
-          label="DatePicker"
-          labelCol={{ span: 8 }}
-          wrapperCol={{ span: 8 }}
-        >
-          <DatePicker name="startDate" />
-        </FormItem>
-        <FormItem style={{ marginTop: 48 }} wrapperCol={{ span: 8, offset: 8 }}>
-          <Button size="large" type="primary" htmlType="submit">
-            OK
-          </Button>
-          <Button size="large" style={{ marginLeft: 8 }}>
-            Cancel
-          </Button>
-        </FormItem>
-      </Form>
+          <FormItem
+            label="Switch"
+            labelCol={{ span: 8 }}
+            wrapperCol={{ span: 8 }}
+          >
+            <Switch defaultChecked name="switch" />
+          </FormItem>
+
+          <FormItem
+            label="Slider"
+            labelCol={{ span: 8 }}
+            wrapperCol={{ span: 8 }}
+          >
+            <Slider defaultValue={70} />
+          </FormItem>
+
+          <FormItem
+            label="Select"
+            labelCol={{ span: 8 }}
+            wrapperCol={{ span: 8 }}
+          >
+            <Select
+              size="large"
+              defaultValue="lucy"
+              style={{ width: 192 }}
+              name="select"
+            >
+              <Option value="jack">jack</Option>
+              <Option value="lucy">lucy</Option>
+              <Option value="disabled" disabled>
+                disabled
+              </Option>
+              <Option value="yiminghe">yiminghe</Option>
+            </Select>
+          </FormItem>
+
+          <FormItem
+            label="DatePicker"
+            labelCol={{ span: 8 }}
+            wrapperCol={{ span: 8 }}
+          >
+            <DatePicker name="startDate" />
+          </FormItem>
+          <FormItem
+            style={{ marginTop: 48 }}
+            wrapperCol={{ span: 8, offset: 8 }}
+          >
+            <Button size="large" type="primary" htmlType="submit">
+              OK
+            </Button>
+            <Button size="large" style={{ marginLeft: 8 }}>
+              Cancel
+            </Button>
+          </FormItem>
+        </Form>
+      </div>
     </div>
-  </div>
-)
+  )
+}
diff --git a/examples/with-aphrodite/pages/index.js b/examples/with-aphrodite/pages/index.js
index be30c53609..8281fca8c8 100644
--- a/examples/with-aphrodite/pages/index.js
+++ b/examples/with-aphrodite/pages/index.js
@@ -8,11 +8,13 @@ if (typeof window !== 'undefined') {
   StyleSheet.rehydrate(window.__NEXT_DATA__.ids)
 }
 
-export default () => (
-  <div className={css(styles.root)}>
-    <h1 className={css(styles.title)}>My page</h1>
-  </div>
-)
+export default function Home() {
+  return (
+    <div className={css(styles.root)}>
+      <h1 className={css(styles.title)}>My page</h1>
+    </div>
+  )
+}
 
 const styles = StyleSheet.create({
   root: {
diff --git a/examples/with-apollo/components/App.js b/examples/with-apollo/components/App.js
index 6679994618..eff22fc71b 100644
--- a/examples/with-apollo/components/App.js
+++ b/examples/with-apollo/components/App.js
@@ -1,45 +1,47 @@
-export default ({ children }) => (
-  <main>
-    {children}
-    <style jsx global>{`
-      * {
-        font-family: Menlo, Monaco, 'Lucida Console', 'Liberation Mono',
-          'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New',
-          monospace, serif;
-      }
-      body {
-        margin: 0;
-        padding: 25px 50px;
-      }
-      a {
-        color: #22bad9;
-      }
-      p {
-        font-size: 14px;
-        line-height: 24px;
-      }
-      article {
-        margin: 0 auto;
-        max-width: 650px;
-      }
-      button {
-        align-items: center;
-        background-color: #22bad9;
-        border: 0;
-        color: white;
-        display: flex;
-        padding: 5px 7px;
-        transition: background-color 0.3s;
-      }
-      button:active {
-        background-color: #1b9db7;
-      }
-      button:disabled {
-        background-color: #b5bebf;
-      }
-      button:focus {
-        outline: none;
-      }
-    `}</style>
-  </main>
-)
+export default function App({ children }) {
+  return (
+    <main>
+      {children}
+      <style jsx global>{`
+        * {
+          font-family: Menlo, Monaco, 'Lucida Console', 'Liberation Mono',
+            'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New',
+            monospace, serif;
+        }
+        body {
+          margin: 0;
+          padding: 25px 50px;
+        }
+        a {
+          color: #22bad9;
+        }
+        p {
+          font-size: 14px;
+          line-height: 24px;
+        }
+        article {
+          margin: 0 auto;
+          max-width: 650px;
+        }
+        button {
+          align-items: center;
+          background-color: #22bad9;
+          border: 0;
+          color: white;
+          display: flex;
+          padding: 5px 7px;
+          transition: background-color 0.3s;
+        }
+        button:active {
+          background-color: #1b9db7;
+        }
+        button:disabled {
+          background-color: #b5bebf;
+        }
+        button:focus {
+          outline: none;
+        }
+      `}</style>
+    </main>
+  )
+}
diff --git a/examples/with-apollo/components/ErrorMessage.js b/examples/with-apollo/components/ErrorMessage.js
index 8497a5d2df..d8cc91e950 100644
--- a/examples/with-apollo/components/ErrorMessage.js
+++ b/examples/with-apollo/components/ErrorMessage.js
@@ -1,13 +1,15 @@
-export default ({ message }) => (
-  <aside>
-    {message}
-    <style jsx>{`
-      aside {
-        padding: 1.5em;
-        font-size: 14px;
-        color: white;
-        background-color: red;
-      }
-    `}</style>
-  </aside>
-)
+export default function ErrorMessage({ message }) {
+  return (
+    <aside>
+      {message}
+      <style jsx>{`
+        aside {
+          padding: 1.5em;
+          font-size: 14px;
+          color: white;
+          background-color: red;
+        }
+      `}</style>
+    </aside>
+  )
+}
diff --git a/examples/with-app-layout/pages/_app.js b/examples/with-app-layout/pages/_app.js
index ea472d9161..4dbaf3cb6b 100644
--- a/examples/with-app-layout/pages/_app.js
+++ b/examples/with-app-layout/pages/_app.js
@@ -2,8 +2,10 @@ import React from 'react'
 
 const Layout = ({ children }) => <div className="layout">{children}</div>
 
-export default ({ Component, pageProps }) => (
-  <Layout>
-    <Component {...pageProps} />
-  </Layout>
-)
+export default function App({ Component, pageProps }) {
+  return (
+    <Layout>
+      <Component {...pageProps} />
+    </Layout>
+  )
+}
diff --git a/examples/with-app-layout/pages/index.js b/examples/with-app-layout/pages/index.js
index 6dad26ab75..888b53c750 100644
--- a/examples/with-app-layout/pages/index.js
+++ b/examples/with-app-layout/pages/index.js
@@ -1,3 +1,3 @@
-export default () => {
+export default function Home() {
   return <div>test</div>
 }
diff --git a/examples/with-atlaskit/components/ButtonComponent.js b/examples/with-atlaskit/components/ButtonComponent.js
index 8978598bea..03a9837ea9 100644
--- a/examples/with-atlaskit/components/ButtonComponent.js
+++ b/examples/with-atlaskit/components/ButtonComponent.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import Button, { ButtonGroup } from '@atlaskit/button'
 
-export default () => {
+export default function ButtonComponent() {
   return (
     <React.Fragment>
       <Button style={{ margin: 10 }}>Button</Button>
diff --git a/examples/with-atlaskit/components/CheckboxComponent.js b/examples/with-atlaskit/components/CheckboxComponent.js
index eb6c7cdd30..d2c618cd14 100644
--- a/examples/with-atlaskit/components/CheckboxComponent.js
+++ b/examples/with-atlaskit/components/CheckboxComponent.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Checkbox } from '@atlaskit/checkbox'
 
-export default () => {
+export default function CheckboxComponent() {
   return (
     <React.Fragment>
       <Checkbox
diff --git a/examples/with-atlaskit/components/DateTimePickerComponent.js b/examples/with-atlaskit/components/DateTimePickerComponent.js
index f1381a3c98..5b5ba385c5 100644
--- a/examples/with-atlaskit/components/DateTimePickerComponent.js
+++ b/examples/with-atlaskit/components/DateTimePickerComponent.js
@@ -6,7 +6,7 @@ import {
 } from '@atlaskit/datetime-picker'
 import { Label } from '@atlaskit/field-base'
 
-export default () => {
+export default function DateTimePickerComponent() {
   return (
     <React.Fragment>
       <Label label="TimePicker - timeFormat (h:mm a)" />
diff --git a/examples/with-atlaskit/components/DropdownMenuComponent.js b/examples/with-atlaskit/components/DropdownMenuComponent.js
index 7f0765183b..ac6ad9bded 100644
--- a/examples/with-atlaskit/components/DropdownMenuComponent.js
+++ b/examples/with-atlaskit/components/DropdownMenuComponent.js
@@ -5,7 +5,7 @@ import DropdownMenu, {
 } from '@atlaskit/dropdown-menu'
 import { Label } from '@atlaskit/field-base'
 
-export default () => {
+export default function DropdownMenuComponent() {
   return (
     <React.Fragment>
       <Label label="DropdownMenu" />
diff --git a/examples/with-atlaskit/pages/index.js b/examples/with-atlaskit/pages/index.js
index 53bddef2b4..3ec5a34e76 100644
--- a/examples/with-atlaskit/pages/index.js
+++ b/examples/with-atlaskit/pages/index.js
@@ -4,7 +4,7 @@ import CheckboxComponent from '../components/CheckboxComponent'
 import DateTimePickerComponent from '../components/DateTimePickerComponent'
 import DropdownMenuComponent from '../components/DropdownMenuComponent'
 
-export default () => {
+export default function Home() {
   return (
     <React.Fragment>
       <ButtonComponent />
diff --git a/examples/with-cerebral/components/Clock.js b/examples/with-cerebral/components/Clock.js
index 20da008b3c..cfbddeae67 100644
--- a/examples/with-cerebral/components/Clock.js
+++ b/examples/with-cerebral/components/Clock.js
@@ -1,4 +1,4 @@
-export default (props) => {
+export default function Clock(props) {
   return (
     <div className={props.light ? 'light' : ''}>
       {format(new Date(props.lastUpdate))}
diff --git a/examples/with-cerebral/modules/clock/provider.js b/examples/with-cerebral/modules/clock/provider.js
index 65dd58fe78..2b478ca05c 100644
--- a/examples/with-cerebral/modules/clock/provider.js
+++ b/examples/with-cerebral/modules/clock/provider.js
@@ -2,7 +2,7 @@
 const SECOND = 1000
 let timer = null
 
-export default (context) => {
+export default function provider(context) {
   context.clock = {
     start(signalPath) {
       const signal = context.controller.getSignal(signalPath)
diff --git a/examples/with-cookie-auth-fauna/pages/api/login.js b/examples/with-cookie-auth-fauna/pages/api/login.js
index 975d743c55..803c7f7bc2 100644
--- a/examples/with-cookie-auth-fauna/pages/api/login.js
+++ b/examples/with-cookie-auth-fauna/pages/api/login.js
@@ -1,7 +1,7 @@
 import { query as q } from 'faunadb'
 import { serverClient, serializeFaunaCookie } from '../../utils/fauna-auth'
 
-export default async (req, res) => {
+export default async function login(req, res) {
   const { email, password } = await req.body
 
   try {
diff --git a/examples/with-cookie-auth-fauna/pages/api/logout.js b/examples/with-cookie-auth-fauna/pages/api/logout.js
index b38f48b8f7..e683d9166b 100644
--- a/examples/with-cookie-auth-fauna/pages/api/logout.js
+++ b/examples/with-cookie-auth-fauna/pages/api/logout.js
@@ -2,7 +2,7 @@ import { query as q } from 'faunadb'
 import cookie from 'cookie'
 import { faunaClient, FAUNA_SECRET_COOKIE } from '../../utils/fauna-auth'
 
-export default async (req, res) => {
+export default async function logout(req, res) {
   const cookies = cookie.parse(req.headers.cookie ?? '')
   const faunaSecret = cookies[FAUNA_SECRET_COOKIE]
   if (!faunaSecret) {
diff --git a/examples/with-cookie-auth-fauna/pages/api/profile.js b/examples/with-cookie-auth-fauna/pages/api/profile.js
index 2d5ef16108..f8f16248aa 100644
--- a/examples/with-cookie-auth-fauna/pages/api/profile.js
+++ b/examples/with-cookie-auth-fauna/pages/api/profile.js
@@ -7,7 +7,7 @@ export const profileApi = async (faunaSecret) => {
   return ref.id
 }
 
-export default async (req, res) => {
+export default async function profile(req, res) {
   const cookies = cookie.parse(req.headers.cookie ?? '')
   const faunaSecret = cookies[FAUNA_SECRET_COOKIE]
 
diff --git a/examples/with-cookie-auth-fauna/pages/api/signup.js b/examples/with-cookie-auth-fauna/pages/api/signup.js
index 094b6895f7..9e9f253649 100644
--- a/examples/with-cookie-auth-fauna/pages/api/signup.js
+++ b/examples/with-cookie-auth-fauna/pages/api/signup.js
@@ -1,7 +1,7 @@
 import { query as q } from 'faunadb'
 import { serverClient, serializeFaunaCookie } from '../../utils/fauna-auth'
 
-export default async (req, res) => {
+export default async function signuo(req, res) {
   const { email, password } = await req.body
 
   try {
diff --git a/examples/with-cxs/pages/index.js b/examples/with-cxs/pages/index.js
index 3212c82819..444e33a04b 100644
--- a/examples/with-cxs/pages/index.js
+++ b/examples/with-cxs/pages/index.js
@@ -9,11 +9,13 @@ if (typeof window !== 'undefined') {
   cxs.rehydrate(serverCss)
 }
 
-export default () => (
-  <div className={cx.root}>
-    <h1 className={cx.title}>My page</h1>
-  </div>
-)
+export default function Home() {
+  return (
+    <div className={cx.root}>
+      <h1 className={cx.title}>My page</h1>
+    </div>
+  )
+}
 
 const cx = {
   root: cxs({
diff --git a/examples/with-docker/pages/index.js b/examples/with-docker/pages/index.js
index 22e6a55ec1..557f90a544 100644
--- a/examples/with-docker/pages/index.js
+++ b/examples/with-docker/pages/index.js
@@ -1,4 +1,4 @@
-export default () => {
+export default function Home() {
   return (
     <>
       <h1>Hello World!</h1>
diff --git a/examples/with-dotenv/pages/index.js b/examples/with-dotenv/pages/index.js
index 73ed3e74e6..bf36e51eb9 100644
--- a/examples/with-dotenv/pages/index.js
+++ b/examples/with-dotenv/pages/index.js
@@ -1 +1,3 @@
-export default () => <div>{process.env.TEST_VAR}</div>
+export default function Home() {
+  return <div>{process.env.TEST_VAR}</div>
+}
diff --git a/examples/with-dynamic-app-layout/layouts/BlueLayout.js b/examples/with-dynamic-app-layout/layouts/BlueLayout.js
index 7778f3499c..5ab92b0c65 100644
--- a/examples/with-dynamic-app-layout/layouts/BlueLayout.js
+++ b/examples/with-dynamic-app-layout/layouts/BlueLayout.js
@@ -1,3 +1,3 @@
-export default ({ children }) => {
+export default function BlueLayout({ children }) {
   return <main style={{ border: '4px dashed blue' }}>{children}</main>
 }
diff --git a/examples/with-dynamic-app-layout/layouts/GreenLayout.js b/examples/with-dynamic-app-layout/layouts/GreenLayout.js
index 907472005a..8382bbd139 100644
--- a/examples/with-dynamic-app-layout/layouts/GreenLayout.js
+++ b/examples/with-dynamic-app-layout/layouts/GreenLayout.js
@@ -1,3 +1,3 @@
-export default ({ children }) => {
+export default function GreenLayout({ children }) {
   return <main style={{ border: '4px dashed green' }}>{children}</main>
 }
diff --git a/examples/with-dynamic-app-layout/layouts/RedLayout.js b/examples/with-dynamic-app-layout/layouts/RedLayout.js
index 7fba22c3ae..4bd1ae176b 100644
--- a/examples/with-dynamic-app-layout/layouts/RedLayout.js
+++ b/examples/with-dynamic-app-layout/layouts/RedLayout.js
@@ -1,3 +1,3 @@
-export default ({ children }) => {
+export default function RedLayout({ children }) {
   return <main style={{ border: '4px dashed red' }}>{children}</main>
 }
diff --git a/examples/with-dynamic-import/components/Header.js b/examples/with-dynamic-import/components/Header.js
index ac35b7b42e..ae4bfb4752 100644
--- a/examples/with-dynamic-import/components/Header.js
+++ b/examples/with-dynamic-import/components/Header.js
@@ -1,16 +1,18 @@
 import Link from 'next/link'
 
-export default () => (
-  <div>
-    <Link href="/">
-      <a style={styles.a}>Home</a>
-    </Link>
+export default function Header() {
+  return (
+    <div>
+      <Link href="/">
+        <a style={styles.a}>Home</a>
+      </Link>
 
-    <Link href="/about">
-      <a style={styles.a}>About</a>
-    </Link>
-  </div>
-)
+      <Link href="/about">
+        <a style={styles.a}>About</a>
+      </Link>
+    </div>
+  )
+}
 
 const styles = {
   a: {
diff --git a/examples/with-dynamic-import/components/hello1.js b/examples/with-dynamic-import/components/hello1.js
index 6d39a24d56..cc323ac454 100644
--- a/examples/with-dynamic-import/components/hello1.js
+++ b/examples/with-dynamic-import/components/hello1.js
@@ -1 +1,3 @@
-export default () => <p>Hello World 1 (imported dynamically) </p>
+export default function Hello1() {
+  return <p>Hello World 1 (imported dynamically) </p>
+}
diff --git a/examples/with-dynamic-import/components/hello2.js b/examples/with-dynamic-import/components/hello2.js
index 9dffdc55e5..4efb8ff5d6 100644
--- a/examples/with-dynamic-import/components/hello2.js
+++ b/examples/with-dynamic-import/components/hello2.js
@@ -1 +1,3 @@
-export default () => <p>Hello World 2 (imported dynamically) </p>
+export default function Hello2() {
+  return <p>Hello World 2 (imported dynamically) </p>
+}
diff --git a/examples/with-dynamic-import/components/hello3.js b/examples/with-dynamic-import/components/hello3.js
index d14e6b4002..7b7c737dcd 100644
--- a/examples/with-dynamic-import/components/hello3.js
+++ b/examples/with-dynamic-import/components/hello3.js
@@ -1 +1,3 @@
-export default () => <p>Hello World 3 (imported dynamically) </p>
+export default function Hello3() {
+  return <p>Hello World 3 (imported dynamically) </p>
+}
diff --git a/examples/with-dynamic-import/components/hello4.js b/examples/with-dynamic-import/components/hello4.js
index 89f8c49a74..9c256f640a 100644
--- a/examples/with-dynamic-import/components/hello4.js
+++ b/examples/with-dynamic-import/components/hello4.js
@@ -1 +1,3 @@
-export default () => <p>Hello World 4 (imported dynamically) </p>
+export default function Hello4() {
+  return <p>Hello World 4 (imported dynamically) </p>
+}
diff --git a/examples/with-dynamic-import/components/hello5.js b/examples/with-dynamic-import/components/hello5.js
index d66261cd64..4cbe8c06dc 100644
--- a/examples/with-dynamic-import/components/hello5.js
+++ b/examples/with-dynamic-import/components/hello5.js
@@ -1 +1,3 @@
-export default () => <p>Hello World 5 (imported dynamically) </p>
+export default function Hello5() {
+  return <p>Hello World 5 (imported dynamically) </p>
+}
diff --git a/examples/with-electron/renderer/pages/index.js b/examples/with-electron/renderer/pages/index.js
index b645f3f5e5..7c0f7a4794 100644
--- a/examples/with-electron/renderer/pages/index.js
+++ b/examples/with-electron/renderer/pages/index.js
@@ -1,6 +1,6 @@
 import { Component } from 'react'
 
-export default class extends Component {
+export default class Home extends Component {
   state = {
     input: '',
     message: null,
diff --git a/examples/with-env-from-next-config-js/pages/index.js b/examples/with-env-from-next-config-js/pages/index.js
index 07ba678586..5276f64476 100644
--- a/examples/with-env-from-next-config-js/pages/index.js
+++ b/examples/with-env-from-next-config-js/pages/index.js
@@ -1,4 +1,4 @@
-export default () => {
+export default function Home() {
   return (
     <div>
       RESTURL_SPEAKERS {process.env.RESTURL_SPEAKERS}
diff --git a/examples/with-fela/pages/index.js b/examples/with-fela/pages/index.js
index e3dfdfeaf3..df6583c7ae 100755
--- a/examples/with-fela/pages/index.js
+++ b/examples/with-fela/pages/index.js
@@ -33,9 +33,11 @@ function Title({ children, size = 24 }) {
   return <h1 className={css({ fontSize: size, color: '#555' })}>{children}</h1>
 }
 
-export default () => (
-  <Container>
-    <Title size={50}>My Title</Title>
-    <Text>Hi, I am Fela.</Text>
-  </Container>
-)
+export default function Home() {
+  return (
+    <Container>
+      <Title size={50}>My Title</Title>
+      <Text>Hi, I am Fela.</Text>
+    </Container>
+  )
+}
diff --git a/examples/with-firebase-authentication/utils/auth/initFirebase.js b/examples/with-firebase-authentication/utils/auth/initFirebase.js
index 5cd0a410c0..46a25d4adf 100644
--- a/examples/with-firebase-authentication/utils/auth/initFirebase.js
+++ b/examples/with-firebase-authentication/utils/auth/initFirebase.js
@@ -8,7 +8,7 @@ const config = {
   projectId: process.env.FIREBASE_PROJECT_ID,
 }
 
-export default () => {
+export default function initFirebase() {
   if (!firebase.apps.length) {
     firebase.initializeApp(config)
   }
diff --git a/examples/with-firebase-authentication/utils/auth/logout.js b/examples/with-firebase-authentication/utils/auth/logout.js
index f113d0ef30..a471f26480 100644
--- a/examples/with-firebase-authentication/utils/auth/logout.js
+++ b/examples/with-firebase-authentication/utils/auth/logout.js
@@ -2,7 +2,7 @@
 import firebase from 'firebase/app'
 import 'firebase/auth'
 
-export default async () => {
+export default async function logout() {
   return firebase
     .auth()
     .signOut()
diff --git a/examples/with-firebase-authentication/utils/middleware/commonMiddleware.js b/examples/with-firebase-authentication/utils/middleware/commonMiddleware.js
index 17f1de3d90..ad052d2027 100644
--- a/examples/with-firebase-authentication/utils/middleware/commonMiddleware.js
+++ b/examples/with-firebase-authentication/utils/middleware/commonMiddleware.js
@@ -1,4 +1,6 @@
 import cookieSession from './cookieSession'
 import cookieSessionRefresh from './cookieSessionRefresh'
 
-export default (handler) => cookieSession(cookieSessionRefresh(handler))
+export default function commonMiddleware(handler) {
+  return cookieSession(cookieSessionRefresh(handler))
+}
diff --git a/examples/with-firebase-authentication/utils/middleware/cookieSession.js b/examples/with-firebase-authentication/utils/middleware/cookieSession.js
index 01f5cf14a0..eaac3d52aa 100644
--- a/examples/with-firebase-authentication/utils/middleware/cookieSession.js
+++ b/examples/with-firebase-authentication/utils/middleware/cookieSession.js
@@ -31,11 +31,13 @@ export const addSession = (req, res) => {
   includeSession(req, res, () => {})
 }
 
-export default (handler) => (req, res) => {
-  try {
-    addSession(req, res)
-  } catch (e) {
-    return res.status(500).json({ error: 'Could not get user session.' })
+export default function cookieSessionWrapper(handler) {
+  return (req, res) => {
+    try {
+      addSession(req, res)
+    } catch (e) {
+      return res.status(500).json({ error: 'Could not get user session.' })
+    }
+    return handler(req, res)
   }
-  return handler(req, res)
 }
diff --git a/examples/with-firebase-authentication/utils/middleware/cookieSessionRefresh.js b/examples/with-firebase-authentication/utils/middleware/cookieSessionRefresh.js
index 9ff904d391..4958db3d3c 100644
--- a/examples/with-firebase-authentication/utils/middleware/cookieSessionRefresh.js
+++ b/examples/with-firebase-authentication/utils/middleware/cookieSessionRefresh.js
@@ -1,9 +1,11 @@
 // Update a value in the cookie so that the set-cookie will be sent.
 // Only changes every minute so that it's not sent with every request.
 // https://github.com/expressjs/cookie-session#extending-the-session-expiration
-export default (handler) => (req, res) => {
-  if (req.session) {
-    req.session.nowInMinutes = Math.floor(Date.now() / 60e3)
+export default function cookieSessionRefresh(handler) {
+  return (req, res) => {
+    if (req.session) {
+      req.session.nowInMinutes = Math.floor(Date.now() / 60e3)
+    }
+    handler(req, res)
   }
-  handler(req, res)
 }
diff --git a/examples/with-firebase-authentication/utils/pageWrappers/withAuthUser.js b/examples/with-firebase-authentication/utils/pageWrappers/withAuthUser.js
index 7bb343aa64..fba75eb83f 100644
--- a/examples/with-firebase-authentication/utils/pageWrappers/withAuthUser.js
+++ b/examples/with-firebase-authentication/utils/pageWrappers/withAuthUser.js
@@ -9,7 +9,7 @@ import { createAuthUser, createAuthUserInfo } from '../auth/user'
 // Gets the authenticated user from the Firebase JS SDK, when client-side,
 // or from the request object, when server-side. Add the AuthUserInfo to
 // context.
-export default (ComposedComponent) => {
+export default function withAuthUser(ComposedComponent) {
   const WithAuthUserComp = (props) => {
     const { AuthUserInfo, ...otherProps } = props
 
diff --git a/examples/with-firebase-authentication/utils/pageWrappers/withAuthUserInfo.js b/examples/with-firebase-authentication/utils/pageWrappers/withAuthUserInfo.js
index 401807ddcb..d0d300e8c0 100644
--- a/examples/with-firebase-authentication/utils/pageWrappers/withAuthUserInfo.js
+++ b/examples/with-firebase-authentication/utils/pageWrappers/withAuthUserInfo.js
@@ -6,7 +6,7 @@ import { get } from 'lodash/object'
 import { AuthUserInfoContext } from '../auth/hooks'
 
 // Provides an AuthUserInfo prop to the composed component.
-export default (ComposedComponent) => {
+export default function withAuthUserInfo(ComposedComponent) {
   const WithAuthUserInfoComp = (props) => {
     const { AuthUserInfo: AuthUserInfoFromSession, ...otherProps } = props
     return (
diff --git a/examples/with-firebase-hosting/src/pages/about.jsx b/examples/with-firebase-hosting/src/pages/about.jsx
index 6bba5901a1..9f42ecb00a 100644
--- a/examples/with-firebase-hosting/src/pages/about.jsx
+++ b/examples/with-firebase-hosting/src/pages/about.jsx
@@ -1,8 +1,10 @@
 import * as React from 'react'
 import App from '../components/App'
 
-export default () => (
-  <App>
-    <p>About Page</p>
-  </App>
-)
+export default function About() {
+  return (
+    <App>
+      <p>About Page</p>
+    </App>
+  )
+}
diff --git a/examples/with-firebase-hosting/src/pages/index.jsx b/examples/with-firebase-hosting/src/pages/index.jsx
index 25908f659e..5370c85870 100644
--- a/examples/with-firebase-hosting/src/pages/index.jsx
+++ b/examples/with-firebase-hosting/src/pages/index.jsx
@@ -1,8 +1,10 @@
 import * as React from 'react'
 import App from '../components/App'
 
-export default () => (
-  <App>
-    <p>Index Page</p>
-  </App>
-)
+export default function Home() {
+  return (
+    <App>
+      <p>Index Page</p>
+    </App>
+  )
+}
diff --git a/examples/with-firebase/context/userContext.js b/examples/with-firebase/context/userContext.js
index 23f6f216c6..810d52412a 100644
--- a/examples/with-firebase/context/userContext.js
+++ b/examples/with-firebase/context/userContext.js
@@ -3,7 +3,7 @@ import firebase from '../firebase/clientApp'
 
 export const UserContext = createContext()
 
-export default ({ children }) => {
+export default function UserContextComp({ children }) {
   const [user, setUser] = useState(null)
   const [loadingUser, setLoadingUser] = useState(true) // Helpful, to update the UI accordingly.
 
diff --git a/examples/with-firebase/pages/_app.js b/examples/with-firebase/pages/_app.js
index c6985b38a6..812477fe59 100644
--- a/examples/with-firebase/pages/_app.js
+++ b/examples/with-firebase/pages/_app.js
@@ -1,8 +1,10 @@
 import UserProvider from '../context/userContext'
 
 // Custom App to wrap it with context provider
-export default ({ Component, pageProps }) => (
-  <UserProvider>
-    <Component {...pageProps} />
-  </UserProvider>
-)
+export default function App({ Component, pageProps }) {
+  return (
+    <UserProvider>
+      <Component {...pageProps} />
+    </UserProvider>
+  )
+}
diff --git a/examples/with-firebase/pages/index.js b/examples/with-firebase/pages/index.js
index 11d5de6da0..210a171145 100644
--- a/examples/with-firebase/pages/index.js
+++ b/examples/with-firebase/pages/index.js
@@ -3,7 +3,7 @@ import { useEffect } from 'react'
 import { useUser } from '../context/userContext'
 import firebase from '../firebase/clientApp'
 
-export default () => {
+export default function Home() {
   // Our custom hook to get context values
   const { loadingUser, user } = useUser()
 
diff --git a/examples/with-flow/components/Page.js b/examples/with-flow/components/Page.js
index 783e3bb20c..53914133ea 100644
--- a/examples/with-flow/components/Page.js
+++ b/examples/with-flow/components/Page.js
@@ -7,11 +7,16 @@ type Props = {
   title?: string,
 }
 
-export default ({ children, title = 'This is the default title' }: Props) => (
-  <section>
-    <Head>
-      <title>{title}</title>
-    </Head>
-    {children}
-  </section>
-)
+export default function Page({
+  children,
+  title = 'This is the default title',
+}: Props) {
+  return (
+    <section>
+      <Head>
+        <title>{title}</title>
+      </Head>
+      {children}
+    </section>
+  )
+}
diff --git a/examples/with-flow/pages/about.js b/examples/with-flow/pages/about.js
index 1a367117a4..f24fa5baa3 100644
--- a/examples/with-flow/pages/about.js
+++ b/examples/with-flow/pages/about.js
@@ -2,8 +2,10 @@
 import React from 'react'
 import Page from '../components/Page'
 
-export default () => (
-  <Page title="About us">
-    <div>About us</div>
-  </Page>
-)
+export default function About() {
+  return (
+    <Page title="About us">
+      <div>About us</div>
+    </Page>
+  )
+}
diff --git a/examples/with-flow/pages/contact.js b/examples/with-flow/pages/contact.js
index f71be966e5..9333c1628d 100644
--- a/examples/with-flow/pages/contact.js
+++ b/examples/with-flow/pages/contact.js
@@ -2,8 +2,10 @@
 import React from 'react'
 import Page from '../components/Page'
 
-export default () => (
-  <Page title="Contact us">
-    <div>Contact</div>
-  </Page>
-)
+export default function Contact() {
+  return (
+    <Page title="Contact us">
+      <div>Contact</div>
+    </Page>
+  )
+}
diff --git a/examples/with-flow/pages/index.js b/examples/with-flow/pages/index.js
index ee442ef802..73c7ee1c14 100644
--- a/examples/with-flow/pages/index.js
+++ b/examples/with-flow/pages/index.js
@@ -2,8 +2,10 @@
 import React from 'react'
 import Page from '../components/Page'
 
-export default () => (
-  <Page>
-    <div>Hello World</div>
-  </Page>
-)
+export default function Home() {
+  return (
+    <Page>
+      <div>Hello World</div>
+    </Page>
+  )
+}
diff --git a/examples/with-glamor/pages/index.js b/examples/with-glamor/pages/index.js
index b2daf3793b..da1d678d77 100644
--- a/examples/with-glamor/pages/index.js
+++ b/examples/with-glamor/pages/index.js
@@ -8,4 +8,6 @@ if (typeof window !== 'undefined') {
   rehydrate(window.__NEXT_DATA__.ids)
 }
 
-export default () => <h1 css={{ color: 'red', fontSize: 50 }}>My page</h1>
+export default function Home() {
+  return <h1 css={{ color: 'red', fontSize: 50 }}>My page</h1>
+}
diff --git a/examples/with-google-analytics-amp/components/Header.js b/examples/with-google-analytics-amp/components/Header.js
index 0b96715a08..1401f11420 100644
--- a/examples/with-google-analytics-amp/components/Header.js
+++ b/examples/with-google-analytics-amp/components/Header.js
@@ -1,26 +1,28 @@
 import React from 'react'
 import Link from 'next/link'
 
-export default () => (
-  <header>
-    <nav>
-      <ul>
-        <li>
-          <Link href="/">
-            <a>Home</a>
-          </Link>
-        </li>
-        <li>
-          <Link href="/about">
-            <a>About</a>
-          </Link>
-        </li>
-        <li>
-          <Link href="/contact">
-            <a>Contact</a>
-          </Link>
-        </li>
-      </ul>
-    </nav>
-  </header>
-)
+export default function Header() {
+  return (
+    <header>
+      <nav>
+        <ul>
+          <li>
+            <Link href="/">
+              <a>Home</a>
+            </Link>
+          </li>
+          <li>
+            <Link href="/about">
+              <a>About</a>
+            </Link>
+          </li>
+          <li>
+            <Link href="/contact">
+              <a>Contact</a>
+            </Link>
+          </li>
+        </ul>
+      </nav>
+    </header>
+  )
+}
diff --git a/examples/with-google-analytics-amp/components/Page.js b/examples/with-google-analytics-amp/components/Page.js
index 3ad2a2707d..270c350a4f 100644
--- a/examples/with-google-analytics-amp/components/Page.js
+++ b/examples/with-google-analytics-amp/components/Page.js
@@ -1,9 +1,11 @@
 import React from 'react'
 import Header from './Header'
 
-export default ({ children }) => (
-  <div>
-    <Header />
-    {children}
-  </div>
-)
+export default function Page({ children }) {
+  return (
+    <div>
+      <Header />
+      {children}
+    </div>
+  )
+}
diff --git a/examples/with-google-analytics-amp/components/amp/AmpAnalytics.js b/examples/with-google-analytics-amp/components/amp/AmpAnalytics.js
index 4c6c7183e3..f369b977f5 100644
--- a/examples/with-google-analytics-amp/components/amp/AmpAnalytics.js
+++ b/examples/with-google-analytics-amp/components/amp/AmpAnalytics.js
@@ -2,18 +2,20 @@ import React from 'react'
 
 import AmpIncludeCustomElement from './AmpIncludeCustomElement'
 
-export default (props) => (
-  <>
-    <AmpIncludeCustomElement name="amp-analytics" version="0.1" />
-    <amp-analytics type={props.type}>
-      {props.script && (
-        <script
-          type="application/json"
-          dangerouslySetInnerHTML={{
-            __html: JSON.stringify(props.script),
-          }}
-        />
-      )}
-    </amp-analytics>
-  </>
-)
+export default function AmpAnalytics(props) {
+  return (
+    <>
+      <AmpIncludeCustomElement name="amp-analytics" version="0.1" />
+      <amp-analytics type={props.type}>
+        {props.script && (
+          <script
+            type="application/json"
+            dangerouslySetInnerHTML={{
+              __html: JSON.stringify(props.script),
+            }}
+          />
+        )}
+      </amp-analytics>
+    </>
+  )
+}
diff --git a/examples/with-google-analytics-amp/components/amp/AmpIncludeCustomElement.js b/examples/with-google-analytics-amp/components/amp/AmpIncludeCustomElement.js
index b313087f9b..6a951639d1 100644
--- a/examples/with-google-analytics-amp/components/amp/AmpIncludeCustomElement.js
+++ b/examples/with-google-analytics-amp/components/amp/AmpIncludeCustomElement.js
@@ -1,19 +1,21 @@
 import React from 'react'
 import Head from 'next/head'
 
-export default (props) => (
-  <Head>
-    <script
-      async
-      custom-element={props.name}
-      src={
-        'https://cdn.ampproject.org/v0/' +
-        props.name +
-        '-' +
-        props.version +
-        '.js'
-      }
-      key={props.name}
-    />
-  </Head>
-)
+export default function AmpIncludeCustomElement(props) {
+  return (
+    <Head>
+      <script
+        async
+        custom-element={props.name}
+        src={
+          'https://cdn.ampproject.org/v0/' +
+          props.name +
+          '-' +
+          props.version +
+          '.js'
+        }
+        key={props.name}
+      />
+    </Head>
+  )
+}
diff --git a/examples/with-google-analytics-amp/pages/_document.js b/examples/with-google-analytics-amp/pages/_document.js
index 84b237d769..f9dbe9e106 100644
--- a/examples/with-google-analytics-amp/pages/_document.js
+++ b/examples/with-google-analytics-amp/pages/_document.js
@@ -11,7 +11,7 @@ function AmpWrap({ ampOnly, nonAmp }) {
   return !isAmp && nonAmp
 }
 
-export default class extends Document {
+export default class MyDocument extends Document {
   render() {
     return (
       <html>
diff --git a/examples/with-google-analytics-amp/pages/about.js b/examples/with-google-analytics-amp/pages/about.js
index a340e5920c..b4cf2dc53b 100644
--- a/examples/with-google-analytics-amp/pages/about.js
+++ b/examples/with-google-analytics-amp/pages/about.js
@@ -1,8 +1,10 @@
 import React from 'react'
 import Page from '../components/Page'
 
-export default () => (
-  <Page>
-    <h1>This is the About page</h1>
-  </Page>
-)
+export default function About() {
+  return (
+    <Page>
+      <h1>This is the About page</h1>
+    </Page>
+  )
+}
diff --git a/examples/with-google-analytics-amp/pages/contact.js b/examples/with-google-analytics-amp/pages/contact.js
index 419e8d9a6d..59da9c9a86 100644
--- a/examples/with-google-analytics-amp/pages/contact.js
+++ b/examples/with-google-analytics-amp/pages/contact.js
@@ -3,7 +3,7 @@ import Page from '../components/Page'
 
 import * as gtag from '../lib/gtag'
 
-export default class extends Component {
+export default class Contact extends Component {
   state = { message: '' }
 
   handleInput = (e) => {
diff --git a/examples/with-google-analytics-amp/pages/index.js b/examples/with-google-analytics-amp/pages/index.js
index 9969504759..dbe23d6a75 100644
--- a/examples/with-google-analytics-amp/pages/index.js
+++ b/examples/with-google-analytics-amp/pages/index.js
@@ -1,8 +1,10 @@
 import React from 'react'
 import Page from '../components/Page'
 
-export default () => (
-  <Page>
-    <h1>This is the Home page</h1>
-  </Page>
-)
+export default function Home() {
+  return (
+    <Page>
+      <h1>This is the Home page</h1>
+    </Page>
+  )
+}
diff --git a/examples/with-google-analytics/components/Header.js b/examples/with-google-analytics/components/Header.js
index 0b96715a08..1401f11420 100644
--- a/examples/with-google-analytics/components/Header.js
+++ b/examples/with-google-analytics/components/Header.js
@@ -1,26 +1,28 @@
 import React from 'react'
 import Link from 'next/link'
 
-export default () => (
-  <header>
-    <nav>
-      <ul>
-        <li>
-          <Link href="/">
-            <a>Home</a>
-          </Link>
-        </li>
-        <li>
-          <Link href="/about">
-            <a>About</a>
-          </Link>
-        </li>
-        <li>
-          <Link href="/contact">
-            <a>Contact</a>
-          </Link>
-        </li>
-      </ul>
-    </nav>
-  </header>
-)
+export default function Header() {
+  return (
+    <header>
+      <nav>
+        <ul>
+          <li>
+            <Link href="/">
+              <a>Home</a>
+            </Link>
+          </li>
+          <li>
+            <Link href="/about">
+              <a>About</a>
+            </Link>
+          </li>
+          <li>
+            <Link href="/contact">
+              <a>Contact</a>
+            </Link>
+          </li>
+        </ul>
+      </nav>
+    </header>
+  )
+}
diff --git a/examples/with-google-analytics/components/Page.js b/examples/with-google-analytics/components/Page.js
index 3ad2a2707d..270c350a4f 100644
--- a/examples/with-google-analytics/components/Page.js
+++ b/examples/with-google-analytics/components/Page.js
@@ -1,9 +1,11 @@
 import React from 'react'
 import Header from './Header'
 
-export default ({ children }) => (
-  <div>
-    <Header />
-    {children}
-  </div>
-)
+export default function Page({ children }) {
+  return (
+    <div>
+      <Header />
+      {children}
+    </div>
+  )
+}
diff --git a/examples/with-google-analytics/pages/_document.js b/examples/with-google-analytics/pages/_document.js
index aa2293a50c..8158468373 100644
--- a/examples/with-google-analytics/pages/_document.js
+++ b/examples/with-google-analytics/pages/_document.js
@@ -3,7 +3,7 @@ import Document, { Head, Main, NextScript } from 'next/document'
 
 import { GA_TRACKING_ID } from '../lib/gtag'
 
-export default class extends Document {
+export default class MyDocument extends Document {
   render() {
     return (
       <html>
diff --git a/examples/with-google-analytics/pages/about.js b/examples/with-google-analytics/pages/about.js
index a340e5920c..b4cf2dc53b 100644
--- a/examples/with-google-analytics/pages/about.js
+++ b/examples/with-google-analytics/pages/about.js
@@ -1,8 +1,10 @@
 import React from 'react'
 import Page from '../components/Page'
 
-export default () => (
-  <Page>
-    <h1>This is the About page</h1>
-  </Page>
-)
+export default function About() {
+  return (
+    <Page>
+      <h1>This is the About page</h1>
+    </Page>
+  )
+}
diff --git a/examples/with-google-analytics/pages/contact.js b/examples/with-google-analytics/pages/contact.js
index 419e8d9a6d..59da9c9a86 100644
--- a/examples/with-google-analytics/pages/contact.js
+++ b/examples/with-google-analytics/pages/contact.js
@@ -3,7 +3,7 @@ import Page from '../components/Page'
 
 import * as gtag from '../lib/gtag'
 
-export default class extends Component {
+export default class Contact extends Component {
   state = { message: '' }
 
   handleInput = (e) => {
diff --git a/examples/with-google-analytics/pages/index.js b/examples/with-google-analytics/pages/index.js
index 9969504759..dbe23d6a75 100644
--- a/examples/with-google-analytics/pages/index.js
+++ b/examples/with-google-analytics/pages/index.js
@@ -1,8 +1,10 @@
 import React from 'react'
 import Page from '../components/Page'
 
-export default () => (
-  <Page>
-    <h1>This is the Home page</h1>
-  </Page>
-)
+export default function Home() {
+  return (
+    <Page>
+      <h1>This is the Home page</h1>
+    </Page>
+  )
+}
diff --git a/examples/with-graphql-faunadb/components/Footer.js b/examples/with-graphql-faunadb/components/Footer.js
index 63e0e0908f..c133fdea43 100644
--- a/examples/with-graphql-faunadb/components/Footer.js
+++ b/examples/with-graphql-faunadb/components/Footer.js
@@ -8,172 +8,178 @@ import {
   footerColumnListURL,
 } from '../styles/footer.js'
 
-export default (props) => (
-  <footer className={footer.className}>
-    <div className={footerContent.className}>
-      <div
-        className={`${footerColumn.className} ${footerColumnFirst.className}`}
-      >
-        <a href="https://fauna.com" target="_blank" rel="noopener noreferrer">
-          <img src="/static/fauna-logo-white.png" height="35px" width="auto" />
-        </a>
-        <p>
-          744 Montgomery Street
-          <br />
-          Suite 200
-          <br />
-          San Francisco, CA 94111
-          <br />
-          <a
-            href="mailto:info@fauna.com"
-            className={footerColumnFirstURL.className}
-          >
-            info@fauna.com
+export default function Footer(props) {
+  return (
+    <footer className={footer.className}>
+      <div className={footerContent.className}>
+        <div
+          className={`${footerColumn.className} ${footerColumnFirst.className}`}
+        >
+          <a href="https://fauna.com" target="_blank" rel="noopener noreferrer">
+            <img
+              src="/static/fauna-logo-white.png"
+              height="35px"
+              width="auto"
+            />
           </a>
-        </p>
+          <p>
+            744 Montgomery Street
+            <br />
+            Suite 200
+            <br />
+            San Francisco, CA 94111
+            <br />
+            <a
+              href="mailto:info@fauna.com"
+              className={footerColumnFirstURL.className}
+            >
+              info@fauna.com
+            </a>
+          </p>
+        </div>
+        <div className={footerColumn.className}>
+          Fauna
+          <ul className={footerColumnList.className}>
+            <li>
+              <a
+                className={footerColumnListURL.className}
+                target="_blank"
+                rel="noopener noreferrer"
+                href="https://fauna.com/faunadb"
+              >
+                FaunaDB
+              </a>
+            </li>
+            <li>
+              <a
+                className={footerColumnListURL.className}
+                target="_blank"
+                rel="noopener noreferrer"
+                href="https://fauna.com/pricing"
+              >
+                Pricing
+              </a>
+            </li>
+            <li>
+              <a
+                className={footerColumnListURL.className}
+                target="_blank"
+                rel="noopener noreferrer"
+                href="https://fauna.com/resources"
+              >
+                Resources
+              </a>
+            </li>
+            <li>
+              <a
+                className={footerColumnListURL.className}
+                target="_blank"
+                rel="noopener noreferrer"
+                href="https://fauna.com/blog"
+              >
+                Blog
+              </a>
+            </li>
+          </ul>
+        </div>
+        <div className={footerColumn.className}>
+          About
+          <ul className={footerColumnList.className}>
+            <li>
+              <a
+                className={footerColumnListURL.className}
+                target="_blank"
+                rel="noopener noreferrer"
+                href="https://fauna.com/team"
+              >
+                Company
+              </a>
+            </li>
+            <li>
+              <a
+                className={footerColumnListURL.className}
+                target="_blank"
+                rel="noopener noreferrer"
+                href="https://fauna.com/press"
+              >
+                Press
+              </a>
+            </li>
+            <li>
+              <a
+                className={footerColumnListURL.className}
+                target="_blank"
+                rel="noopener noreferrer"
+                href="https://fauna.com/careers"
+              >
+                Careers
+              </a>
+            </li>
+            <li>
+              <a
+                className={footerColumnListURL.className}
+                target="_blank"
+                rel="noopener noreferrer"
+                href="http://www2.fauna.com/contact-us"
+              >
+                Contact
+              </a>
+            </li>
+          </ul>
+        </div>
+        <div className={footerColumn.className}>
+          Quicklinks
+          <ul className={footerColumnList.className}>
+            <li>
+              <a
+                className={footerColumnListURL.className}
+                target="_blank"
+                rel="noopener noreferrer"
+                href="https://community-invite.fauna.com/"
+              >
+                Community Slack
+              </a>
+            </li>
+            <li>
+              <a
+                className={footerColumnListURL.className}
+                target="_blank"
+                rel="noopener noreferrer"
+                href="https://support.fauna.com/"
+              >
+                Support
+              </a>
+            </li>
+            <li>
+              <a
+                className={footerColumnListURL.className}
+                target="_blank"
+                rel="noopener noreferrer"
+                href="https://dashboard.fauna.com/"
+              >
+                Login
+              </a>
+            </li>
+            <li>
+              <a
+                className={footerColumnListURL.className}
+                target="_blank"
+                rel="noopener noreferrer"
+                href="https://dashboard.fauna.com/accounts/register"
+              >
+                Signup
+              </a>
+            </li>
+          </ul>
+        </div>
       </div>
-      <div className={footerColumn.className}>
-        Fauna
-        <ul className={footerColumnList.className}>
-          <li>
-            <a
-              className={footerColumnListURL.className}
-              target="_blank"
-              rel="noopener noreferrer"
-              href="https://fauna.com/faunadb"
-            >
-              FaunaDB
-            </a>
-          </li>
-          <li>
-            <a
-              className={footerColumnListURL.className}
-              target="_blank"
-              rel="noopener noreferrer"
-              href="https://fauna.com/pricing"
-            >
-              Pricing
-            </a>
-          </li>
-          <li>
-            <a
-              className={footerColumnListURL.className}
-              target="_blank"
-              rel="noopener noreferrer"
-              href="https://fauna.com/resources"
-            >
-              Resources
-            </a>
-          </li>
-          <li>
-            <a
-              className={footerColumnListURL.className}
-              target="_blank"
-              rel="noopener noreferrer"
-              href="https://fauna.com/blog"
-            >
-              Blog
-            </a>
-          </li>
-        </ul>
-      </div>
-      <div className={footerColumn.className}>
-        About
-        <ul className={footerColumnList.className}>
-          <li>
-            <a
-              className={footerColumnListURL.className}
-              target="_blank"
-              rel="noopener noreferrer"
-              href="https://fauna.com/team"
-            >
-              Company
-            </a>
-          </li>
-          <li>
-            <a
-              className={footerColumnListURL.className}
-              target="_blank"
-              rel="noopener noreferrer"
-              href="https://fauna.com/press"
-            >
-              Press
-            </a>
-          </li>
-          <li>
-            <a
-              className={footerColumnListURL.className}
-              target="_blank"
-              rel="noopener noreferrer"
-              href="https://fauna.com/careers"
-            >
-              Careers
-            </a>
-          </li>
-          <li>
-            <a
-              className={footerColumnListURL.className}
-              target="_blank"
-              rel="noopener noreferrer"
-              href="http://www2.fauna.com/contact-us"
-            >
-              Contact
-            </a>
-          </li>
-        </ul>
-      </div>
-      <div className={footerColumn.className}>
-        Quicklinks
-        <ul className={footerColumnList.className}>
-          <li>
-            <a
-              className={footerColumnListURL.className}
-              target="_blank"
-              rel="noopener noreferrer"
-              href="https://community-invite.fauna.com/"
-            >
-              Community Slack
-            </a>
-          </li>
-          <li>
-            <a
-              className={footerColumnListURL.className}
-              target="_blank"
-              rel="noopener noreferrer"
-              href="https://support.fauna.com/"
-            >
-              Support
-            </a>
-          </li>
-          <li>
-            <a
-              className={footerColumnListURL.className}
-              target="_blank"
-              rel="noopener noreferrer"
-              href="https://dashboard.fauna.com/"
-            >
-              Login
-            </a>
-          </li>
-          <li>
-            <a
-              className={footerColumnListURL.className}
-              target="_blank"
-              rel="noopener noreferrer"
-              href="https://dashboard.fauna.com/accounts/register"
-            >
-              Signup
-            </a>
-          </li>
-        </ul>
-      </div>
-    </div>
-    {footerColumnListURL.styles}
-    {footerColumnList.styles}
-    {footerColumnFirstURL.styles}
-    {footerColumnFirst.styles}
-    {footerColumn.styles}
-    {footerContent.styles}
-    {footer.styles}
-  </footer>
-)
+      {footerColumnListURL.styles}
+      {footerColumnList.styles}
+      {footerColumnFirstURL.styles}
+      {footerColumnFirst.styles}
+      {footerColumn.styles}
+      {footerContent.styles}
+      {footer.styles}
+    </footer>
+  )
+}
diff --git a/examples/with-graphql-faunadb/components/GuestbookEntry.js b/examples/with-graphql-faunadb/components/GuestbookEntry.js
index 71dd93522e..a1fc0d7afc 100644
--- a/examples/with-graphql-faunadb/components/GuestbookEntry.js
+++ b/examples/with-graphql-faunadb/components/GuestbookEntry.js
@@ -12,68 +12,70 @@ import {
   guestbookEntryShareTwitterButtonLogo2,
 } from '../styles/guestbookentry'
 
-export default (props) => (
-  <>
-    <div className={guestbookEntry.className}>
-      <div className={guestbookEntryUserDetail.className}>
-        <div className={guestbookEntryUserDetailAvatar.className}>
+export default function GuestbookEntry(props) {
+  return (
+    <>
+      <div className={guestbookEntry.className}>
+        <div className={guestbookEntryUserDetail.className}>
+          <div className={guestbookEntryUserDetailAvatar.className}>
+            <a
+              target="_blank"
+              rel="noopener noreferrer"
+              href={`https://twitter.com/${props.twitter_handle}/`}
+            >
+              <img
+                className={guestbookEntryUserDetailAvatarImg.className}
+                src={`https://avatars.io/twitter/${props.twitter_handle}/`}
+              />
+            </a>
+          </div>
           <a
+            className={guestbookEntryUserDetailBiolink.className}
             target="_blank"
             rel="noopener noreferrer"
             href={`https://twitter.com/${props.twitter_handle}/`}
           >
-            <img
-              className={guestbookEntryUserDetailAvatarImg.className}
-              src={`https://avatars.io/twitter/${props.twitter_handle}/`}
-            />
+            {props.twitter_handle}
           </a>
+          <span className={guestbookEntryUserDetailTimestamp.className}>
+            {props.date.toDateString()}
+          </span>
         </div>
+        <div className={guestbookEntryStory.className}>{props.story}</div>
+      </div>
+      <div className={guestbookEntryShare.className}>
         <a
-          className={guestbookEntryUserDetailBiolink.className}
+          href={`http://twitter.com/share?text=${encodeURIComponent(
+            props.story + ' @faunadb @zeithq'
+          )}&url=${encodeURIComponent(
+            'https://fauna.com'
+          )}&hashtags=graphql,nextjs
+                    `}
           target="_blank"
           rel="noopener noreferrer"
-          href={`https://twitter.com/${props.twitter_handle}/`}
+          className={guestbookEntryShareTwitterButton.className}
         >
-          {props.twitter_handle}
+          <img
+            src="/static/twitter_icon_black.png"
+            className={guestbookEntryShareTwitterButtonLogo1.className}
+          />
+          <img
+            className={guestbookEntryShareTwitterButtonLogo2.className}
+            src="/static/twitter_icon_blue.png"
+          />
         </a>
-        <span className={guestbookEntryUserDetailTimestamp.className}>
-          {props.date.toDateString()}
-        </span>
       </div>
-      <div className={guestbookEntryStory.className}>{props.story}</div>
-    </div>
-    <div className={guestbookEntryShare.className}>
-      <a
-        href={`http://twitter.com/share?text=${encodeURIComponent(
-          props.story + ' @faunadb @zeithq'
-        )}&url=${encodeURIComponent(
-          'https://fauna.com'
-        )}&hashtags=graphql,nextjs
-                    `}
-        target="_blank"
-        rel="noopener noreferrer"
-        className={guestbookEntryShareTwitterButton.className}
-      >
-        <img
-          src="/static/twitter_icon_black.png"
-          className={guestbookEntryShareTwitterButtonLogo1.className}
-        />
-        <img
-          className={guestbookEntryShareTwitterButtonLogo2.className}
-          src="/static/twitter_icon_blue.png"
-        />
-      </a>
-    </div>
-    {guestbookEntry.styles}
-    {guestbookEntryShare.styles}
-    {guestbookEntryShareTwitterButton.styles}
-    {guestbookEntryShareTwitterButtonLogo1.styles}
-    {guestbookEntryShareTwitterButtonLogo2.styles}
-    {guestbookEntryStory.styles}
-    {guestbookEntryUserDetail.styles}
-    {guestbookEntryUserDetailAvatar.styles}
-    {guestbookEntryUserDetailAvatarImg.styles}
-    {guestbookEntryUserDetailBiolink.styles}
-    {guestbookEntryUserDetailTimestamp.styles}
-  </>
-)
+      {guestbookEntry.styles}
+      {guestbookEntryShare.styles}
+      {guestbookEntryShareTwitterButton.styles}
+      {guestbookEntryShareTwitterButtonLogo1.styles}
+      {guestbookEntryShareTwitterButtonLogo2.styles}
+      {guestbookEntryStory.styles}
+      {guestbookEntryUserDetail.styles}
+      {guestbookEntryUserDetailAvatar.styles}
+      {guestbookEntryUserDetailAvatarImg.styles}
+      {guestbookEntryUserDetailBiolink.styles}
+      {guestbookEntryUserDetailTimestamp.styles}
+    </>
+  )
+}
diff --git a/examples/with-graphql-faunadb/components/GuestbookEntryDivider.js b/examples/with-graphql-faunadb/components/GuestbookEntryDivider.js
index 75a16e35ca..3afaba6bf6 100644
--- a/examples/with-graphql-faunadb/components/GuestbookEntryDivider.js
+++ b/examples/with-graphql-faunadb/components/GuestbookEntryDivider.js
@@ -1,18 +1,20 @@
-export default () => (
-  <>
-    <hr />
-    <style jsx>{`
-      hr {
-        display: block;
-        margin-left: auto;
-        margin-right: auto;
-        margin-bottom: 30px;
-        height: 1px;
-        width: 80%;
-        border-radius: 20px;
-        border-color: rgba(50, 63, 203);
-        opacity: 0.5;
-      }
-    `}</style>
-  </>
-)
+export default function GuestbookEntryDivider() {
+  return (
+    <>
+      <hr />
+      <style jsx>{`
+        hr {
+          display: block;
+          margin-left: auto;
+          margin-right: auto;
+          margin-bottom: 30px;
+          height: 1px;
+          width: 80%;
+          border-radius: 20px;
+          border-color: rgba(50, 63, 203);
+          opacity: 0.5;
+        }
+      `}</style>
+    </>
+  )
+}
diff --git a/examples/with-graphql-faunadb/components/Header.js b/examples/with-graphql-faunadb/components/Header.js
index 3b8925a9e9..d6b816ef3a 100644
--- a/examples/with-graphql-faunadb/components/Header.js
+++ b/examples/with-graphql-faunadb/components/Header.js
@@ -1,17 +1,19 @@
 import { headerBanner, headerTitle } from '../styles/header'
 
-export default (props) => (
-  <>
-    <a href="https://fauna.com" target="_blank" rel="noopener noreferrer">
-      <img
-        className={headerBanner.className}
-        src="/static/fauna-logo-blue.png"
-        height="35px"
-        width="auto"
-      />
-    </a>
-    <h1 className={headerTitle.className}>Guestbook</h1>
-    {headerBanner.styles}
-    {headerTitle.styles}
-  </>
-)
+export default function Header(props) {
+  return (
+    <>
+      <a href="https://fauna.com" target="_blank" rel="noopener noreferrer">
+        <img
+          className={headerBanner.className}
+          src="/static/fauna-logo-blue.png"
+          height="35px"
+          width="auto"
+        />
+      </a>
+      <h1 className={headerTitle.className}>Guestbook</h1>
+      {headerBanner.styles}
+      {headerTitle.styles}
+    </>
+  )
+}
diff --git a/examples/with-graphql-faunadb/components/Hero.js b/examples/with-graphql-faunadb/components/Hero.js
index 14361209a2..5980301dcc 100644
--- a/examples/with-graphql-faunadb/components/Hero.js
+++ b/examples/with-graphql-faunadb/components/Hero.js
@@ -18,7 +18,7 @@ function getEntries(data) {
   return data ? data.entries.data.reverse() : []
 }
 
-export default (props) => {
+export default function Hero(props) {
   const { data, errorMessage } = useGuestbookEntries()
   const [entries, setEntries] = useState([])
   const [twitterHandle, setTwitterHandle] = useState('')
diff --git a/examples/with-graphql-hooks/components/app.js b/examples/with-graphql-hooks/components/app.js
index ec15c11f56..97c5647a6f 100644
--- a/examples/with-graphql-hooks/components/app.js
+++ b/examples/with-graphql-hooks/components/app.js
@@ -1,42 +1,44 @@
-export default ({ children }) => (
-  <main>
-    {children}
-    <style jsx global>{`
-      * {
-        font-family: Menlo, Monaco, 'Lucida Console', 'Liberation Mono',
-          'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New',
-          monospace, serif;
-      }
-      body {
-        margin: 0;
-        padding: 25px 50px;
-      }
-      a {
-        color: #22bad9;
-      }
-      p {
-        font-size: 14px;
-        line-height: 24px;
-      }
-      article {
-        margin: 0 auto;
-        max-width: 650px;
-      }
-      button {
-        align-items: center;
-        background-color: #22bad9;
-        border: 0;
-        color: white;
-        display: flex;
-        padding: 5px 7px;
-      }
-      button:active {
-        background-color: #1b9db7;
-        transition: background-color 0.3s;
-      }
-      button:focus {
-        outline: none;
-      }
-    `}</style>
-  </main>
-)
+export default function App({ children }) {
+  return (
+    <main>
+      {children}
+      <style jsx global>{`
+        * {
+          font-family: Menlo, Monaco, 'Lucida Console', 'Liberation Mono',
+            'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New',
+            monospace, serif;
+        }
+        body {
+          margin: 0;
+          padding: 25px 50px;
+        }
+        a {
+          color: #22bad9;
+        }
+        p {
+          font-size: 14px;
+          line-height: 24px;
+        }
+        article {
+          margin: 0 auto;
+          max-width: 650px;
+        }
+        button {
+          align-items: center;
+          background-color: #22bad9;
+          border: 0;
+          color: white;
+          display: flex;
+          padding: 5px 7px;
+        }
+        button:active {
+          background-color: #1b9db7;
+          transition: background-color 0.3s;
+        }
+        button:focus {
+          outline: none;
+        }
+      `}</style>
+    </main>
+  )
+}
diff --git a/examples/with-graphql-hooks/components/error-message.js b/examples/with-graphql-hooks/components/error-message.js
index 8497a5d2df..d8cc91e950 100644
--- a/examples/with-graphql-hooks/components/error-message.js
+++ b/examples/with-graphql-hooks/components/error-message.js
@@ -1,13 +1,15 @@
-export default ({ message }) => (
-  <aside>
-    {message}
-    <style jsx>{`
-      aside {
-        padding: 1.5em;
-        font-size: 14px;
-        color: white;
-        background-color: red;
-      }
-    `}</style>
-  </aside>
-)
+export default function ErrorMessage({ message }) {
+  return (
+    <aside>
+      {message}
+      <style jsx>{`
+        aside {
+          padding: 1.5em;
+          font-size: 14px;
+          color: white;
+          background-color: red;
+        }
+      `}</style>
+    </aside>
+  )
+}
diff --git a/examples/with-graphql-hooks/lib/with-graphql-client.js b/examples/with-graphql-hooks/lib/with-graphql-client.js
index a65130b69e..12fb58f62d 100644
--- a/examples/with-graphql-hooks/lib/with-graphql-client.js
+++ b/examples/with-graphql-hooks/lib/with-graphql-client.js
@@ -3,7 +3,7 @@ import initGraphQL from './init-graphql'
 import Head from 'next/head'
 import { getInitialState } from 'graphql-hooks-ssr'
 
-export default (App) => {
+export default function withGraphqlClient(App) {
   return class GraphQLHooks extends React.Component {
     static displayName = 'GraphQLHooks(App)'
     static async getInitialProps(ctx) {
diff --git a/examples/with-graphql-hooks/pages/about.js b/examples/with-graphql-hooks/pages/about.js
index ab624e1c73..057b1b60a2 100644
--- a/examples/with-graphql-hooks/pages/about.js
+++ b/examples/with-graphql-hooks/pages/about.js
@@ -1,30 +1,32 @@
 import App from '../components/app'
 import Header from '../components/header'
 
-export default () => (
-  <App>
-    <Header />
-    <article>
-      <h1>The Idea Behind This Example</h1>
-      <p>
-        <a href="https://github.com/nearform/graphql-hooks">GraphQL Hooks</a> is
-        a library from NearForm that intends to be a minimal hooks-first GraphQL
-        client. Providing it in a way familiar to Apollo users.
-      </p>
+export default function About() {
+  return (
+    <App>
+      <Header />
+      <article>
+        <h1>The Idea Behind This Example</h1>
+        <p>
+          <a href="https://github.com/nearform/graphql-hooks">GraphQL Hooks</a>{' '}
+          is a library from NearForm that intends to be a minimal hooks-first
+          GraphQL client. Providing it in a way familiar to Apollo users.
+        </p>
 
-      <p>
-        This started life as a copy of the `with-apollo` example. We then
-        stripped out Apollo and replaced it with `graphql-hooks`. This was
-        mostly as an exercise in ensuring basic functionality could be achieved
-        in a similar way to Apollo.
-      </p>
+        <p>
+          This started life as a copy of the `with-apollo` example. We then
+          stripped out Apollo and replaced it with `graphql-hooks`. This was
+          mostly as an exercise in ensuring basic functionality could be
+          achieved in a similar way to Apollo.
+        </p>
 
-      <p>
-        You'll see this shares the same{' '}
-        <a href="https://www.graph.cool">graph.cool</a> backend as the Apollo
-        example, this is so you can compare the two side by side. The app itself
-        should also look identical.
-      </p>
-    </article>
-  </App>
-)
+        <p>
+          You'll see this shares the same{' '}
+          <a href="https://www.graph.cool">graph.cool</a> backend as the Apollo
+          example, this is so you can compare the two side by side. The app
+          itself should also look identical.
+        </p>
+      </article>
+    </App>
+  )
+}
diff --git a/examples/with-graphql-hooks/pages/index.js b/examples/with-graphql-hooks/pages/index.js
index 22a7b48c7c..bb92144340 100644
--- a/examples/with-graphql-hooks/pages/index.js
+++ b/examples/with-graphql-hooks/pages/index.js
@@ -2,9 +2,11 @@ import App from '../components/app'
 import Header from '../components/header'
 import PostList from '../components/post-list'
 
-export default () => (
-  <App>
-    <Header />
-    <PostList />
-  </App>
-)
+export default function Home() {
+  return (
+    <App>
+      <Header />
+      <PostList />
+    </App>
+  )
+}
diff --git a/examples/with-graphql-react/pages/index.js b/examples/with-graphql-react/pages/index.js
index 44512b904a..c2149ce333 100644
--- a/examples/with-graphql-react/pages/index.js
+++ b/examples/with-graphql-react/pages/index.js
@@ -1,6 +1,6 @@
 import { useGraphQL } from 'graphql-react'
 
-export default () => {
+export default function Home() {
   const { loading, cacheValue: { data } = {} } = useGraphQL({
     fetchOptionsOverride(options) {
       options.url = 'https://graphql-pokemon.now.sh'
diff --git a/examples/with-grommet/pages/index.js b/examples/with-grommet/pages/index.js
index f294b560a8..a9517299c1 100644
--- a/examples/with-grommet/pages/index.js
+++ b/examples/with-grommet/pages/index.js
@@ -1,12 +1,14 @@
 import React from 'react'
 import { Anchor, Box, Heading, Paragraph } from 'grommet'
 
-export default () => (
-  <Box align="center" margin="large">
-    <Heading>Grommet is awesome!</Heading>
-    <Paragraph>
-      Find out more at{' '}
-      <Anchor href="https://v2.grommet.io/">https://v2.grommet.io/</Anchor>
-    </Paragraph>
-  </Box>
-)
+export default function Home() {
+  return (
+    <Box align="center" margin="large">
+      <Heading>Grommet is awesome!</Heading>
+      <Paragraph>
+        Find out more at{' '}
+        <Anchor href="https://v2.grommet.io/">https://v2.grommet.io/</Anchor>
+      </Paragraph>
+    </Box>
+  )
+}
diff --git a/examples/with-http2/pages/about.js b/examples/with-http2/pages/about.js
index efd3acfed6..24de1bc81e 100644
--- a/examples/with-http2/pages/about.js
+++ b/examples/with-http2/pages/about.js
@@ -1,9 +1,11 @@
 import Link from 'next/link'
-export default () => (
-  <div>
-    <h3>This is the /about page. </h3>
-    <Link href="/">
-      <a> &larr; Back home</a>
-    </Link>
-  </div>
-)
+export default function About() {
+  return (
+    <div>
+      <h3>This is the /about page. </h3>
+      <Link href="/">
+        <a> &larr; Back home</a>
+      </Link>
+    </div>
+  )
+}
diff --git a/examples/with-http2/pages/index.js b/examples/with-http2/pages/index.js
index 9bebbef959..68d1f09a24 100644
--- a/examples/with-http2/pages/index.js
+++ b/examples/with-http2/pages/index.js
@@ -1,9 +1,11 @@
 import Link from 'next/link'
-export default () => (
-  <div>
-    <h3>Hello World.</h3>
-    <Link href="/about">
-      <a>About</a>
-    </Link>
-  </div>
-)
+export default function Home() {
+  return (
+    <div>
+      <h3>Hello World.</h3>
+      <Link href="/about">
+        <a>About</a>
+      </Link>
+    </div>
+  )
+}
diff --git a/examples/with-iron-session/lib/fetchJson.js b/examples/with-iron-session/lib/fetchJson.js
index b2a429b5fd..a3594c0b7c 100644
--- a/examples/with-iron-session/lib/fetchJson.js
+++ b/examples/with-iron-session/lib/fetchJson.js
@@ -1,6 +1,6 @@
 import fetch from 'node-fetch'
 
-export default async function (...args) {
+export default async function fetcher(...args) {
   try {
     const response = await fetch(...args)
 
diff --git a/examples/with-linaria/pages/index.js b/examples/with-linaria/pages/index.js
index 0ae63ee346..f64e98dcbc 100644
--- a/examples/with-linaria/pages/index.js
+++ b/examples/with-linaria/pages/index.js
@@ -21,7 +21,7 @@ const Box = styled.div`
   }
 `
 
-export default () => {
+export default function Home() {
   return (
     <React.Fragment>
       <Head>
diff --git a/examples/with-lingui/components/LangSwitcher.js b/examples/with-lingui/components/LangSwitcher.js
index 8f9f48fec0..36cc6e288f 100644
--- a/examples/with-lingui/components/LangSwitcher.js
+++ b/examples/with-lingui/components/LangSwitcher.js
@@ -8,7 +8,7 @@ const availableLanguageNames = {
 }
 const availableLanguages = Object.keys(availableLanguageNames)
 
-export default () => {
+export default function LangSwitcher() {
   function onSubmit(evt) {
     evt.preventDefault()
     Router.push({
diff --git a/examples/with-lingui/components/withLang.js b/examples/with-lingui/components/withLang.js
index deba288b2e..a878d35e07 100644
--- a/examples/with-lingui/components/withLang.js
+++ b/examples/with-lingui/components/withLang.js
@@ -1,8 +1,8 @@
 import React from 'react'
 import { I18nProvider } from '@lingui/react'
 
-export default (Component, defaultLang = 'en') =>
-  class WithLang extends React.Component {
+export default function withLang(Component, defaultLang = 'en') {
+  return class WithLang extends React.Component {
     static async getInitialProps(ctx) {
       const language = ctx.query.lang || defaultLang
       const [props, catalog] = await Promise.all([
@@ -29,3 +29,4 @@ export default (Component, defaultLang = 'en') =>
       )
     }
   }
+}
diff --git a/examples/with-mdx/components/button.js b/examples/with-mdx/components/button.js
index da6b1dfbf8..d520af578b 100644
--- a/examples/with-mdx/components/button.js
+++ b/examples/with-mdx/components/button.js
@@ -1,14 +1,16 @@
-export default ({ children }) => (
-  <button
-    style={{
-      borderRadius: '3px',
-      border: '1px solid black',
-      color: 'black',
-      padding: '0.5em 1em',
-      cursor: 'pointer',
-      fontSize: '1.1em',
-    }}
-  >
-    {children}
-  </button>
-)
+export default function Button({ children }) {
+  return (
+    <button
+      style={{
+        borderRadius: '3px',
+        border: '1px solid black',
+        color: 'black',
+        padding: '0.5em 1em',
+        cursor: 'pointer',
+        fontSize: '1.1em',
+      }}
+    >
+      {children}
+    </button>
+  )
+}
diff --git a/examples/with-mobx-state-tree-typescript/pages/index.tsx b/examples/with-mobx-state-tree-typescript/pages/index.tsx
index 923af31f2e..00b3a426d7 100644
--- a/examples/with-mobx-state-tree-typescript/pages/index.tsx
+++ b/examples/with-mobx-state-tree-typescript/pages/index.tsx
@@ -1,5 +1,5 @@
 import SampleComponent from '../components/SampleComponent'
 
-export default () => {
+export default function Home() {
   return <SampleComponent title="Index Page" linkTo="/other" />
 }
diff --git a/examples/with-mobx-state-tree-typescript/pages/other.tsx b/examples/with-mobx-state-tree-typescript/pages/other.tsx
index b131e2f904..64baaaeedd 100644
--- a/examples/with-mobx-state-tree-typescript/pages/other.tsx
+++ b/examples/with-mobx-state-tree-typescript/pages/other.tsx
@@ -1,5 +1,5 @@
 import SampleComponent from '../components/SampleComponent'
 
-export default () => {
+export default function Other() {
   return <SampleComponent title={'Other Page'} linkTo="/" />
 }
diff --git a/examples/with-mobx-state-tree-typescript/pages/ssg.tsx b/examples/with-mobx-state-tree-typescript/pages/ssg.tsx
index d1a62193f9..4191006042 100644
--- a/examples/with-mobx-state-tree-typescript/pages/ssg.tsx
+++ b/examples/with-mobx-state-tree-typescript/pages/ssg.tsx
@@ -2,7 +2,7 @@ import { getSnapshot } from 'mobx-state-tree'
 import SampleComponent from '../components/SampleComponent'
 import { initializeStore } from '../store'
 
-export default () => {
+export default function Ssg() {
   return <SampleComponent title={'SSG Page'} linkTo="/" />
 }
 
diff --git a/examples/with-mobx-state-tree-typescript/pages/ssr.tsx b/examples/with-mobx-state-tree-typescript/pages/ssr.tsx
index 275e171c8b..8bdb3f3e50 100644
--- a/examples/with-mobx-state-tree-typescript/pages/ssr.tsx
+++ b/examples/with-mobx-state-tree-typescript/pages/ssr.tsx
@@ -2,7 +2,7 @@ import { getSnapshot } from 'mobx-state-tree'
 import SampleComponent from '../components/SampleComponent'
 import { initializeStore } from '../store'
 
-export default () => {
+export default function Ssr() {
   return <SampleComponent title={'SSR Page'} linkTo="/" />
 }
 
diff --git a/examples/with-mobx-state-tree/components/Clock.js b/examples/with-mobx-state-tree/components/Clock.js
index 20da008b3c..cfbddeae67 100644
--- a/examples/with-mobx-state-tree/components/Clock.js
+++ b/examples/with-mobx-state-tree/components/Clock.js
@@ -1,4 +1,4 @@
-export default (props) => {
+export default function Clock(props) {
   return (
     <div className={props.light ? 'light' : ''}>
       {format(new Date(props.lastUpdate))}
diff --git a/examples/with-mobx-state-tree/pages/index.js b/examples/with-mobx-state-tree/pages/index.js
index 923af31f2e..00b3a426d7 100644
--- a/examples/with-mobx-state-tree/pages/index.js
+++ b/examples/with-mobx-state-tree/pages/index.js
@@ -1,5 +1,5 @@
 import SampleComponent from '../components/SampleComponent'
 
-export default () => {
+export default function Home() {
   return <SampleComponent title="Index Page" linkTo="/other" />
 }
diff --git a/examples/with-mobx-state-tree/pages/other.js b/examples/with-mobx-state-tree/pages/other.js
index b131e2f904..64baaaeedd 100644
--- a/examples/with-mobx-state-tree/pages/other.js
+++ b/examples/with-mobx-state-tree/pages/other.js
@@ -1,5 +1,5 @@
 import SampleComponent from '../components/SampleComponent'
 
-export default () => {
+export default function Other() {
   return <SampleComponent title={'Other Page'} linkTo="/" />
 }
diff --git a/examples/with-mobx-state-tree/pages/ssg.js b/examples/with-mobx-state-tree/pages/ssg.js
index d1a62193f9..4191006042 100644
--- a/examples/with-mobx-state-tree/pages/ssg.js
+++ b/examples/with-mobx-state-tree/pages/ssg.js
@@ -2,7 +2,7 @@ import { getSnapshot } from 'mobx-state-tree'
 import SampleComponent from '../components/SampleComponent'
 import { initializeStore } from '../store'
 
-export default () => {
+export default function Ssg() {
   return <SampleComponent title={'SSG Page'} linkTo="/" />
 }
 
diff --git a/examples/with-mobx-state-tree/pages/ssr.js b/examples/with-mobx-state-tree/pages/ssr.js
index 275e171c8b..8bdb3f3e50 100644
--- a/examples/with-mobx-state-tree/pages/ssr.js
+++ b/examples/with-mobx-state-tree/pages/ssr.js
@@ -2,7 +2,7 @@ import { getSnapshot } from 'mobx-state-tree'
 import SampleComponent from '../components/SampleComponent'
 import { initializeStore } from '../store'
 
-export default () => {
+export default function Ssr() {
   return <SampleComponent title={'SSR Page'} linkTo="/" />
 }
 
diff --git a/examples/with-mocha/pages/index.js b/examples/with-mocha/pages/index.js
index 2c38a6d265..e930bb9afe 100644
--- a/examples/with-mocha/pages/index.js
+++ b/examples/with-mocha/pages/index.js
@@ -1,10 +1,12 @@
-export default () => (
-  <div>
-    <style jsx>{`
-      p {
-        color: red;
-      }
-    `}</style>
-    <p>Hello World!</p>
-  </div>
-)
+export default function Home() {
+  return (
+    <div>
+      <style jsx>{`
+        p {
+          color: red;
+        }
+      `}</style>
+      <p>Hello World!</p>
+    </div>
+  )
+}
diff --git a/examples/with-next-css/component/hello-world.js b/examples/with-next-css/component/hello-world.js
index bff5163912..a1841e96c5 100644
--- a/examples/with-next-css/component/hello-world.js
+++ b/examples/with-next-css/component/hello-world.js
@@ -1,7 +1,9 @@
 import css from './hello-world.module.css'
 
-export default () => (
-  <div className={css.hello}>
-    Hello World, I am being styled using CSS Modules!
-  </div>
-)
+export default function HelloWorld() {
+  return (
+    <div className={css.hello}>
+      Hello World, I am being styled using CSS Modules!
+    </div>
+  )
+}
diff --git a/examples/with-next-css/pages/index.js b/examples/with-next-css/pages/index.js
index 6d95978da3..788b6517ce 100644
--- a/examples/with-next-css/pages/index.js
+++ b/examples/with-next-css/pages/index.js
@@ -1,7 +1,9 @@
 import HelloWorld from '../component/hello-world'
 
-export default () => (
-  <div className="example">
-    <HelloWorld />
-  </div>
-)
+export default function Home() {
+  return (
+    <div className="example">
+      <HelloWorld />
+    </div>
+  )
+}
diff --git a/examples/with-next-less/pages/index.js b/examples/with-next-less/pages/index.js
index 7e99813411..2ba34bca22 100644
--- a/examples/with-next-less/pages/index.js
+++ b/examples/with-next-less/pages/index.js
@@ -1,9 +1,13 @@
 // Without CSS Modules
 import '../style.less'
-export default () => <div className="example">Hello Less!</div>
+export default function Home() {
+  return <div className="example">Hello Less!</div>
+}
 
 // With CSS Modules
 /*
 import style from '../style.less'
-export default () => <div className={style.example}>Hello Less!</div>
+export default function Home() {
+  return <div className={style.example}>Hello Less!</div>
+}
 */
diff --git a/examples/with-next-offline/pages/index.js b/examples/with-next-offline/pages/index.js
index ae585c50c7..f1462bba22 100644
--- a/examples/with-next-offline/pages/index.js
+++ b/examples/with-next-offline/pages/index.js
@@ -1,3 +1,3 @@
-export default () => (
-  <div>Next-Offline Example, try to install app via chrome</div>
-)
+export default function Home() {
+  return <div>Next-Offline Example, try to install app via chrome</div>
+}
diff --git a/examples/with-next-sass/components/hello-world.js b/examples/with-next-sass/components/hello-world.js
index 2a47866218..49b60bdda4 100644
--- a/examples/with-next-sass/components/hello-world.js
+++ b/examples/with-next-sass/components/hello-world.js
@@ -1,7 +1,9 @@
 import styles from './hello-world.module.scss'
 
-export default () => (
-  <div className={styles.hello}>
-    Hello World, I am being styled using SCSS Modules!
-  </div>
-)
+export default function HelloWorld() {
+  return (
+    <div className={styles.hello}>
+      Hello World, I am being styled using SCSS Modules!
+    </div>
+  )
+}
diff --git a/examples/with-next-sass/pages/index.js b/examples/with-next-sass/pages/index.js
index 55d4550097..5d1adb28aa 100644
--- a/examples/with-next-sass/pages/index.js
+++ b/examples/with-next-sass/pages/index.js
@@ -1,7 +1,9 @@
 import HelloWorld from '../components/hello-world'
 
-export default () => (
-  <div className="app">
-    <HelloWorld />
-  </div>
-)
+export default function Home() {
+  return (
+    <div className="app">
+      <HelloWorld />
+    </div>
+  )
+}
diff --git a/examples/with-next-seo/pages/index.js b/examples/with-next-seo/pages/index.js
index e45a06b255..51e6f08166 100644
--- a/examples/with-next-seo/pages/index.js
+++ b/examples/with-next-seo/pages/index.js
@@ -1,44 +1,46 @@
 import { NextSeo } from 'next-seo'
 import Link from 'next/link'
 
-export default () => (
-  <div>
-    <NextSeo
-      config={{
-        title: 'Page Meta Title',
-        description: 'This will be the page meta description',
-        canonical: 'https://www.canonicalurl.ie/',
-        openGraph: {
-          url: 'https://www.canonicalurl.ie/',
-          title: 'Open Graph Title',
-          description: 'Open Graph Description',
-          images: [
-            {
-              url: 'https://www.example.ie/og-image-01.jpg',
-              width: 800,
-              height: 600,
-              alt: 'Og Image Alt',
-            },
-            {
-              url: 'https://www.example.ie/og-image-02.jpg',
-              width: 900,
-              height: 800,
-              alt: 'Og Image Alt Second',
-            },
-            { url: 'https://www.example.ie/og-image-03.jpg' },
-            { url: 'https://www.example.ie/og-image-04.jpg' },
-          ],
-        },
-      }}
-    />
-    <h1>SEO Added to Page</h1>
-    <p>Take a look at the head to see what has been added.</p>
-    <p>
-      Or checkout how{' '}
-      <Link href="/jsonld">
-        <a>JSON-LD</a>
-      </Link>{' '}
-      (Structured Data) is added
-    </p>
-  </div>
-)
+export default function Home() {
+  return (
+    <div>
+      <NextSeo
+        config={{
+          title: 'Page Meta Title',
+          description: 'This will be the page meta description',
+          canonical: 'https://www.canonicalurl.ie/',
+          openGraph: {
+            url: 'https://www.canonicalurl.ie/',
+            title: 'Open Graph Title',
+            description: 'Open Graph Description',
+            images: [
+              {
+                url: 'https://www.example.ie/og-image-01.jpg',
+                width: 800,
+                height: 600,
+                alt: 'Og Image Alt',
+              },
+              {
+                url: 'https://www.example.ie/og-image-02.jpg',
+                width: 900,
+                height: 800,
+                alt: 'Og Image Alt Second',
+              },
+              { url: 'https://www.example.ie/og-image-03.jpg' },
+              { url: 'https://www.example.ie/og-image-04.jpg' },
+            ],
+          },
+        }}
+      />
+      <h1>SEO Added to Page</h1>
+      <p>Take a look at the head to see what has been added.</p>
+      <p>
+        Or checkout how{' '}
+        <Link href="/jsonld">
+          <a>JSON-LD</a>
+        </Link>{' '}
+        (Structured Data) is added
+      </p>
+    </div>
+  )
+}
diff --git a/examples/with-next-seo/pages/jsonld.js b/examples/with-next-seo/pages/jsonld.js
index 3800a14e74..7279dc2959 100644
--- a/examples/with-next-seo/pages/jsonld.js
+++ b/examples/with-next-seo/pages/jsonld.js
@@ -2,27 +2,29 @@ import { ArticleJsonLd } from 'next-seo'
 
 // See all available JSON-LD here:
 // https://github.com/garmeeh/next-seo#json-ld
-export default () => (
-  <div>
-    <ArticleJsonLd
-      url="https://example.com/article"
-      title="Article headline"
-      images={[
-        'https://example.com/photos/1x1/photo.jpg',
-        'https://example.com/photos/4x3/photo.jpg',
-        'https://example.com/photos/16x9/photo.jpg',
-      ]}
-      datePublished="2015-02-05T08:00:00+08:00"
-      dateModified="2015-02-05T09:00:00+08:00"
-      authorName="Jane Blogs"
-      publisherName="Mary Blogs"
-      publisherLogo="https://www.example.com/photos/logo.jpg"
-      description="This is a mighty good description of this article."
-    />
-    <h1>JSON-LD Added to Page</h1>
-    <p>
-      Take a look at the head to see what has been added, you are looking for a
-      script tag of type "application/ld+json".
-    </p>
-  </div>
-)
+export default function JsonLd() {
+  return (
+    <div>
+      <ArticleJsonLd
+        url="https://example.com/article"
+        title="Article headline"
+        images={[
+          'https://example.com/photos/1x1/photo.jpg',
+          'https://example.com/photos/4x3/photo.jpg',
+          'https://example.com/photos/16x9/photo.jpg',
+        ]}
+        datePublished="2015-02-05T08:00:00+08:00"
+        dateModified="2015-02-05T09:00:00+08:00"
+        authorName="Jane Blogs"
+        publisherName="Mary Blogs"
+        publisherLogo="https://www.example.com/photos/logo.jpg"
+        description="This is a mighty good description of this article."
+      />
+      <h1>JSON-LD Added to Page</h1>
+      <p>
+        Take a look at the head to see what has been added, you are looking for
+        a script tag of type "application/ld+json".
+      </p>
+    </div>
+  )
+}
diff --git a/examples/with-now-env/pages/index.js b/examples/with-now-env/pages/index.js
index 267e364371..269b1e924d 100644
--- a/examples/with-now-env/pages/index.js
+++ b/examples/with-now-env/pages/index.js
@@ -1,21 +1,24 @@
-export default () => (
-  <div className="hello">
-    <p>
-      Hello World! Here's a secret shared with the client using Next env:{' '}
-      <strong>{process.env.SECRET}</strong>, the secret is shared at build time,
-      which means every reference to the secret is replaced with its value
-    </p>
-    <style jsx>{`
-      .hello {
-        font: 15px Helvetica, Arial, sans-serif;
-        background: #eee;
-        padding: 100px;
-        text-align: center;
-        transition: 100ms ease-in background;
-      }
-      .hello:hover {
-        background: #ccc;
-      }
-    `}</style>
-  </div>
-)
+export default function Home() {
+  return (
+    <div className="hello">
+      <p>
+        Hello World! Here's a secret shared with the client using Next env:{' '}
+        <strong>{process.env.SECRET}</strong>, the secret is shared at build
+        time, which means every reference to the secret is replaced with its
+        value
+      </p>
+      <style jsx>{`
+        .hello {
+          font: 15px Helvetica, Arial, sans-serif;
+          background: #eee;
+          padding: 100px;
+          text-align: center;
+          transition: 100ms ease-in background;
+        }
+        .hello:hover {
+          background: #ccc;
+        }
+      `}</style>
+    </div>
+  )
+}
diff --git a/examples/with-orbit-components/pages/index.js b/examples/with-orbit-components/pages/index.js
index 4214d37663..fb983e512d 100644
--- a/examples/with-orbit-components/pages/index.js
+++ b/examples/with-orbit-components/pages/index.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Alert, Illustration } from '@kiwicom/orbit-components'
 
-export default () => {
+export default function Home() {
   return (
     <React.Fragment>
       <Alert type="success" spaceAfter="large">
diff --git a/examples/with-patternfly/pages/index.js b/examples/with-patternfly/pages/index.js
index 374ff2e0d7..95c10f4330 100644
--- a/examples/with-patternfly/pages/index.js
+++ b/examples/with-patternfly/pages/index.js
@@ -9,7 +9,7 @@ const steps = [
   { name: 'Review', component: <p>Review Step</p>, nextButtonText: 'Finish' },
 ]
 
-export default () => {
+export default function Home() {
   const [isOpen, setIsOpen] = useState(false)
   return (
     <>
diff --git a/examples/with-polyfills/pages/index.js b/examples/with-polyfills/pages/index.js
index 835481d065..122596a3f5 100644
--- a/examples/with-polyfills/pages/index.js
+++ b/examples/with-polyfills/pages/index.js
@@ -1,3 +1,5 @@
 console.log('Inside the /index.js page')
 
-export default () => <div>Hello World</div>
+export default function Home() {
+  return <div>Hello World</div>
+}
diff --git a/examples/with-portals-ssr/pages/_document.js b/examples/with-portals-ssr/pages/_document.js
index 473b10eecb..67b99ebbba 100644
--- a/examples/with-portals-ssr/pages/_document.js
+++ b/examples/with-portals-ssr/pages/_document.js
@@ -1,7 +1,7 @@
 import Document from 'next/document'
 import { ServerPortal } from '@jesstelford/react-portal-universal/server'
 
-export default class extends Document {
+export default class MyDocument extends Document {
   static async getInitialProps(ctx) {
     const portals = new ServerPortal()
     const originalRenderPage = ctx.renderPage
diff --git a/examples/with-portals/pages/_document.js b/examples/with-portals/pages/_document.js
index 55969c23ef..b6b762a55c 100644
--- a/examples/with-portals/pages/_document.js
+++ b/examples/with-portals/pages/_document.js
@@ -1,6 +1,6 @@
 import Document, { Head, Main, NextScript } from 'next/document'
 
-export default class extends Document {
+export default class MyDocument extends Document {
   render() {
     return (
       <html>
diff --git a/examples/with-prefetching/pages/about.js b/examples/with-prefetching/pages/about.js
index 5112d2563e..b5d98c3757 100644
--- a/examples/with-prefetching/pages/about.js
+++ b/examples/with-prefetching/pages/about.js
@@ -1 +1,3 @@
-export default () => <h1>This is the ABOUT page.</h1>
+export default function About() {
+  return <h1>This is the ABOUT page.</h1>
+}
diff --git a/examples/with-prefetching/pages/contact.js b/examples/with-prefetching/pages/contact.js
index 0bc89f9b3f..7a36738284 100644
--- a/examples/with-prefetching/pages/contact.js
+++ b/examples/with-prefetching/pages/contact.js
@@ -1 +1,3 @@
-export default () => <h1>This is the CONTACT page.</h1>
+export default function Contact() {
+  return <h1>This is the CONTACT page.</h1>
+}
diff --git a/examples/with-prefetching/pages/features.js b/examples/with-prefetching/pages/features.js
index 1782964a1f..71f9132120 100644
--- a/examples/with-prefetching/pages/features.js
+++ b/examples/with-prefetching/pages/features.js
@@ -1 +1,3 @@
-export default () => <h1>This is the FEATURES page.</h1>
+export default function Features() {
+  return <h1>This is the FEATURES page.</h1>
+}
diff --git a/examples/with-prefetching/pages/index.js b/examples/with-prefetching/pages/index.js
index a97e0482d7..8727cfe538 100644
--- a/examples/with-prefetching/pages/index.js
+++ b/examples/with-prefetching/pages/index.js
@@ -1 +1,3 @@
-export default () => <h1>This is the HOME page</h1>
+export default function Home() {
+  return <h1>This is the HOME page</h1>
+}
diff --git a/examples/with-quill-js/pages/index.js b/examples/with-quill-js/pages/index.js
index 6e700b9f86..f13eea718e 100644
--- a/examples/with-quill-js/pages/index.js
+++ b/examples/with-quill-js/pages/index.js
@@ -46,6 +46,6 @@ const formats = [
   'video',
 ]
 
-export default () => (
-  <QuillNoSSRWrapper modules={modules} formats={formats} theme="snow" />
-)
+export default function Home() {
+  return <QuillNoSSRWrapper modules={modules} formats={formats} theme="snow" />
+}
diff --git a/examples/with-react-ga/pages/about.js b/examples/with-react-ga/pages/about.js
index 5fd65c2baf..46817af02a 100644
--- a/examples/with-react-ga/pages/about.js
+++ b/examples/with-react-ga/pages/about.js
@@ -1 +1,3 @@
-export default () => <div>About us</div>
+export default function About() {
+  return <div>About us</div>
+}
diff --git a/examples/with-react-ga/pages/index.js b/examples/with-react-ga/pages/index.js
index deee5a8860..90d95353b5 100644
--- a/examples/with-react-ga/pages/index.js
+++ b/examples/with-react-ga/pages/index.js
@@ -1,10 +1,12 @@
 import Link from 'next/link'
 
-export default () => (
-  <div>
-    Hello World.{' '}
-    <Link href="/about">
-      <a>About</a>
-    </Link>
-  </div>
-)
+export default function Home() {
+  return (
+    <div>
+      Hello World.{' '}
+      <Link href="/about">
+        <a>About</a>
+      </Link>
+    </div>
+  )
+}
diff --git a/examples/with-react-helmet/pages/_document.js b/examples/with-react-helmet/pages/_document.js
index 74be6e6b9d..c9f6ffd7a1 100644
--- a/examples/with-react-helmet/pages/_document.js
+++ b/examples/with-react-helmet/pages/_document.js
@@ -1,7 +1,7 @@
 import Document, { Head, Main, NextScript } from 'next/document'
 import { Helmet } from 'react-helmet'
 
-export default class extends Document {
+export default class MyDocument extends Document {
   static async getInitialProps(...args) {
     const documentProps = await super.getInitialProps(...args)
     // see https://github.com/nfl/react-helmet#server-usage for more information
diff --git a/examples/with-react-helmet/pages/index.js b/examples/with-react-helmet/pages/index.js
index 57043ce167..5759e4c43b 100644
--- a/examples/with-react-helmet/pages/index.js
+++ b/examples/with-react-helmet/pages/index.js
@@ -1 +1,3 @@
-export default () => <div>Hello World!</div>
+export default function Home() {
+  return <div>Hello World!</div>
+}
diff --git a/examples/with-react-intl/components/Layout.js b/examples/with-react-intl/components/Layout.js
index a5177117c0..79f6933240 100644
--- a/examples/with-react-intl/components/Layout.js
+++ b/examples/with-react-intl/components/Layout.js
@@ -9,7 +9,7 @@ const messages = defineMessages({
   },
 })
 
-export default ({ title, children }) => {
+export default function Layout({ title, children }) {
   const intl = useIntl()
 
   return (
diff --git a/examples/with-react-intl/components/Nav.js b/examples/with-react-intl/components/Nav.js
index 76b67aaff4..4268db6a55 100644
--- a/examples/with-react-intl/components/Nav.js
+++ b/examples/with-react-intl/components/Nav.js
@@ -1,31 +1,33 @@
 import { FormattedMessage } from 'react-intl'
 import Link from 'next/link'
 
-export default () => (
-  <nav>
-    <li>
-      <Link href="/">
-        <a>
-          <FormattedMessage id="nav.home" defaultMessage="Home" />
-        </a>
-      </Link>
-    </li>
-    <li>
-      <Link href="/about">
-        <a>
-          <FormattedMessage id="nav.about" defaultMessage="About" />
-        </a>
-      </Link>
-    </li>
+export default function Nav() {
+  return (
+    <nav>
+      <li>
+        <Link href="/">
+          <a>
+            <FormattedMessage id="nav.home" defaultMessage="Home" />
+          </a>
+        </Link>
+      </li>
+      <li>
+        <Link href="/about">
+          <a>
+            <FormattedMessage id="nav.about" defaultMessage="About" />
+          </a>
+        </Link>
+      </li>
 
-    <style jsx>{`
-      nav {
-        display: flex;
-      }
-      li {
-        list-style: none;
-        margin-right: 1rem;
-      }
-    `}</style>
-  </nav>
-)
+      <style jsx>{`
+        nav {
+          display: flex;
+        }
+        li {
+          list-style: none;
+          margin-right: 1rem;
+        }
+      `}</style>
+    </nav>
+  )
+}
diff --git a/examples/with-react-intl/pages/about.js b/examples/with-react-intl/pages/about.js
index 6031cd3147..bb03f91c8b 100644
--- a/examples/with-react-intl/pages/about.js
+++ b/examples/with-react-intl/pages/about.js
@@ -2,7 +2,7 @@ import { FormattedRelativeTime } from 'react-intl'
 import { selectUnit } from '@formatjs/intl-utils'
 import Layout from '../components/Layout'
 
-export default () => {
+export default function About() {
   const { value, unit } = selectUnit(Date.now())
   return (
     <Layout>
diff --git a/examples/with-react-intl/pages/index.js b/examples/with-react-intl/pages/index.js
index 9b28d456be..05bd3425d4 100644
--- a/examples/with-react-intl/pages/index.js
+++ b/examples/with-react-intl/pages/index.js
@@ -14,7 +14,7 @@ const { description } = defineMessages({
   },
 })
 
-export default () => {
+export default function Home() {
   const intl = useIntl()
 
   return (
diff --git a/examples/with-react-md/pages/index.js b/examples/with-react-md/pages/index.js
index 9702d7c1c0..6d22d1c3bb 100644
--- a/examples/with-react-md/pages/index.js
+++ b/examples/with-react-md/pages/index.js
@@ -58,7 +58,7 @@ class NavigationLink extends PureComponent {
   }
 }
 
-export default () => {
+export default function Home() {
   const closeButton = (
     <Button
       icon
diff --git a/examples/with-react-native-web/pages/alternate.js b/examples/with-react-native-web/pages/alternate.js
index 76e3bb55ff..85d86a1add 100644
--- a/examples/with-react-native-web/pages/alternate.js
+++ b/examples/with-react-native-web/pages/alternate.js
@@ -1,17 +1,19 @@
 import * as React from 'react'
 import { StyleSheet, Text, View } from 'react-native'
 
-export default () => (
-  <View style={styles.container}>
-    <Text accessibilityRole="header" style={styles.text}>
-      Alternate Page
-    </Text>
+export default function Alternate() {
+  return (
+    <View style={styles.container}>
+      <Text accessibilityRole="header" style={styles.text}>
+        Alternate Page
+      </Text>
 
-    <Text style={styles.link} accessibilityRole="link" href={`/`}>
-      Go Back
-    </Text>
-  </View>
-)
+      <Text style={styles.link} accessibilityRole="link" href={`/`}>
+        Go Back
+      </Text>
+    </View>
+  )
+}
 
 const styles = StyleSheet.create({
   container: {
diff --git a/examples/with-react-toolbox/pages/index.js b/examples/with-react-toolbox/pages/index.js
index 0a995cc94c..26c1e8ff81 100644
--- a/examples/with-react-toolbox/pages/index.js
+++ b/examples/with-react-toolbox/pages/index.js
@@ -4,15 +4,17 @@ import Head from 'next/head'
 
 import Button from 'react-toolbox/lib/button/Button'
 
-export default () => (
-  <div>
-    <Head>
-      <link href="/theme.css" rel="stylesheet" />
-    </Head>
-    <ThemeProvider theme={theme}>
-      <Button raised primary>
-        Hello
-      </Button>
-    </ThemeProvider>
-  </div>
-)
+export default function Home() {
+  return (
+    <div>
+      <Head>
+        <link href="/theme.css" rel="stylesheet" />
+      </Head>
+      <ThemeProvider theme={theme}>
+        <Button raised primary>
+          Hello
+        </Button>
+      </ThemeProvider>
+    </div>
+  )
+}
diff --git a/examples/with-redux-persist/components/clock.js b/examples/with-redux-persist/components/clock.js
index 03506fb5ab..b843ab0722 100644
--- a/examples/with-redux-persist/components/clock.js
+++ b/examples/with-redux-persist/components/clock.js
@@ -1,4 +1,4 @@
-export default ({ lastUpdate, light }) => {
+export default function Clock({ lastUpdate, light }) {
   return (
     <div className={light ? 'light' : ''}>
       {format(new Date(lastUpdate))}
diff --git a/examples/with-redux-persist/lib/with-redux-store.js b/examples/with-redux-persist/lib/with-redux-store.js
index ed3a15492b..2059a6b7f9 100644
--- a/examples/with-redux-persist/lib/with-redux-store.js
+++ b/examples/with-redux-persist/lib/with-redux-store.js
@@ -17,7 +17,7 @@ function getOrCreateStore(initialState) {
   return window[__NEXT_REDUX_STORE__]
 }
 
-export default (App) => {
+export default function withReduxStore(App) {
   return class AppWithRedux extends Component {
     static async getInitialProps(appContext) {
       // Get or Create the store with `undefined` as initialState
diff --git a/examples/with-redux-thunk/lib/with-redux-store.js b/examples/with-redux-thunk/lib/with-redux-store.js
index ebac5214a1..91132be1e0 100644
--- a/examples/with-redux-thunk/lib/with-redux-store.js
+++ b/examples/with-redux-thunk/lib/with-redux-store.js
@@ -16,7 +16,7 @@ function getOrCreateStore(initialState) {
   return window[__NEXT_REDUX_STORE__]
 }
 
-export default (App) => {
+export default function withReduxStore(App) {
   return class AppWithRedux extends Component {
     static async getInitialProps(appContext) {
       // Get or Create the store with `undefined` as initialState
diff --git a/examples/with-redux-thunk/store.js b/examples/with-redux-thunk/store.js
index 93f19957be..c248fc1a08 100644
--- a/examples/with-redux-thunk/store.js
+++ b/examples/with-redux-thunk/store.js
@@ -4,7 +4,7 @@ import thunkMiddleware from 'redux-thunk'
 import reducers from './reducers'
 
 // CREATING INITIAL STORE
-export default (initialState) => {
+export default function getStore(initialState) {
   const store = createStore(
     reducers,
     initialState,
diff --git a/examples/with-redux-wrapper/components/Clock.js b/examples/with-redux-wrapper/components/Clock.js
index 3b3169ff64..6b13e9ebb4 100644
--- a/examples/with-redux-wrapper/components/Clock.js
+++ b/examples/with-redux-wrapper/components/Clock.js
@@ -1,4 +1,4 @@
-export default ({ lastUpdate, light }) => {
+export default function Clock({ lastUpdate, light }) {
   return (
     <div className={light ? 'light' : ''}>
       {format(new Date(lastUpdate))}
diff --git a/examples/with-redux-wrapper/store/count/reducer.js b/examples/with-redux-wrapper/store/count/reducer.js
index 35a461d2ba..af48ba42a8 100644
--- a/examples/with-redux-wrapper/store/count/reducer.js
+++ b/examples/with-redux-wrapper/store/count/reducer.js
@@ -4,7 +4,7 @@ const countInitialState = {
   count: 0,
 }
 
-export default (state = countInitialState, action) => {
+export default function reducer(state = countInitialState, action) {
   switch (action.type) {
     case countActionTypes.ADD:
       return Object.assign({}, state, {
diff --git a/examples/with-redux-wrapper/store/tick/reducer.js b/examples/with-redux-wrapper/store/tick/reducer.js
index 58548f1ba1..30c9ca078a 100644
--- a/examples/with-redux-wrapper/store/tick/reducer.js
+++ b/examples/with-redux-wrapper/store/tick/reducer.js
@@ -5,7 +5,7 @@ const tickInitialState = {
   light: false,
 }
 
-export default (state = tickInitialState, action) => {
+export default function reducer(state = tickInitialState, action) {
   switch (action.type) {
     case tickActionTypes.TICK:
       return Object.assign({}, state, {
diff --git a/examples/with-relay-modern/lib/withData.js b/examples/with-relay-modern/lib/withData.js
index 645b0b0e55..9dd27fecda 100644
--- a/examples/with-relay-modern/lib/withData.js
+++ b/examples/with-relay-modern/lib/withData.js
@@ -2,7 +2,7 @@ import React from 'react'
 import initEnvironment from './createRelayEnvironment'
 import { fetchQuery, ReactRelayContext } from 'react-relay'
 
-export default (ComposedComponent, options = {}) => {
+export default function withData(ComposedComponent, options = {}) {
   return class WithData extends React.Component {
     static displayName = `WithData(${ComposedComponent.displayName})`
 
diff --git a/examples/with-rematch/shared/withRematch.js b/examples/with-rematch/shared/withRematch.js
index 06d6de5c0b..bea90e1549 100644
--- a/examples/with-rematch/shared/withRematch.js
+++ b/examples/with-rematch/shared/withRematch.js
@@ -18,7 +18,7 @@ function getOrCreateStore(initialState) {
   return window[__NEXT_REDUX_STORE__]
 }
 
-export default (App) => {
+export default function withRematch(App) {
   return class AppWithRematch extends React.Component {
     static async getInitialProps(appContext) {
       // Get or Create the store with `undefined` as initialState
diff --git a/examples/with-segment-analytics/components/Header.js b/examples/with-segment-analytics/components/Header.js
index 0b96715a08..1401f11420 100644
--- a/examples/with-segment-analytics/components/Header.js
+++ b/examples/with-segment-analytics/components/Header.js
@@ -1,26 +1,28 @@
 import React from 'react'
 import Link from 'next/link'
 
-export default () => (
-  <header>
-    <nav>
-      <ul>
-        <li>
-          <Link href="/">
-            <a>Home</a>
-          </Link>
-        </li>
-        <li>
-          <Link href="/about">
-            <a>About</a>
-          </Link>
-        </li>
-        <li>
-          <Link href="/contact">
-            <a>Contact</a>
-          </Link>
-        </li>
-      </ul>
-    </nav>
-  </header>
-)
+export default function Header() {
+  return (
+    <header>
+      <nav>
+        <ul>
+          <li>
+            <Link href="/">
+              <a>Home</a>
+            </Link>
+          </li>
+          <li>
+            <Link href="/about">
+              <a>About</a>
+            </Link>
+          </li>
+          <li>
+            <Link href="/contact">
+              <a>Contact</a>
+            </Link>
+          </li>
+        </ul>
+      </nav>
+    </header>
+  )
+}
diff --git a/examples/with-segment-analytics/pages/_document.js b/examples/with-segment-analytics/pages/_document.js
index 91a50b4983..f443b13d03 100644
--- a/examples/with-segment-analytics/pages/_document.js
+++ b/examples/with-segment-analytics/pages/_document.js
@@ -8,7 +8,7 @@ const {
   NODE_ENV = 'development',
 } = process.env
 
-export default class extends Document {
+export default class MyDocument extends Document {
   renderSnippet() {
     const opts = {
       apiKey: ANALYTICS_WRITE_KEY,
diff --git a/examples/with-segment-analytics/pages/about.js b/examples/with-segment-analytics/pages/about.js
index f65b0b22bb..dc8345fed0 100644
--- a/examples/with-segment-analytics/pages/about.js
+++ b/examples/with-segment-analytics/pages/about.js
@@ -1,7 +1,9 @@
 import React from 'react'
 
-export default () => (
-  <div>
-    <h1>This is the About page</h1>
-  </div>
-)
+export default function About() {
+  return (
+    <div>
+      <h1>This is the About page</h1>
+    </div>
+  )
+}
diff --git a/examples/with-segment-analytics/pages/contact.js b/examples/with-segment-analytics/pages/contact.js
index f1ec6d4dfe..bae438c763 100644
--- a/examples/with-segment-analytics/pages/contact.js
+++ b/examples/with-segment-analytics/pages/contact.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 
-export default class extends Component {
+export default class Contact extends Component {
   state = { message: '' }
 
   render() {
diff --git a/examples/with-segment-analytics/pages/index.js b/examples/with-segment-analytics/pages/index.js
index ac1925679e..96cb14594f 100644
--- a/examples/with-segment-analytics/pages/index.js
+++ b/examples/with-segment-analytics/pages/index.js
@@ -1,7 +1,9 @@
 import React from 'react'
 
-export default () => (
-  <div>
-    <h1>This is the Home page</h1>
-  </div>
-)
+export default function Home() {
+  return (
+    <div>
+      <h1>This is the Home page</h1>
+    </div>
+  )
+}
diff --git a/examples/with-semantic-ui/pages/index.js b/examples/with-semantic-ui/pages/index.js
index f20813c045..d16b647f11 100644
--- a/examples/with-semantic-ui/pages/index.js
+++ b/examples/with-semantic-ui/pages/index.js
@@ -3,47 +3,49 @@ import { Modal, Button, Icon } from 'semantic-ui-react'
 import SmallImage from './SmallImage.png'
 import LargeImage from './LargeImage.png'
 
-export default () => (
-  <div className="centered">
-    <Icon size="massive" name="world" />
-    <div className="separator" />
-    <Modal trigger={<Button>Show Modal</Button>}>
-      <Modal.Header>
-        <em>publicPath</em> should be set to <em>/_next/static/</em>
-      </Modal.Header>
-      <Modal.Content>
-        <Modal.Description>
-          <div className="wrapper">
-            <div className="row">
-              <p>
-                Larger content should be still available as a fallback to{' '}
-                <em>fileLoader</em> but it should not polute{' '}
-                <em>/.next/static/css</em> folder. You should see two images
-                below. One, smaller, loaded as data url, and one, bigger, loaded
-                via url.
-              </p>
-            </div>
-            <div className="row">
-              <img src={SmallImage} />
-              <p>
-                A small image should be loaded as data url:{' '}
-                <em>{SmallImage.substr(0, 100)}...</em>
-              </p>
-            </div>
+export default function Home() {
+  return (
+    <div className="centered">
+      <Icon size="massive" name="world" />
+      <div className="separator" />
+      <Modal trigger={<Button>Show Modal</Button>}>
+        <Modal.Header>
+          <em>publicPath</em> should be set to <em>/_next/static/</em>
+        </Modal.Header>
+        <Modal.Content>
+          <Modal.Description>
+            <div className="wrapper">
+              <div className="row">
+                <p>
+                  Larger content should be still available as a fallback to{' '}
+                  <em>fileLoader</em> but it should not polute{' '}
+                  <em>/.next/static/css</em> folder. You should see two images
+                  below. One, smaller, loaded as data url, and one, bigger,
+                  loaded via url.
+                </p>
+              </div>
+              <div className="row">
+                <img src={SmallImage} />
+                <p>
+                  A small image should be loaded as data url:{' '}
+                  <em>{SmallImage.substr(0, 100)}...</em>
+                </p>
+              </div>
 
-            <div className="row">
-              <img src={LargeImage} />
-              <p>
-                A large image should be loaded as a url: <em>{LargeImage}</em>
+              <div className="row">
+                <img src={LargeImage} />
+                <p>
+                  A large image should be loaded as a url: <em>{LargeImage}</em>
+                </p>
+              </div>
+              <p className="border">
+                You should also still be able to load regular css. This text
+                should have border.
               </p>
             </div>
-            <p className="border">
-              You should also still be able to load regular css. This text
-              should have border.
-            </p>
-          </div>
-        </Modal.Description>
-      </Modal.Content>
-    </Modal>
-  </div>
-)
+          </Modal.Description>
+        </Modal.Content>
+      </Modal>
+    </div>
+  )
+}
diff --git a/examples/with-shallow-routing/pages/about.js b/examples/with-shallow-routing/pages/about.js
index 5fd65c2baf..46817af02a 100644
--- a/examples/with-shallow-routing/pages/about.js
+++ b/examples/with-shallow-routing/pages/about.js
@@ -1 +1,3 @@
-export default () => <div>About us</div>
+export default function About() {
+  return <div>About us</div>
+}
diff --git a/examples/with-static-export/components/post.js b/examples/with-static-export/components/post.js
index 6062f55b2f..8749f7482a 100644
--- a/examples/with-static-export/components/post.js
+++ b/examples/with-static-export/components/post.js
@@ -1,11 +1,13 @@
 import Link from 'next/link'
 
-export default ({ title, body, id }) => (
-  <article>
-    <h2>{title}</h2>
-    <p>{body}</p>
-    <Link href="/post/[id]" as={`/post/${id}`}>
-      <a>Read more...</a>
-    </Link>
-  </article>
-)
+export default function Post({ title, body, id }) {
+  return (
+    <article>
+      <h2>{title}</h2>
+      <p>{body}</p>
+      <Link href="/post/[id]" as={`/post/${id}`}>
+        <a>Read more...</a>
+      </Link>
+    </article>
+  )
+}
diff --git a/examples/with-static-export/pages/post/[id].js b/examples/with-static-export/pages/post/[id].js
index 23811bca5d..d3f695916d 100644
--- a/examples/with-static-export/pages/post/[id].js
+++ b/examples/with-static-export/pages/post/[id].js
@@ -1,4 +1,3 @@
-import { Component } from 'react'
 import Link from 'next/link'
 import Head from 'next/head'
 
@@ -30,24 +29,20 @@ export async function getStaticProps({ params }) {
   }
 }
 
-export default class extends Component {
-  render() {
-    const { title, body } = this.props
+export default function Post({ title, body }) {
+  return (
+    <main>
+      <Head>
+        <title>{title}</title>
+      </Head>
 
-    return (
-      <main>
-        <Head>
-          <title>{title}</title>
-        </Head>
+      <h1>{title}</h1>
 
-        <h1>{title}</h1>
+      <p>{body}</p>
 
-        <p>{body}</p>
-
-        <Link href="/">
-          <a>Go back to home</a>
-        </Link>
-      </main>
-    )
-  }
+      <Link href="/">
+        <a>Go back to home</a>
+      </Link>
+    </main>
+  )
 }
diff --git a/examples/with-stencil/packages/web-app/pages/index.js b/examples/with-stencil/packages/web-app/pages/index.js
index a0995f1064..b305dc8040 100644
--- a/examples/with-stencil/packages/web-app/pages/index.js
+++ b/examples/with-stencil/packages/web-app/pages/index.js
@@ -1,5 +1,7 @@
-export default () => (
-  <div>
-    <my-component first="Next.js" last="The React Framework"></my-component>
-  </div>
-)
+export default function Home() {
+  return (
+    <div>
+      <my-component first="Next.js" last="The React Framework"></my-component>
+    </div>
+  )
+}
diff --git a/examples/with-storybook/components/index.js b/examples/with-storybook/components/index.js
index dbfaaa5980..c9eaaf748d 100644
--- a/examples/with-storybook/components/index.js
+++ b/examples/with-storybook/components/index.js
@@ -1,2 +1,4 @@
 import React from 'react'
-export default () => <div>Hello World</div>
+export default function Home() {
+  return <div>Hello World</div>
+}
diff --git a/examples/with-storybook/pages/index.js b/examples/with-storybook/pages/index.js
index 8a454e1439..37e7e01d2c 100644
--- a/examples/with-storybook/pages/index.js
+++ b/examples/with-storybook/pages/index.js
@@ -1,7 +1,10 @@
 import HelloWorld from '../components'
-export default () => (
-  <div>
-    <h1>Simple Storybook Example</h1>
-    <HelloWorld />
-  </div>
-)
+
+export default function Home() {
+  return (
+    <div>
+      <h1>Simple Storybook Example</h1>
+      <HelloWorld />
+    </div>
+  )
+}
diff --git a/examples/with-strict-csp-hash/pages/_document.js b/examples/with-strict-csp-hash/pages/_document.js
index 01a7241df3..3baa27dc15 100644
--- a/examples/with-strict-csp-hash/pages/_document.js
+++ b/examples/with-strict-csp-hash/pages/_document.js
@@ -7,7 +7,7 @@ const cspHashOf = (text) => {
   return `'sha256-${hash.digest('base64')}'`
 }
 
-export default class extends Document {
+export default class MyDocument extends Document {
   render() {
     const csp = `default-src 'self'; script-src 'self' ${cspHashOf(
       NextScript.getInlineScriptSource(this.props)
diff --git a/examples/with-strict-csp-hash/pages/index.js b/examples/with-strict-csp-hash/pages/index.js
index 02d90896bf..8f5129010b 100644
--- a/examples/with-strict-csp-hash/pages/index.js
+++ b/examples/with-strict-csp-hash/pages/index.js
@@ -1 +1,3 @@
-export default () => <div>Hello World</div>
+export default function Home() {
+  return <div>Hello World</div>
+}
diff --git a/examples/with-strict-csp/pages/index.js b/examples/with-strict-csp/pages/index.js
index 02d90896bf..8f5129010b 100644
--- a/examples/with-strict-csp/pages/index.js
+++ b/examples/with-strict-csp/pages/index.js
@@ -1 +1,3 @@
-export default () => <div>Hello World</div>
+export default function Home() {
+  return <div>Hello World</div>
+}
diff --git a/examples/with-stripe-typescript/pages/api/checkout_sessions/[id].ts b/examples/with-stripe-typescript/pages/api/checkout_sessions/[id].ts
index 815a1e4db3..c9ccd0a1d7 100644
--- a/examples/with-stripe-typescript/pages/api/checkout_sessions/[id].ts
+++ b/examples/with-stripe-typescript/pages/api/checkout_sessions/[id].ts
@@ -6,7 +6,10 @@ const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
   apiVersion: '2019-12-03',
 })
 
-export default async (req: NextApiRequest, res: NextApiResponse) => {
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
   const id: string = req.query.id as string
   try {
     if (!id.startsWith('cs_')) {
diff --git a/examples/with-stripe-typescript/pages/api/checkout_sessions/index.ts b/examples/with-stripe-typescript/pages/api/checkout_sessions/index.ts
index 3b8706adfb..be765fa21c 100644
--- a/examples/with-stripe-typescript/pages/api/checkout_sessions/index.ts
+++ b/examples/with-stripe-typescript/pages/api/checkout_sessions/index.ts
@@ -9,7 +9,10 @@ const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
   apiVersion: '2019-12-03',
 })
 
-export default async (req: NextApiRequest, res: NextApiResponse) => {
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
   if (req.method === 'POST') {
     const amount: number = req.body.amount
     try {
diff --git a/examples/with-stripe-typescript/pages/api/payment_intents/index.ts b/examples/with-stripe-typescript/pages/api/payment_intents/index.ts
index 5f6228479c..c9def4d8cb 100644
--- a/examples/with-stripe-typescript/pages/api/payment_intents/index.ts
+++ b/examples/with-stripe-typescript/pages/api/payment_intents/index.ts
@@ -9,7 +9,10 @@ const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
   apiVersion: '2019-12-03',
 })
 
-export default async (req: NextApiRequest, res: NextApiResponse) => {
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
   if (req.method === 'POST') {
     const { amount }: { amount: number } = req.body
     try {
diff --git a/examples/with-style-sheet/pages/index.js b/examples/with-style-sheet/pages/index.js
index d99a5e81c7..a0ba655adf 100644
--- a/examples/with-style-sheet/pages/index.js
+++ b/examples/with-style-sheet/pages/index.js
@@ -2,13 +2,15 @@ import React from 'react'
 import { StyleSheet, StyleResolver } from 'style-sheet'
 const cls = StyleResolver.resolve
 
-export default () => (
-  <div className={cls([styles.root, styles.color])}>
-    <div>
-      Hello from <span className={cls(styles.brand)}>Next.js</span>
+export default function Home() {
+  return (
+    <div className={cls([styles.root, styles.color])}>
+      <div>
+        Hello from <span className={cls(styles.brand)}>Next.js</span>
+      </div>
     </div>
-  </div>
-)
+  )
+}
 
 const styles = StyleSheet.create({
   root: {
diff --git a/examples/with-styled-components-rtl/pages/index.js b/examples/with-styled-components-rtl/pages/index.js
index a965d2de1a..8eb849f411 100644
--- a/examples/with-styled-components-rtl/pages/index.js
+++ b/examples/with-styled-components-rtl/pages/index.js
@@ -7,4 +7,6 @@ const Title = styled.h1`
   text-align: left;
 `
 
-export default () => <Title>My page</Title>
+export default function Home() {
+  return <Title>My page</Title>
+}
diff --git a/examples/with-styled-components/pages/index.js b/examples/with-styled-components/pages/index.js
index 3f2d956c9b..8d1e94ba01 100644
--- a/examples/with-styled-components/pages/index.js
+++ b/examples/with-styled-components/pages/index.js
@@ -5,4 +5,6 @@ const Title = styled.h1`
   color: ${({ theme }) => theme.colors.primary};
 `
 
-export default () => <Title>My page</Title>
+export default function Home() {
+  return <Title>My page</Title>
+}
diff --git a/examples/with-styled-jsx-plugins/pages/index.js b/examples/with-styled-jsx-plugins/pages/index.js
index 610c531876..7be174633b 100644
--- a/examples/with-styled-jsx-plugins/pages/index.js
+++ b/examples/with-styled-jsx-plugins/pages/index.js
@@ -1,21 +1,23 @@
-export default () => (
-  <div className="hello">
-    <p>Hello World</p>
-    <style jsx>{`
-      .hello {
-        font: 15px Helvetica, Arial, sans-serif;
-        background: #eee;
-        padding: 100px;
-        text-align: center;
-        transition: 100ms ease-in background;
-        lost-column: 1/3;
-        &:hover {
-          color: red;
+export default function Home() {
+  return (
+    <div className="hello">
+      <p>Hello World</p>
+      <style jsx>{`
+        .hello {
+          font: 15px Helvetica, Arial, sans-serif;
+          background: #eee;
+          padding: 100px;
+          text-align: center;
+          transition: 100ms ease-in background;
+          lost-column: 1/3;
+          &:hover {
+            color: red;
+          }
         }
-      }
-      .hello:hover {
-        background: #ccc;
-      }
-    `}</style>
-  </div>
-)
+        .hello:hover {
+          background: #ccc;
+        }
+      `}</style>
+    </div>
+  )
+}
diff --git a/examples/with-styled-jsx-scss/pages/index.js b/examples/with-styled-jsx-scss/pages/index.js
index d66f65737b..1dbf57bd7c 100644
--- a/examples/with-styled-jsx-scss/pages/index.js
+++ b/examples/with-styled-jsx-scss/pages/index.js
@@ -1,24 +1,26 @@
 const backgroundColor = '#eee'
 
-export default () => (
-  <div className="hello">
-    <p>Hello World</p>
-    <style jsx>{`
-      $color: red;
+export default function Home() {
+  return (
+    <div className="hello">
+      <p>Hello World</p>
+      <style jsx>{`
+        $color: red;
 
-      .hello {
-        background-color: ${backgroundColor};
-        padding: 100px;
-        text-align: center;
-        transition: 100ms ease-in background;
-        &:hover {
-          color: $color;
-        }
+        .hello {
+          background-color: ${backgroundColor};
+          padding: 100px;
+          text-align: center;
+          transition: 100ms ease-in background;
+          &:hover {
+            color: $color;
+          }
 
-        @media only screen and (max-width: 480px) {
-          font-size: 20px;
+          @media only screen and (max-width: 480px) {
+            font-size: 20px;
+          }
         }
-      }
-    `}</style>
-  </div>
-)
+      `}</style>
+    </div>
+  )
+}
diff --git a/examples/with-styletron/pages/index.js b/examples/with-styletron/pages/index.js
index d38e6ca3a7..66912dc6ad 100644
--- a/examples/with-styletron/pages/index.js
+++ b/examples/with-styletron/pages/index.js
@@ -14,7 +14,7 @@ const SubTitle = styled('h2', ({ $size }) => ({
   fontSize: `${$size}px`,
 }))
 
-export default () => {
+export default function Home() {
   // an alternative hook based API
   const [css] = useStyletron()
   return (
diff --git a/examples/with-typescript-graphql/pages/about.tsx b/examples/with-typescript-graphql/pages/about.tsx
index 37a11a9e09..4d21f1676c 100644
--- a/examples/with-typescript-graphql/pages/about.tsx
+++ b/examples/with-typescript-graphql/pages/about.tsx
@@ -1,11 +1,13 @@
 import Link from 'next/link'
 
-export default () => (
-  <div>
-    This is a static page goto{' '}
-    <Link href="/">
-      <a>dynamic</a>
-    </Link>{' '}
-    page.
-  </div>
-)
+export default function About() {
+  return (
+    <div>
+      This is a static page goto{' '}
+      <Link href="/">
+        <a>dynamic</a>
+      </Link>{' '}
+      page.
+    </div>
+  )
+}
diff --git a/examples/with-typescript-styled-components/pages/index.tsx b/examples/with-typescript-styled-components/pages/index.tsx
index 6e85fc770c..9fff369c1e 100644
--- a/examples/with-typescript-styled-components/pages/index.tsx
+++ b/examples/with-typescript-styled-components/pages/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import styled from 'styled-components'
 
 const Title = styled.h1`
@@ -6,4 +5,6 @@ const Title = styled.h1`
   font-size: 50px;
 `
 
-export default () => <Title>My page</Title>
+export default function Home() {
+  return <Title>My page</Title>
+}
diff --git a/examples/with-typescript/pages/api/users/index.ts b/examples/with-typescript/pages/api/users/index.ts
index 28c815c21d..4972fc4b14 100644
--- a/examples/with-typescript/pages/api/users/index.ts
+++ b/examples/with-typescript/pages/api/users/index.ts
@@ -1,7 +1,7 @@
 import { NextApiRequest, NextApiResponse } from 'next'
 import { sampleUserData } from '../../../utils/sample-data'
 
-export default (_: NextApiRequest, res: NextApiResponse) => {
+const handler = (_: NextApiRequest, res: NextApiResponse) => {
   try {
     if (!Array.isArray(sampleUserData)) {
       throw new Error('Cannot find user data')
@@ -12,3 +12,5 @@ export default (_: NextApiRequest, res: NextApiResponse) => {
     res.status(500).json({ statusCode: 500, message: err.message })
   }
 }
+
+export default handler
diff --git a/examples/with-typestyle/pages/index.js b/examples/with-typestyle/pages/index.js
index 39c3e64678..bce12dc3ea 100644
--- a/examples/with-typestyle/pages/index.js
+++ b/examples/with-typestyle/pages/index.js
@@ -4,4 +4,6 @@ import { style } from 'typestyle'
 const className = style({ color: 'red' })
 const RedText = ({ text }) => <div className={className}>{text}</div>
 
-export default () => <RedText text="Hello Next.js!" />
+export default function Home() {
+  return <RedText text="Hello Next.js!" />
+}
diff --git a/examples/with-universal-configuration-build-time/pages/index.js b/examples/with-universal-configuration-build-time/pages/index.js
index 179a2c41e5..a6ebfa51e3 100644
--- a/examples/with-universal-configuration-build-time/pages/index.js
+++ b/examples/with-universal-configuration-build-time/pages/index.js
@@ -1,9 +1,11 @@
-export default () => (
-  <div>
-    <p>Environment variable process.env.TEST is "{process.env.TEST}"</p>
-    <p>
-      Custom environment variables process.env.BACKEND_URL is "
-      {process.env.BACKEND_URL}"
-    </p>
-  </div>
-)
+export default function Home() {
+  return (
+    <div>
+      <p>Environment variable process.env.TEST is "{process.env.TEST}"</p>
+      <p>
+        Custom environment variables process.env.BACKEND_URL is "
+        {process.env.BACKEND_URL}"
+      </p>
+    </div>
+  )
+}
diff --git a/examples/with-universal-configuration-runtime/pages/index.js b/examples/with-universal-configuration-runtime/pages/index.js
index 185733d65c..773118ea7f 100644
--- a/examples/with-universal-configuration-runtime/pages/index.js
+++ b/examples/with-universal-configuration-runtime/pages/index.js
@@ -4,8 +4,6 @@ import getConfig from 'next/config'
 const { publicRuntimeConfig } = getConfig()
 const { API_URL } = publicRuntimeConfig
 
-export default class extends React.Component {
-  render() {
-    return <div>The API_URL is {API_URL}</div>
-  }
+export default function Home() {
+  return <div>The API_URL is {API_URL}</div>
 }
diff --git a/examples/with-webpack-bundle-size-analyzer/pages/contact.js b/examples/with-webpack-bundle-size-analyzer/pages/contact.js
index b0fdbcd7a4..c3dcb2c564 100644
--- a/examples/with-webpack-bundle-size-analyzer/pages/contact.js
+++ b/examples/with-webpack-bundle-size-analyzer/pages/contact.js
@@ -1 +1,3 @@
-export default () => <div>This is the contact page.</div>
+export default function Contact() {
+  return <div>This is the contact page.</div>
+}
diff --git a/examples/with-why-did-you-render/pages/_app.js b/examples/with-why-did-you-render/pages/_app.js
index d6ee4f3139..fd86b8e54d 100644
--- a/examples/with-why-did-you-render/pages/_app.js
+++ b/examples/with-why-did-you-render/pages/_app.js
@@ -5,4 +5,6 @@ if (typeof window !== 'undefined' && process.env.NODE_ENV === 'development') {
   whyDidYouRender(React)
 }
 
-export default ({ Component, pageProps }) => <Component {...pageProps} />
+export default function App({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
diff --git a/examples/with-why-did-you-render/pages/index.js b/examples/with-why-did-you-render/pages/index.js
index b834eeca67..d215ee5b09 100644
--- a/examples/with-why-did-you-render/pages/index.js
+++ b/examples/with-why-did-you-render/pages/index.js
@@ -1,7 +1,9 @@
 import Header from '../components/header.js'
 
-export default () => (
-  <div>
-    <Header />
-  </div>
-)
+export default function Home() {
+  return (
+    <div>
+      <Header />
+    </div>
+  )
+}
diff --git a/examples/with-xstate/components/Counter.js b/examples/with-xstate/components/Counter.js
index 10e6b44029..d34e7a63ff 100644
--- a/examples/with-xstate/components/Counter.js
+++ b/examples/with-xstate/components/Counter.js
@@ -1,10 +1,12 @@
-export default ({ counter = {} }) => (
-  <div>
-    <h1>
-      Count: <span>{counter.count}</span>
-    </h1>
-    <button onClick={() => counter.decrement()}>-1</button>
-    <button onClick={() => counter.increment()}>+1</button>
-    <button onClick={() => counter.reset()}>Reset</button>
-  </div>
-)
+export default function Counter({ counter = {} }) {
+  return (
+    <div>
+      <h1>
+        Count: <span>{counter.count}</span>
+      </h1>
+      <button onClick={() => counter.decrement()}>-1</button>
+      <button onClick={() => counter.increment()}>+1</button>
+      <button onClick={() => counter.reset()}>Reset</button>
+    </div>
+  )
+}
diff --git a/examples/with-yarn-workspaces/packages/web-app/pages/index.js b/examples/with-yarn-workspaces/packages/web-app/pages/index.js
index 6efa4d46fd..7c58ccbcd0 100644
--- a/examples/with-yarn-workspaces/packages/web-app/pages/index.js
+++ b/examples/with-yarn-workspaces/packages/web-app/pages/index.js
@@ -1,10 +1,12 @@
 import foo from 'foo'
 import Bar from 'bar'
 
-export default () => (
-  <div>
-    Imported modules from another workspace:
-    <pre>{foo}</pre>
-    <Bar />
-  </div>
-)
+export default function Home() {
+  return (
+    <div>
+      Imported modules from another workspace:
+      <pre>{foo}</pre>
+      <Bar />
+    </div>
+  )
+}
diff --git a/examples/with-zones/blog/pages/blog/index.js b/examples/with-zones/blog/pages/blog/index.js
index 59faf80058..7c78e80cca 100644
--- a/examples/with-zones/blog/pages/blog/index.js
+++ b/examples/with-zones/blog/pages/blog/index.js
@@ -1,23 +1,28 @@
 import Link from 'next/link'
 
-export default () => (
-  <div>
-    <h3>This is our blog</h3>
-    <ul>
-      <li>
-        <Link href="/blog/post/[id]" as="/blog/post/1">
-          <a>Post 1</a>
-        </Link>
-      </li>
-      <li>
-        <Link href="/blog/post/[id]" as="/blog/post/2">
-          <a>Post 2</a>
-        </Link>
-      </li>
-    </ul>
-    <a href="/">Home</a>
+export default function Blog() {
+  return (
     <div>
-      <img width={200} src={`${process.env.ASSET_PREFIX}/static/nextjs2.png`} />
+      <h3>This is our blog</h3>
+      <ul>
+        <li>
+          <Link href="/blog/post/[id]" as="/blog/post/1">
+            <a>Post 1</a>
+          </Link>
+        </li>
+        <li>
+          <Link href="/blog/post/[id]" as="/blog/post/2">
+            <a>Post 2</a>
+          </Link>
+        </li>
+      </ul>
+      <a href="/">Home</a>
+      <div>
+        <img
+          width={200}
+          src={`${process.env.ASSET_PREFIX}/static/nextjs2.png`}
+        />
+      </div>
     </div>
-  </div>
-)
+  )
+}
diff --git a/examples/with-zones/blog/pages/blog/post/[id].js b/examples/with-zones/blog/pages/blog/post/[id].js
index 770475426b..7caae26649 100644
--- a/examples/with-zones/blog/pages/blog/post/[id].js
+++ b/examples/with-zones/blog/pages/blog/post/[id].js
@@ -1,7 +1,7 @@
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 
-export default () => {
+export default function Post() {
   const router = useRouter()
   return (
     <div>
diff --git a/examples/with-zones/home/components/Header.js b/examples/with-zones/home/components/Header.js
index b631afc81b..1642a42101 100644
--- a/examples/with-zones/home/components/Header.js
+++ b/examples/with-zones/home/components/Header.js
@@ -1,5 +1,7 @@
-export default () => (
+const Header = () => (
   <div>
     <h2>The Company</h2>
   </div>
 )
+
+export default Header
diff --git a/examples/with-zones/home/pages/about.js b/examples/with-zones/home/pages/about.js
index f72360aead..f3e90f9bb1 100644
--- a/examples/with-zones/home/pages/about.js
+++ b/examples/with-zones/home/pages/about.js
@@ -1,6 +1,6 @@
 import Link from 'next/link'
 
-export default () => (
+const About = () => (
   <div>
     <p>This is the about page.</p>
     <div>
@@ -11,3 +11,5 @@ export default () => (
     <img width={200} src="/static/zeit.png" />
   </div>
 )
+
+export default About
diff --git a/examples/with-zones/home/pages/index.js b/examples/with-zones/home/pages/index.js
index 5ae1236375..8a0ea33f12 100644
--- a/examples/with-zones/home/pages/index.js
+++ b/examples/with-zones/home/pages/index.js
@@ -3,18 +3,20 @@ import dynamic from 'next/dynamic'
 
 const Header = dynamic(import('../components/Header'))
 
-export default () => (
-  <div>
-    <Header />
-    <p>This is our homepage</p>
+export default function Home() {
+  return (
     <div>
-      <a href="/blog">Blog</a>
+      <Header />
+      <p>This is our homepage</p>
+      <div>
+        <a href="/blog">Blog</a>
+      </div>
+      <div>
+        <Link href="/about">
+          <a>About us</a>
+        </Link>
+      </div>
+      <img width={200} src="/static/nextjs.png" />
     </div>
-    <div>
-      <Link href="/about">
-        <a>About us</a>
-      </Link>
-    </div>
-    <img width={200} src="/static/nextjs.png" />
-  </div>
-)
+  )
+}
diff --git a/package.json b/package.json
index ec64d26b45..1553ca0480 100644
--- a/package.json
+++ b/package.json
@@ -68,6 +68,7 @@
     "cross-spawn": "6.0.5",
     "escape-string-regexp": "2.0.0",
     "eslint": "6.8.0",
+    "eslint-plugin-import": "2.20.2",
     "eslint-plugin-jest": "23.13.1",
     "eslint-plugin-react": "7.18.0",
     "eslint-plugin-react-hooks": "2.3.0",
diff --git a/yarn.lock b/yarn.lock
index bd9231a4f8..0a33c22b4d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3965,6 +3965,14 @@ array-unique@^0.3.2:
   resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
   integrity sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=
 
+array.prototype.flat@^1.2.1:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.2.3.tgz#0de82b426b0318dbfdb940089e38b043d37f6c7b"
+  integrity sha512-gBlRZV0VSmfPIeWfuuy56XZMvbVfbEUnOXUvt3F/eUUUSyzlgLxhEX4YAEpxNAogRGehPSnfXyPtYyKAhkzQhQ==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
+
 arrify@^1.0.0, arrify@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
@@ -5647,6 +5655,11 @@ constants-browserify@^1.0.0:
   resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
   integrity sha1-wguW2MYXdIqvHBYCF2DNJ/y4y3U=
 
+contains-path@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/contains-path/-/contains-path-0.1.0.tgz#fe8cf184ff6670b6baef01a9d4861a5cbec4120a"
+  integrity sha1-/ozxhP9mcLa67wGp1IYaXL7EEgo=
+
 content-disposition@0.5.3:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.3.tgz#e130caf7e7279087c5616c2007d0485698984fbd"
@@ -6458,7 +6471,7 @@ deasync@^0.1.13:
     bindings "^1.5.0"
     node-addon-api "^1.7.1"
 
-debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.6:
+debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.6, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
   integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
@@ -6725,6 +6738,14 @@ dir-glob@^2.2.2:
   dependencies:
     path-type "^3.0.0"
 
+doctrine@1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-1.5.0.tgz#379dce730f6166f76cefa4e6707a159b02c5a6fa"
+  integrity sha1-N53Ocw9hZvds76TmcHoVmwLFpvo=
+  dependencies:
+    esutils "^2.0.2"
+    isarray "^1.0.0"
+
 doctrine@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d"
@@ -7129,6 +7150,40 @@ escodegen@^1.9.1:
   optionalDependencies:
     source-map "~0.6.1"
 
+eslint-import-resolver-node@^0.3.2:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.3.tgz#dbaa52b6b2816b50bc6711af75422de808e98404"
+  integrity sha512-b8crLDo0M5RSe5YG8Pu2DYBj71tSB6OvXkfzwbJU2w7y8P4/yo0MyF8jU26IEuEuHF2K5/gcAJE3LhQGqBBbVg==
+  dependencies:
+    debug "^2.6.9"
+    resolve "^1.13.1"
+
+eslint-module-utils@^2.4.1:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.6.0.tgz#579ebd094f56af7797d19c9866c9c9486629bfa6"
+  integrity sha512-6j9xxegbqe8/kZY8cYpcp0xhbK0EgJlg3g9mib3/miLaExuuwc3n5UEfSnU6hWMbT0FAYVvDbL9RrRgpUeQIvA==
+  dependencies:
+    debug "^2.6.9"
+    pkg-dir "^2.0.0"
+
+eslint-plugin-import@2.20.2:
+  version "2.20.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.20.2.tgz#91fc3807ce08be4837141272c8b99073906e588d"
+  integrity sha512-FObidqpXrR8OnCh4iNsxy+WACztJLXAHBO5hK79T1Hc77PgQZkyDGA5Ag9xAvRpglvLNxhH/zSmZ70/pZ31dHg==
+  dependencies:
+    array-includes "^3.0.3"
+    array.prototype.flat "^1.2.1"
+    contains-path "^0.1.0"
+    debug "^2.6.9"
+    doctrine "1.5.0"
+    eslint-import-resolver-node "^0.3.2"
+    eslint-module-utils "^2.4.1"
+    has "^1.0.3"
+    minimatch "^3.0.4"
+    object.values "^1.1.0"
+    read-pkg-up "^2.0.0"
+    resolve "^1.12.0"
+
 eslint-plugin-jest@23.13.1:
   version "23.13.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-23.13.1.tgz#b2ce83f76064ad8ba1f1f26f322b86a86e44148e"
@@ -15020,6 +15075,14 @@ read-pkg-up@^1.0.1:
     find-up "^1.0.0"
     read-pkg "^1.0.0"
 
+read-pkg-up@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-2.0.0.tgz#6b72a8048984e0c41e79510fd5e9fa99b3b549be"
+  integrity sha1-a3KoBImE4MQeeVEP1en6mbO1Sb4=
+  dependencies:
+    find-up "^2.0.0"
+    read-pkg "^2.0.0"
+
 read-pkg-up@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-3.0.0.tgz#3ed496685dba0f8fe118d0691dc51f4a1ff96f07"
@@ -15685,7 +15748,7 @@ resolve@^1.10.0, resolve@^1.12.0, resolve@^1.14.2, resolve@^1.3.2, resolve@^1.5.
   dependencies:
     path-parse "^1.0.6"
 
-resolve@^1.17.0:
+resolve@^1.13.1, resolve@^1.17.0:
   version "1.17.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.17.0.tgz#b25941b54968231cc2d1bb76a79cb7f2c0bf8444"
   integrity sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==