Using your design system on Next.js 11 and earlier

When possible, we recommend the use of Next.js 12+

Because of its support of ES Modules. See Using your design system on Next.js 12 and later

Installation and usage

See Standard procedure.

Additional configuration

Backlight only releases design systems as ES Modules.

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).

INFO

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.