Next.js TypeScript TailwindCSS Redux
A modern, production-ready Next.js 14 template with TypeScript, TailwindCSS, ShadCN/UI, Redux Toolkit, and automated CI/CD pipeline.
🚀 Quick Start • 📖 Documentation • 🤝 Contributing • 💬 Support
🏗️ Architecture
- Next.js 14 App Router
- TypeScript for type safety
- Modular folder structure
- Feature-based organization
🎨 UI/Styling
- TailwindCSS utility-first
- ShadCN/UI components
- Responsive design
- Dark mode ready
⚡ State Management
- Redux Toolkit setup
- Async thunks configured
- Type-safe hooks
- Persistent state
🛠️ Developer Experience
- ESLint + Prettier
- Husky git hooks
- GitHub Actions CI/CD
- Hot reload
| Category | Technologies |
|---|---|
| Framework | Next.js 14 (App Router) |
| Language | TypeScript |
| Styling | TailwindCSS, ShadCN/UI |
| State Management | Redux Toolkit, RTK Query |
| HTTP Client | Axios |
| Validation | Zod |
| Testing | Jest, React Testing Library |
| Linting | ESLint, Prettier |
| CI/CD | GitHub Actions |
trhgatu-inf-nextjs-frontend-template/
├── 📁 src/
│ ├── 📁 app/ # Next.js App Router
│ │ ├── 📄 layout.tsx # Root layout
│ │ ├── 📄 page.tsx # Home page
│ │ ├── 📄 loading.tsx # Global loading UI
│ │ ├── 📄 not-found.tsx # 404 page
│ │ └── 📁 (auth)/ # Auth route group
│ │ └── 📄 login/page.tsx # Login page
│ ├── 📁 components/
│ │ ├── 📁 shared/ # Reusable components
│ │ │ ├── 📄 Navbar.tsx # Navigation component
│ │ │ └── 📄 Footer.tsx # Footer component
│ │ └── 📁 ui/ # ShadCN UI components
│ ├── 📁 config/ # Configuration files
│ │ └── 📄 site.ts # Site configuration
│ ├── 📁 constants/ # Application constants
│ │ └── 📄 routes.ts # Route definitions
│ ├── 📁 features/ # Feature modules
│ │ └── 📁 auth/ # Authentication feature
│ │ ├── 📄 hooks.ts # Auth hooks
│ │ ├── 📄 services.ts # Auth API services
│ │ └── 📄 schemas.ts # Validation schemas
│ ├── 📁 lib/ # Utility libraries
│ │ ├── 📄 axios.ts # Axios configuration
│ │ └── 📄 utils.ts # Helper functions
│ ├── 📁 store/ # Redux store
│ │ ├── 📄 index.ts # Store configuration
│ │ ├── 📄 provider.tsx # Redux provider
│ │ └── 📁 slices/ # Redux slices
│ └── 📁 types/ # TypeScript definitions
├── 📁 .github/workflows/ # GitHub Actions
│ └── 📄 ci.yml # CI/CD pipeline
├── 📄 next.config.ts # Next.js configuration
├── 📄 tailwind.config.ts # TailwindCSS configuration
├── 📄 tsconfig.json # TypeScript configuration
└── 📄 package.json # Dependencies & scripts
Make sure you have the following installed:
- Node.js 18+
- npm, yarn, or pnpm
-
Clone the repository
git clone https://github.com/trhgatu/trhgatu-inf-nextjs-frontend-template.git cd trhgatu-inf-nextjs-frontend-template -
Install dependencies
npm install # or yarn install # or pnpm install
-
Set up environment variables
cp .env.example .env.local # Edit .env.local with your configuration -
Run the development server
npm run dev # or yarn dev # or pnpm dev
-
Open your browser
Navigate to http://localhost:3000 to see your application.
The template includes a complete authentication system:
- Login Page:
/loginwith form validation - Protected Routes: Automatic redirection for unauthenticated users
- State Management: Redux-powered auth state
- Type Safety: Full TypeScript support
- Validation: Zod schema validation
import { useAuth } from '@/features/auth/hooks'; function ProtectedComponent() { const { user, isAuthenticated, login, logout } = useAuth(); if (!isAuthenticated) { return <div>Please login to continue</div>; } return <div>Welcome, {user?.name}!</div>; }
Built with ShadCN/UI for maximum flexibility:
# Add new components
npx shadcn-ui@latest add button
npx shadcn-ui@latest add card
npx shadcn-ui@latest add formThe components/shared/ directory contains application-specific components:
- Navbar: Responsive navigation with auth integration
- Footer: Site footer with links and branding
- Layout: Page layout wrapper
| Command | Description |
|---|---|
npm run dev |
Start development server |
npm run build |
Build for production |
npm run start |
Start production server |
npm run lint |
Run ESLint |
npm run lint:fix |
Fix ESLint issues |
npm run format |
Format code with Prettier |
npm run type-check |
Run TypeScript compiler |
npm run test |
Run tests |
Automated workflow with GitHub Actions (.github/workflows/ci.yml):
✅ Code Quality Checks ├── ESLint validation ├── Prettier formatting ├── TypeScript compilation └── Unit tests ✅ Build & Deploy ├── Production build ├── Build artifact caching └── Deployment (when configured)
The pipeline runs on:
- Push to
mainbranch - Pull requests to
main - Manual workflow dispatch
- next: ^14.0.0
- react: ^18.0.0
- typescript: ^5.0.0
- tailwindcss: ^3.3.0
- @tailwindcss/forms: ^0.5.0
- class-variance-authority: ^0.7.0
- @reduxjs/toolkit: ^1.9.0
- react-redux: ^8.1.0
- zod: ^3.22.0
- axios: ^1.5.0
- eslint: ^8.50.0
- prettier: ^3.0.0
- husky: ^8.0.0
- Create a new feature directory under
src/features/ - Add Redux slice in
src/store/slices/ - Create API services in the feature directory
- Add routes to
src/constants/routes.ts
- Colors: Edit
tailwind.config.ts - Components: Modify ShadCN components in
components/ui/ - Global Styles: Update
src/app/globals.css
Create .env.local for local development:
NEXT_PUBLIC_API_URL=http://localhost:8000/api NEXT_PUBLIC_APP_NAME=My App DATABASE_URL=your_database_url
npm i -g vercel vercel --prod
docker build -t my-nextjs-app .
docker run -p 3000:3000 my-nextjs-app- Netlify: Connect your GitHub repository
- Railway: One-click deployment
- AWS/GCP: Use provided Dockerfiles
We welcome contributions! Please see our Contributing Guide for details.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- 📧 Email: trananhtu1112003@gmail.com
- 🐛 Issues: GitHub Issues
- 💬 Discussions: GitHub Discussions
- Next.js team for the amazing framework
- Vercel for hosting and deployment platform
- ShadCN for the beautiful UI components
- TailwindCSS for the utility-first CSS framework
Built with ❤️ by Infinity (trhgatu)
"Code is how I reflect my soul."
⭐ Star this repo if you found it helpful!