DEV Community

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

View post
Collapse
 
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.

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

Regards!

Collapse
 
josemukorivo profile image
Joseph Mukorivo •

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

Collapse
 
aspiiire profile image
Aspiiire •

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

Collapse
 
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

wow

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