DEV Community


Discussion on: How I structure my mid-size NextJs projects

clamstew profile image
Clay Stewart

It’s a lot of index.js. Do you ever find that’s inconvenient in the code editor tabs? My team did and no longer use index.js files.

stradivario profile image
Kristiqn Tachev

This is called Barel export and it helps with tree shaking and bundle resolution. In large project it helps to bundle it faster. I do recommend to use barel exports.


josemukorivo profile image
Joseph Mukorivo Author

I also like the convenience of importing components from components instead of components/button that's why I sometimes find myself using these index files

aspiiire profile image

For my projects instead of index.js I call them the name of the folder example header/header.js it is more clean and you'll not get confused

endrureza profile image
Endru Reza

how is it clean ? header/header its like repeatition. is it gonna be

import Header from 'header/header.js'
Enter fullscreen mode Exit fullscreen mode


Thread Thread
aspiiire profile image
Aspiiire • Edited

If you use default export it would be, you don't need to explicitly say import Header, in my prospective it is not needed

import 'header/header.js';
Enter fullscreen mode Exit fullscreen mode

Yes you are repeating the name, you are right, but you solve the problem of having multiple index.js.

As example you have main.js file that is importing all the components:

import 'header/index.js';
import 'footer/index.js';
import 'leftbar/index.js';
import 'somethingelse/index.js';
Enter fullscreen mode Exit fullscreen mode

Now if in my editor I have all this files open I see 4 index.js files, if I call the in this other way:

import 'header/header.js';
import 'footer/footer.js';
import 'leftbar/leftbar.js';
import 'somethingelse/somethingelse.js';
Enter fullscreen mode Exit fullscreen mode

In my tabs I see header, footer, leftbar etc... I have used it and I found myself great with it, but as always it is a matter of preference, there is no you must do this or that, you are free to choose any style you like