How I structure my Next.js projects

Folder structure is one of the most debated topics in the React community. Over the years, I've settled on a structure that works well for both small and large-scale applications.

The app directory

With Next.js App Router, the app directory is where all our routes live. I try to keep this directory strictly for routing and layout logic.

• (auth): Auth-related routes
• (dashboard): Core application logic
• api: Backend endpoints

The components directory

I split components into two categories: ui and features.

• ui: Atomic components like Buttons, Inputs, and Modals.
• features: Complex components that are specific to a domain (e.g., user-profile, project-card).

The lib directory

This is where all the utility functions, constants, and shared logic live. It keeps the components clean and focused on rendering.

Stay tuned for a more detailed breakdown in the next post!