Next.js TypeScript Starter Template

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

🚀 Features

• ⚡ 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

🛠️ Tech Stack

Core Framework

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

Styling & UI

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

State Management

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

Data & API

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

Development Tools

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

📁 Folder Structure

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

🚦 Getting Started

Prerequisites

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

Installation

1. Clone the repository

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

2. Install dependencies

   npm install
   # or
   yarn install
   # or
   pnpm install

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

   NEXT_PUBLIC_APP_NAME=Your App Name
   NEXT_PUBLIC_API_URL=http://127.0.0.1:8000

4. Run the development server

   npm run dev

5. Open your browser Navigate to http://localhost:3000

📜 Available Scripts

Script	Description
npm run dev	Start development server
npm run build	Build for production
npm run start	Start production server
npm run lint:check	Check for linting errors
npm run lint:fix	Fix linting errors
npm run format:check	Check code formatting
npm run format:fix	Fix code formatting
npm run prepare	Set up Husky Git hooks

⚙️ Configuration

TypeScript

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

ESLint

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

Prettier

• Consistent code formatting
• Integrated with lint-staged

Tailwind CSS

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

shadcn/ui

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

🔧 Key Features Explained

State Management

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

API Layer

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

Type Safety

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

Code Quality

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

UI Components

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

🔄 Development Workflow

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

📦 Adding New Dependencies

UI Components

npx shadcn@latest add [component-name]

Icons

# Lucide icons are included
import { IconName } from "lucide-react"
``

## 📄 License

This project is licensed under the MIT License.