Project Structure Overview

This Next.js + Tailwind.css + ShadCN starter template is designed to provide a solid foundation for building scalable and well-organized web applications. Below is a breakdown of the project structure, along with conventions and best practices for organizing your code.

Directory Structure

The project follows a modular approach to keep the codebase organized and maintainable. Each directory serves a specific purpose, making it easier to navigate through the project.

public/ Directory

The public/ directory contains static assets like images, fonts, and icons. These files are accessible directly via URLs and do not undergo processing by Webpack or other bundlers.

src/app/ Directory

The src/app/ directory is the heart of the application, leveraging Next.js's app directory structure. It uses the App Router, enabling modern routing mechanisms with support for nested layouts and error handling.

• (marketing)/ - This group folder organizes pages related to marketing, such as the About page, Changelog, and Documentation. It allows for a unique layout tailored specifically for the marketing section.
• layout.tsx - Defines the shared layout for the group, ensuring consistency across all marketing pages.
• error.tsx & not-found.tsx - Global error and not-found pages that handle application-wide errors and 404s, respectively.

src/components/ Directory

The components/ directory is where all reusable UI components and custom components live. This directory is split into subdirectories for better organization:

• footer/ & navbar/ - Contain the main layout components for the site's footer and navigation bar. These are usually composed of smaller UI components.
• ui/ - Houses generic UI components like buttons, separators, and tooltips. These components are designed to be highly reusable across the application.
• theme/ - Manages theme-related components, including the theme provider and toggler.

src/config/ Directory

Configuration files are stored in the config/ directory. Each file is dedicated to a specific aspect of the application:

• marketing.config.ts - Contains configurations specific to marketing pages.
• site.config.ts - Manages global site settings, such as metadata, site title, and other essential configurations.

src/hooks/ Directory

The hooks/ directory is where custom React hooks are stored. These hooks encapsulate logic that is reused across multiple components, enhancing code modularity and reusability.

src/lib/ Directory

The lib/ directory contains utility functions that provide common functionality across the application. This can include anything from formatting dates to fetching data from an API.

src/styles/ Directory

The styles/ directory holds global CSS files. The globals.css file, for instance, applies base styles and resets to ensure a consistent look and feel across the application.

src/types/ Directory

The types/ directory is dedicated to TypeScript type definitions. This helps in maintaining strong type safety and better autocompletion support throughout the development process.

With this structure, the template ensures that your Next.js project is scalable, maintainable, and easy to navigate. Each directory serves a clear purpose, allowing for a clean separation of concerns and modular development.