Using Modernizr with Next.JS

So you need some Modernizr feature detects huh? I was struggling to figure this out specifically for a Next.JS project recently, and the following is how I solved it.

First of all, install Modernizr.

Either with yarn or npm.

npm i modernizr

Next step is install the NextJS plugin from: https://github.com/scottydev/next-plugin-modernizr

Add the plugin to your Next.JS config like so:

const withModernizr = require('next-plugin-modernizr');
module.exports = withModernizr({
reactStrictMode: true,
eslint: {
ignoreDuringBuilds: true,
},
});

Add your Modernizrrc file like so:

module.exports = {
"options": [
"addTest",
"setClasses",
"prefixes",
"domPrefixes"
],
"feature-detects": [
"svg",
]
}

In your _app.js dynamically load Modernizr on the fly:

function MyApp({ Component, pageProps }) {
useEffect(() => {
import('modernizr').then(() => {});
}, []);
export default MyApp;

Boom. That should be all you need.