DocsFolder StructureNext.js

Next.js File Structure

The TailAdmin Next.js Template is built using the App Router, offering a clear separation between pages, layouts, and other essential resources. This structure leverages Next.js features like Server Components, Layouts, and Route Groups.

Root Directory

The root directory contains configuration files and the main source folder.

File / FolderDescription
src/Source Code: Contains all application code.
public/Public Assets: Static files like images, fonts, and favicon.
next.config.jsNext.js Config: Tailored configuration for the Next.js runtime.
tailwind.config.tsTailwind Config: Styling presets and plugin configuration.
package.jsonProject Manifest: Manages dependencies and scripts.
tsconfig.jsonTypeScript Config: Configuration for TypeScript.

Source Directory (src)

Inside src/, you’ll find the App Router structure and shared resources.

src/
app/# App Router (Pages & Layouts)
(pages)/# Route groups
dashboard/# Dashboard pages
auth/# Authentication pages
api/# API Routes
layout.tsx# Root layout
page.tsx# Home/Landing page
components/# Reusable UI Components
common/# Shared components
ui/# UI elements
context/# React Context Providers
SidebarContext.tsx
hooks/# Custom React Hooks
types/# TypeScript Type Definitions
utils/# Helper Functions

Key Directories Explained

src/app/

The core directory for Next.js 13+ App Router.

  • layout.tsx: Defines the common layout logic (HTML structure, body tags).
  • (pages)/: We use Route Groups (folders in parentheses) to organize routes without affecting the URL path.

src/components/

  • ui/: Modular, accessible UI components.
  • common/: Business-logic components used across multiple pages.

src/context/

Stores global state providers, such as the SidebarContext for managing the sidebar’s open/closed state on mobile.

ReactVue