If you care about accessibility like we do at Skynox  you need React-Axe for sure. Though the package name is now axe-core, we will use @axe-core/react in this example. So let's get started.

Installing Axe-core to Next App

Run this command to install the package first

yarn add @axe-core/react
npm install --save @axe-core/react

You might also need to install React-dom (not necessarily) using

yarn add react-dom
npm install --save react-dom

After that go to your _app.js file in pages folder and the following code there after your import statements.

if (typeof window !== 'undefined' && process.env.NODE_ENV !== 'production') {
  const ReactDOM = require('react-dom');
  const axe = require('@axe-core/react');
  axe(React, ReactDOM, 1000);
}

and boom you are good to go. Check console in any browser you should see this.

Adding Config for React-axe in Next.js

Well you can add custom configuration for your Project also. We suggest making a util function like this

const config = {
  rules: [
    {
      id: 'skip-link',
      enabled: true
    }
  ]
};

export config

Now in _app.js file add config as 4th agrument

axe(React, ReactDOM, 1000, config);

That's it, if you want to learn about more rules in config option visit this page.

Conclusion

Here is another article from Series Next.js Station 🚋. If you want me write about any other topic or just want to solve any Next.js Specific problem, feel free to reach out to me at @sarthology on twitter. Will see you next time.