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