A production-ready Next.js TypeScript starter template with Redux Toolkit, Axios services, and shadcn/ui components.
Created by Muhammad Swalah at HeedLabs.
Looking for a full-stack solution? Check out the PluteoJS Full-Stack Monorepo Template with Next.js, Express API, Drizzle ORM, and Turborepo.
- Framework: Next.js 16 with App Router
- Language: TypeScript 5.9+ (strict mode)
- Styling: Tailwind CSS 4, shadcn/ui
- State Management: Redux Toolkit
- HTTP Client: Axios with interceptors
- Code Quality: ESLint 9, Prettier, Husky
- Git Workflow: Commitlint, standard-version
- Node.js 20.9 or higher
- Yarn 4.7+
# Clone the repository git clone https://github.com/PluteoJS/next-js-typescript-starter.git cd next-js-typescript-starter # Install dependencies yarn install
# Start development server with Turbopack
yarn start:devOpen http://localhost:3000 to view the application.
# Create production build yarn build # Start production server yarn start:production
# Run ESLint and TypeScript checks yarn lint # Check code formatting yarn format
src/
├── app/ # Next.js App Router pages
│ ├── layout.tsx # Root layout
│ ├── page.tsx # Home page
│ └── globals.css # Global styles
├── components/ # React components
│ ├── lib/shadcn/ # shadcn/ui components (DO NOT MODIFY)
│ └── ... # Custom components
├── services/ # API services
│ └── api/
│ ├── PluteoJS/ # Axios instance & interceptors
│ └── index.ts # Service exports
├── store/ # Redux Toolkit
│ ├── index.ts # Store configuration
│ ├── Hooks.ts # Typed hooks
│ └── example/ # Example slice
├── utils/ # Helper utilities
└── customTypes/ # TypeScript type definitions
Pre-configured state management with typed hooks:
import { useAppSelector, useAppDispatch } from "@/store/Hooks"; const user = useAppSelector((state) => state.example.value); const dispatch = useAppDispatch();
API service architecture with request/response interceptors:
import { apiServer } from "@/services/api/PluteoJS"; const response = await apiServer.get("/endpoint");
Install components using the CLI:
npx shadcn-ui@latest add button npx shadcn-ui@latest add dialog
Import from the configured path:
import { Button } from "@/components/lib/shadcn/ui/button";
Note: Do not modify files in
src/components/lib/shadcn/ui/. Create wrapper components instead.
- Husky: Pre-commit hooks for linting and formatting
- Commitlint: Enforces Conventional Commits
- standard-version: Automated versioning and changelog
| Command | Description |
|---|---|
yarn start:dev |
Start development server with Turbopack |
yarn build |
Create production build |
yarn start:production |
Start production server |
yarn lint |
Run ESLint and TypeScript checks |
yarn format |
Check code formatting with Prettier |
yarn check-types |
Run TypeScript type checking |
Copy .env.development for local development:
NEXT_PUBLIC_API_URL=http://localhost:3000/api
Strict mode is enabled with custom naming conventions:
- Interfaces:
iInterfaceName(prefix withi) - Types:
typeNameType(suffix withType)
Uses ESLint 9 flat config with:
- TypeScript support
- React hooks rules
- Import ordering
- Prettier integration
- Next.js Documentation
- Redux Toolkit Documentation
- shadcn/ui Documentation
- Tailwind CSS Documentation
- PluteoJS Full-Stack Template - Complete monorepo with Next.js, Express API, Drizzle ORM, and Turborepo
MIT