fix(react): Add example using Next.js (#109)

This patch adds an example of using `@axe-core/react` and [`Next.js`](https://nextjs.org/) together. The existing `example` was moved to `examples/shadow-dom` in order to make this happen.

The example Next.js app was created by simply doing `npx create-next-app`. The only differences from its default output and our version is Prettier/ESLint tweaks and a custom `pages/_app.js` file which loads axe.

Closes #103

.circleci/config.yml

@@ -16,7 +16,7 @@ commands:
     steps:
       - restore_cache:
           keys:
-            - v1-npm-cache-{{ .Environment.CIRCLE_SHA1 }}
+            - v2-npm-cache-{{ .Environment.CIRCLE_SHA1 }}
 
   verify_axe_core_react:
     description: 'Verify that @axe-core/react has all requires files'
@@ -95,7 +95,7 @@ jobs:
           paths:
             - axe_core_test/node_modules
       - save_cache:
-          key: v1-npm-cache-{{ .Environment.CIRCLE_SHA1 }}
+          key: v2-npm-cache-{{ .Environment.CIRCLE_SHA1 }}
           paths:
             - node_modules
             - packages/cli/node_modules
@@ -104,7 +104,8 @@ jobs:
             - packages/webdriverio/node_modules
             - packages/reporter-earl/node_modules
             - packages/react/node_modules
-            - packages/react/example/node_modules
+            - packages/react/examples/next.js/node_modules
+            - packages/react/examples/shadow-dom/node_modules
             - axe_core_test/node_modules
 
   lint:

.github/axe-linter.yml

@@ -3,7 +3,7 @@ rules:
   html-has-lang: false 
 exclude:
   - packages/react/CHANGELOG.md
-  - packages/react/example/**/*
+  - packages/react/examples/**/*
   - packages/react/cypress/**/*
   - packages/cli/test/**/*
-  - packages/cli/testutils/**/*
+  - packages/cli/testutils/**/*

lerna.json

@@ -1,4 +1,4 @@
 {
-  "packages": ["packages/*", "packages/react/example", "axe_core_test"],
+  "packages": ["packages/*", "packages/react/examples/*", "axe_core_test"],
   "version": "4.0.0"
 }

packages/react/examples/next.js/.gitignore

@@ -0,0 +1,19 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+/dist
+/.next
+
+# misc
+.DS_Store
+.env
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

packages/react/examples/next.js/README.md

@@ -0,0 +1,27 @@
+# Next.js Example using `@axe-core/react`
+
+A simple example of a [Next.js](https://nextjs.org/) application using `@axe-core/react`.
+
+This project was bootstrapped with [Create Next App](https://github.com/segmentio/create-next-app).
+
+## How does it work?
+
+To get Next.js and `@axe-core/react` working together, we simply create a `pages/_app.js` file which conditionally injects axe. We only run axe in development, and only if we're in a browser (not SSR).
+
+The `_app.js` file looks something like:
+
+```js
+import React from 'react';
+
+if (typeof window !== 'undefined' && process.env.NODE_ENV !== 'production') {
+  const ReactDOM = require('react-dom');
+  const axe = require('@axe-core/react');
+  axe(React, ReactDOM, 1000);
+}
+
+function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />;
+}
+
+export default MyApp;
+```

packages/react/examples/next.js/components/head.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import NextHead from 'next/head';
+import { string } from 'prop-types';
+
+const defaultDescription = '';
+const defaultOGURL = '';
+const defaultOGImage = '';
+
+const Head = props => (
+  <NextHead>
+    <meta charSet="UTF-8" />
+    <title>{props.title || ''}</title>
+    <meta
+      name="description"
+      content={props.description || defaultDescription}
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" sizes="192x192" href="/static/touch-icon.png" />
+    <link rel="apple-touch-icon" href="/static/touch-icon.png" />
+    <link rel="mask-icon" href="/static/favicon-mask.svg" color="#49B882" />
+    <link rel="icon" href="/static/favicon.ico" />
+    <meta property="og:url" content={props.url || defaultOGURL} />
+    <meta property="og:title" content={props.title || ''} />
+    <meta
+      property="og:description"
+      content={props.description || defaultDescription}
+    />
+    <meta name="twitter:site" content={props.url || defaultOGURL} />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:image" content={props.ogImage || defaultOGImage} />
+    <meta property="og:image" content={props.ogImage || defaultOGImage} />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+  </NextHead>
+);
+
+Head.propTypes = {
+  title: string,
+  description: string,
+  url: string,
+  ogImage: string
+};
+
+export default Head;

packages/react/examples/next.js/components/nav.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import Link from 'next/link';
+
+const links = [
+  { href: 'https://github.com/segmentio/create-next-app', label: 'Github' }
+].map(link => {
+  link.key = `nav-link-${link.href}-${link.label}`;
+  return link;
+});
+
+const Nav = () => (
+  <nav>
+    <ul>
+      <li>
+        <Link prefetch href="/">
+          <a>Home</a>
+        </Link>
+      </li>
+      <ul>
+        {links.map(({ key, href, label }) => (
+          <li key={key}>
+            <Link href={href}>
+              <a>{label}</a>
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </ul>
+
+    <style jsx>{`
+      :global(body) {
+        margin: 0;
+        font-family: -apple-system, BlinkMacSystemFont, Avenir Next, Avenir,
+          Helvetica, sans-serif;
+      }
+      nav {
+        text-align: center;
+      }
+      ul {
+        display: flex;
+        justify-content: space-between;
+      }
+      nav > ul {
+        padding: 4px 16px;
+      }
+      li {
+        display: flex;
+        padding: 6px 8px;
+      }
+      a {
+        color: #067df7;
+        text-decoration: none;
+        font-size: 13px;
+      }
+    `}</style>
+  </nav>
+);
+
+export default Nav;

packages/react/examples/next.js/next.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  webpack: config => {
+    // Fixes npm packages that depend on `fs` module
+    config.node = {
+      fs: 'empty'
+    };
+
+    return config;
+  }
+};