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