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

Install & 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.