Barrel Export

[hoary fossil]

Is it okay to use barrel export on the components, or is it recommended to import it directly one by one?

[spice burrow]

Hi @hoary fossil. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

It is okay to use barrel exports for your components, but it may slow down compile times if there are many re-exported modules. Next.js provides a feature called modularizeImports to help optimize imports and reduce compile times. This feature automatically converts your import statements to use direct imports, without the need to write the code manually.

For example, if you have a barrel file like this:

// @acme/ui/index.ts
export { default as Button } from './dist/Button';
export { default as Slider } from './dist/Slider';
export { default as Dropdown } from './dist/Dropdown';

And you import components like this:

import { Button, Slider, Dropdown } from '@acme/ui';

With modularizeImports, Next.js will automatically convert the import statements to direct imports:

// Before (with barrel file)
import { Button, Slider, Dropdown } from '@acme/ui';

// After (with direct imports)
import Button from '@acme/ui/dist/Button';
import Slider from '@acme/ui/dist/Slider';
import Dropdown from '@acme/ui/dist/Dropdown';

You can configure modularizeImports in your next.config.js file. Here's an example:

// next.config.js
module.exports = {
  modularizeImports: {
    '@acme/ui': {
      transform: '@acme/ui/dist/{{member}}',
    },
  },
}

For more information, refer to the Next.js Compiler documentation (https://nextjs.org/docs/advanced-features/compiler) and the modularize-imports example (https://github.com/vercel/next.js/blob/canary/examples/modularize-imports/).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: