Repository files navigation

A production-ready Next.js 15 starter template with TypeScript, featuring a modern development stack with state management, API handling, and comprehensive tooling setup.

• ⚡Next.js 15 with App Router
• 🔷TypeScript for type safety
• 🎨Tailwind CSS v4 for styling
• 🧩shadcn/ui components with Radix UI primitives
• 🔄Redux Toolkit for state management
• 🔍TanStack Query (React Query) for server state management
• 📊TanStack Table for data tables
• 🌐Axios with interceptors for API calls
• ✅Zod for schema validation
• 📦Lucide React for icons
• 🔧ESLint & Prettier for code quality
• 🐕Husky for Git hooks

• Next.js - React framework with App Router
• React - UI library
• TypeScript - Type safety

• Tailwind CSS v4 - Utility-first CSS framework
• shadcn/ui - Reusable UI components

• Redux Toolkit - State management
• React Redux - React bindings for Redux
• TanStack Query - Server state management

• Axios - HTTP client with interceptors
• Zod - Schema validation
• TanStack Table - Data tables

• ESLint - Code linting
• Prettier - Code formatting
• Husky - Git hooks
• lint-staged - Run linters on staged files

next-ts/├── public/                    # Static assets├── src/│   ├── app/                   # Next.js App Router│   │   ├── favicon.ico│   │   ├── globals.css        # Global styles│   │   ├── layout.tsx         # Root layout│   │   └── page.tsx           # Home page│   ├── components/            # Reusable components│   │   └── ui/                # shadcn/ui components│   │       └── button.tsx│   ├── config/                # App configuration│   │   └── index.ts           # Environment variables & constants│   ├── lib/                   # Utilities & configurations│   │   ├── axios.ts           # Axios setup with interceptors│   │   └── utils.ts           # Utility functions│   ├── provider/              # Context providers│   │   ├── app.tsx            # App provider│   │   ├── index.tsx          # Combined providers│   │   ├── query.tsx          # TanStack Query provider│   │   └── store.tsx          # Redux store provider│   ├── schemas/               # Zod validation schemas│   │   └── user.ts            # User schema│   ├── services/              # API service layer│   │   └── user.ts            # User API services│   └── store/                 # Redux store setup│       ├── index.ts           # Store configuration│       └── slice/             # Redux slices│           └── user.ts        # User slice├── .gitignore                 # Git ignore rules├── .husky/                    # Husky Git hooks│   └── pre-commit            # Pre-commit hook├── .prettierignore           # Prettier ignore rules├── .prettierrc               # Prettier configuration├── components.json           # shadcn/ui configuration├── eslint.config.mjs         # ESLint configuration├── next.config.ts            # Next.js configuration├── package.json              # Dependencies & scripts├── postcss.config.mjs        # PostCSS configuration├── tailwind.config.ts        # Tailwind CSS configuration└── tsconfig.json             # TypeScript configuration

• Node.js 22+
• npm, yarn, or pnpm

1. Clone the repository

   git clone https://github.com/dvsxdev/next-ts.gitcd next-ts

2. Install dependencies

   npm install# oryarn install# orpnpm install

3. Set up environment variablesCopy.env.example to.env and update the values:

   NEXT_PUBLIC_APP_NAME=Your App NameNEXT_PUBLIC_API_URL=http://127.0.0.1:8000

4. Run the development server

   npm run dev

5. Open your browserNavigate tohttp://localhost:3000

• Path mapping configured for@/* imports
• Strict mode enabled
• Modern ES2017 target

• Next.js core web vitals rules
• TypeScript support
• TanStack Query plugin for best practices

• Consistent code formatting
• Integrated with lint-staged

• Tailwind CSS v4
• PostCSS integration
• shadcn/ui compatible

• React Server Components support
• Lucide icons
• Gray base color with CSS variables

• Redux Toolkit: Global state management with user slice
• TanStack Query: Server state, caching, and synchronization

• Axios Configuration: Pre-configured with base URL and interceptors
• Authentication: Automatic token attachment and 401 handling
• Cookie Management: Secure token storage

• Zod Schemas: Runtime validation with TypeScript inference
• TypeScript: Comprehensive type coverage

• Husky: Pre-commit hooks for code quality
• lint-staged: Run linters only on changed files
• ESLint + Prettier: Consistent code style

• shadcn/ui: Copy-paste component system
• Radix UI: Accessible, unstyled components
• Tailwind CSS: Utility-first styling

1. Feature Development: Create components insrc/components/
2. State Management: Add slices insrc/store/slice/
3. API Services: Define services insrc/services/
4. Validation: Create schemas insrc/schemas/
5. Styling: Use Tailwind classes and shadcn/ui components

npx shadcn@latest add [component-name]

# Lucide icons are includedimport { IconName } from"lucide-react"``## 📄 LicenseThis project is licensed under the MIT License.