Next.js - Intelligence Community Design System

Show navigation section

Transpile react package

The@ukic/react package will need to be transpiled for use with Next.js. The steps required will depend on the version of Next.js you are using.

Next.js 13 and later

Set the following in thenext.config.js file.

const nextConfig = {
  //other configuration
  transpilePackages: ["@ukic/react"],
};

module.exports = nextConfig;

Next.js 12 and earlier

Step one

Install thenext-transpile-modules package in the root of your project.

// using npm
npm install next-transpile-modules

// using yarn
yarn add next-transpile-modules

Step two

Set the following in thenext.config.js file.

const nextConfig = {
  //other configuration
};

const withTM = require("next-transpile-modules")(["@ukic/react"]);
module.exports = withTM(nextConfig);

Web components limitations

While our component library is built with web components, which offer numerous benefits, there may be limitations when using them with Next.js or other Server-Side Rendering (SSR) frameworks due to current limitations in web component support.

This may result in slower performance and manual workarounds. We're actively working to provide more information and updates on this topic as it evolves.

Last reviewed 23 December 2024 .