How To Setup Your NextJS Codebase | Routes, Components, Data Access Layer etc

Summary

In this video, Michael shares his project configuration strategies for Next.js, emphasizing a streamlined file structure that enhances organization and efficiency. He advocates against using a centralized components folder, opting instead for route-specific folders to keep codebases manageable. Michael discusses the use of server components for data fetching and server actions for database mutations, highlighting the importance of security checks. He also introduces a utility for simplifying fetch requests, aiming to improve code clarity and reusability. This guide is designed to elevate developers to 'Chad level' status by implementing best practices in Next.js.

Takeaways

• 😀 Michael prefers a simplified project structure without a 'source' folder, using 'app', 'components', 'lib', and 'utils' as main directories.
• 📂 Each route has its own components folder, reducing clutter and improving code organization by keeping route-specific components together.
• 🔒 An underscore prefix is used for private components folders, indicating that they are specific to their respective routes.
• 📁 Route groups help in organizing related routes, keeping the codebase clean and manageable without adding clutter to the main routes.
• 📊 A dedicated 'data' folder in the 'utils' section serves as a data access layer for server-only functions, enhancing security by preventing client access.
• 🛠️ Server actions are stored in an 'actions' folder, where all database mutations are handled, emphasizing the need for security and authorization checks.
• 🔄 Michael incorporates reusable utility functions in the 'functions' folder to streamline repetitive code tasks and avoid redundancy.
• 📏 Type safety is maintained with a 'types' folder, using Zod for type schemas, ensuring reliable data handling throughout the application.
• 📦 General components used across the application are stored in a central 'components' folder, differentiating them from route-specific components.
• 🚀 This structured approach enhances maintainability and scalability as projects grow, making it easier for developers to navigate and debug.

Q & A

What is Michael's primary focus in this video?

Michael focuses on how to configure Next.js projects effectively, emphasizing file structure and organization.

Why does Michael prefer not to use a 'source' folder in his projects?

He believes the 'source' folder is outdated and prefers a more streamlined file organization that enhances clarity.

How does Michael structure the components in his Next.js projects?

He creates a separate components folder for each route, allowing for better organization and easier debugging since components are encapsulated within their respective routes.

What naming convention does Michael use for private component folders?

He uses an underscore prefix for private components folders to indicate that they should not be accessed globally.

What are route groups, and why does Michael use them?

Route groups are used to organize related routes under a single folder, keeping the codebase clean and organized, especially in larger applications.

What is the purpose of the data access layer in Michael's project structure?

The data access layer contains server-only functions that handle data fetching, ensuring that client-side code cannot directly access sensitive data.

How does Michael ensure security when using server actions?

He implements security checks within server actions to authenticate users and protect against unauthorized access when performing mutations.

What strategy does Michael use to reduce code duplication in his projects?

He creates reusable fetcher functions that encapsulate common data-fetching logic, preventing repetitive code across different parts of the application.

How does Michael utilize Zod in his projects?

He uses Zod for defining type schemas, organizing all schema definitions in a dedicated file to maintain type safety and consistency.

What are the advantages of using server components according to Michael?

Server components allow for efficient data fetching directly on the server, reducing the load on client components and improving overall application performance.