How I structure my Next JS Projects

Very helpful, thank you Anurag.
I would like to know how to structure the styles files?

Don't use this

- components/index.js

export * from "./Header.jsx";
export * from "./Hero.jsx";
export * from "./Footer";

It will increase size when bundle source. You should use lazy load for components

I would include a screens folder to split up your pages into multiple parts like Hero, CTA, etc.

This allows the page files to delegate while keeping the component library free of components that might only ever be used in one page.

Great! Have you tried implementing atomic design for component folders?

gg's

Great Article Anurag! Will use this method