2. Suggested Structure

In general, I suggest storing components in the “components” folder. Furthermore, each core feature or page is structured in it's own folder inside components as well too. A trivial example would be a profile page consisting of several pages.

λ Store components for displaying a profile based on page nomenclature

λ printer component components/profile/edit/banner

λ printer component components/profile/edit/bio

λ Use absolute page paths for extra clarity

λ printer component components/profile/[username]/banner

λ printer component components/profile/[username]/bio

While styled-components are available for code generation with Printer. I still suggest writing pure SCSS. Or bringing in a templating system to your project. SCSS is optimal for preloading for both SSG and SSR compared to styled-components.

λ Debug SCSS with the yarn scss command

λ yarn scss

Furthermore, assets such as images, videos and other forms of media should stay in the public/assets folder. I've found that preloading assets (with XHR) and managing loading states on components is far more optimal.

λ /public/assets/image

λ /public/assets/video

λ ...