DEV Community

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

View post

Replies for: 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
 
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