This is a modern, highly scalable Next.js enterprise template bootstrapped with create-next-app, featuring a comprehensive, organized architecture.

This project follows a feature-driven, modular structure to ensure maintainability, scalability, and clean separation of concerns.

nova-next-template/
├── app/                  # Next.js App Router (Pages, Layouts, API Routes)
│   ├── (auth)/           # Authentication layout group
│   ├── api/              # Backend API routes
│   └── dashboard/        # Dashboard layout group
├── assets/               # Static assets (images, fonts, raw media)
├── components/           # Reusable UI components
│   ├── ui/               # Base design system components (Button, Input, Modal, etc.)
│   └── layout/           # Layout components
│   └── shared/           # Shared components
├── constants/            # Application-wide constants & enums (e.g., COLORS.ts)
├── features/             # Feature-based modules (grouping logic, UI, and state per feature)
├── hooks/                # Custom React Hooks (e.g., useAutoCompleteTranslation.ts)
├── lib/                  # 3rd-party library configurations & wrappers
├── providers/            # React Context providers for global state/wrappers
├── public/               # Publicly accessible static files served at the root
├── services/             # API clients, endpoint definitions, and external data fetching
├── store/                # Global state management (e.g., Zustand, Redux)
├── styles/               # Global SCSS architecture
│   ├── _colors.scss      # Color tokens & CSS variable mappings
│   ├── _fonts.scss       # Global font definitions
│   ├── _mixins.scss      # Responsive utilities (e.g., VW-based calculations)
│   └── all.scss          # Central export file for components
├── types/                # Global TypeScript definitions & interfaces
└── utils/                # Helper functions (e.g., CN.ts, debounce.ts)

• app/: Contains the Next.js routing system. It's strictly used for routing, page layouts, and backend API routes. Heavy logic is abstracted away into features or services.
• components/ui/: Houses our strictly visual, stateless components inspired by ShadCN and tailored to our SCSS/Tailwind design system.
• styles/: Centralized SCSS stylesheets that manage our global colors, typography, and responsive mixins (like our vw calculation logic).
• utils/ & hooks/: Shared logic that doesn't belong to a specific feature domain but is used application-wide.

This template comes pre-configured with industry-standard tools:

• Core: Next.js (App Router), React, TypeScript
• Styling: Tailwind CSS v4 & Sass (SCSS Modules & Global Styles)
• State Management & Data Fetching: Redux Toolkit & RTK Query
• Forms: React Hook Form
• Internationalization: react-i18next
• Utilities: clsx, tailwind-merge

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.