Skip to Content
Folder StructureNext.js

Next.js Folder Structure

The TailAdmin Next.js Template is built on a modern stack using Next.js 16 (App Router), React 19, TypeScript, Tailwind CSS v4, next-intl v4, and Base UI. It follows a modular and scalable architecture, leveraging Next.js features like Server Components, Layouts, and Route Groups.

Root Directory

The root directory organizes the source code and configuration.

File / FolderDescription
src/Contains application source code.
public/Contains static files served directly (images/, maplibre/).
package.jsonManages scripts and dependencies.
next.config.tsNext.js configuration with SVGR webpack setup, Turbopack rules, and route redirects.
tsconfig.jsonTypeScript configuration with @/* path alias mapping.
eslint.config.mjsESLint flat configuration for Next.js.
postcss.config.mjsPostCSS configuration loading @tailwindcss/postcss.
.prettierrcPrettier code formatting rules with prettier-plugin-tailwindcss.
README.mdProject overview, prerequisites, and getting started instructions.
AGENTS.mdAuthoritative architecture, patterns, and guidelines for AI coding assistants.

Source Directory (src)

Inside src/, the codebase is organized into route specific groups.

src/
app/# Next.js App Router tree
globals.css# Global Tailwind and custom styles
[locale]/# Localized route tree (Omitted from page path)
(admin-layout)/# Main app layout pages
(full-width-pages)/# Standalone pages
(layouts)/# Alternative layout shells
components/# Reusable UI components & widgets
common/# Shared components used across pages
ui/# Core UI primitives created using Base UI
layout/# Layout shells
app-layout/# Main app layout
layout-one/ … layout-six/# Alternative layout shells
context/# Global React Context providers
hooks/# Custom React hooks
i18n/# Internationalization setup
messages/# Multi-language translation dictionaries
icons/# SVG icon components with barrel export
utils/# Common utility functions
proxy.ts# next-intl middleware

Key Directories Explained

src/app/

The core directory for the Next.js App Router tree:

  • [locale]/: Dynamic route segment powering localized routing without prefixing URLs (localePrefix: "never").
  • (admin-layout)/: Routes wrapped in the main dashboard shell (sidebar and header), grouped into (main), (others), and (support).
  • (full-width-pages)/: Standalone pages rendered without the dashboard shell (authentication, error pages, coming soon).
  • (layouts)/: Standalone alternative layout demonstrations (layout-one through layout-six).

Adding a Page: To add a new page:

  1. Create a page.tsx file under src/app/[locale]/(admin-layout)/(main)/ (or the relevant route group),
  2. Add message files (messages/*.json),
  3. Add navigation entries to src/layout/app-layout/sidebar/data.tsx.

src/components/

The component library is split into layout shells, shared widgets, and atom-level UI primitives:

  • ui/: Flat, headless-style primitive components built on Base UI.
  • common/: Cross-route widgets reused across multiple pages (component-card.tsx, page-breadcrumb.tsx, vector-map.tsx).
  • main/, others/, support/: Domain-specific components and widgets organized by feature.

src/layout/

Application layout shells including the default app-layout (header and sidebar) and six alternative layout configurations (layout-one through layout-six).

src/i18n/ & src/messages/

Built-in internationalization powered by next-intl:

  • Translations: Organized in modular JSON dictionary files under src/messages/{en,ar,de,es}.json supporting ICU interpolation and plural syntax.
  • Supported Locales: English (en), Arabic (ar with automatic Right-to-Left RTL layout switching), German (de), and Spanish (es).
  • Translation Hooks: Access translated strings in components using useTranslations("namespace") on the client, or getTranslations("namespace") on the server.

src/context/ & src/hooks/

  • context/: Clean global state management (ThemeProvider and useTheme).
  • hooks/: Reusable custom hooks (useIsMobile).
Last updated on
ReactVue