Using your Design System on Next.js

As of this writing, Backlight only releases ES modules package.

Because Next.js doesn't transpile/bundle node_modules in server (SSR) build, you need to tweak Next webpack configuration to transpile the ES modules of the released design system.

next-transpile-modules does this, so you need to set it up in your project, e.g. in next.config.js:

const withTM = require('next-transpile-modules')(['@SCOPE/PACKAGE']);
module.exports = withTM();

Once set up, you can import any part of your package in your next app (e.g. @SCOPE/PACKAGE/PATH_TO_COMPONENT).


For next-transpile-modules to work, your package needs to be resolve-able (as-in node resolve('@SCOPE/PACKAGE')), which means it must include a root index.js file, or its package.json manifest needs to have a valid main/module field.