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;
+ }
+};