I'm familiar with the basics of folder structures and the general layout of a web app, but I often find it challenging to determine where to place various folders and subfolders beyond just landing pages. For those who have a solid grasp on this, how did you approach organizing your folder structure? What resources or strategies helped you truly understand it? I'm also curious about how the folder structure in Next.js differs from that in React, as I only have a basic grasp of both.
4 Answers
Traditionally, you might have a structure with folders like /page, /assets (for /images, /js, /css, etc.). That approach still works! Nowadays, you might have a more modern structure under /src or /public, incorporating routers like /api with the main index.php file or controllers for specific features like data downloads. Ultimately, it depends on your website's needs. Just plan out what your site needs before you start. Remember, there’s no wrong way to do it as long as it functions well! I've been doing this since the mid '90s, and while my approach is not the most efficient, I understand it, and that’s what matters.
You might want to check out domain-driven design; it offers a structured way to think about your files and folders that could help you as well.
I like to think about what my coworkers would typically do and then go completely against that!
A great way to think about folder structure is by features rather than file types. Focus on grouping your code by what it does, like authentication, dashboards, or posts, instead of just separating components, hooks, and so on. In Next.js, it’s a bit more structured since your folders actually define routes and layouts, whereas React gives you more freedom to decide how to arrange things yourself. The best way to really learn is to build projects and refactor them over time, not just memorize structures.
I guess there's no shortcut to this, it's exactly as I thought. Learning and refactoring it is part of the journey.
Thanks for the suggestion!