next-plugin-modernizr

Use Modernizr browser feature checking with Next.js. This utilizes the webpack-modernizr-loader plugin.

Installation

npm install next-plugin-modernizr

Usage

After installing let's setup the options we'd like to include to configure Modernizr. In your project's root create a .modernizrrc file and format it like so:

module.exports = {
  "options": [
    "addTest",
    "setClasses"
  ],
  "feature-detects": [
    "css/cssgrid"
  ]
}

Create a next.config.js in your project

// next.config.js
const withModernizr = require("next-plugin-modernizr");
module.exports = withModernizr();

Optionally you can add your custom Next.js configuration as parameter

// next.config.js
const withModernizr = require("next-plugin-modernizr");
module.exports = withModernizr({
  webpack(config, options) {
    return config;
  }
});

If you'd like to combine this with other plugins you can do it this way

const withCSS = require('@zeit/next-css');
const withSass = require('@zeit/next-sass');
const withModernizr = require('next-plugin-modernizr');

module.exports = withModernizr(
  withSass(
    withCSS({
      cssModules: true,
      cssLoaderOptions: {},
      webpack(config, options) {
        return config;
      },
    })
  )
);

Custom Modernizr Tests

To add custom tests to your project create a file such as ModernizrTests.js:

import Modernizr from 'modernizr';

// since Modernizr is only used on the client side we must specify process.browser
if (process.browser) {
  Modernizr.addTest('hastouch', 'ontouchstart' in window);
}

Then simply import in your index.js or a shared entry point.

import '../modules/ModernizrTests.js';

From there you are able to import Modernizr in any component or module to use:

// MyCustomComponent.js
import Modernizr from 'modernizr';

if (Modernizr.hastouch) {
  // do stuff
}