Next.js Template

A Next.js template with TypeScript, Tailwind CSS, testing infrastructure, and development tooling pre-configured.

✨ Features

• Next.js 15 - Latest version with App Router
• TypeScript - Type safety and better developer experience
• Tailwind CSS - Utility-first CSS framework
• ESLint + Prettier - Code linting and formatting
• Husky - Pre-commit hooks for code quality
• Jest + React Testing Library - Comprehensive testing setup
• Docker - Containerization ready
• Environment Variables - Dotenv configuration
• VS Code Settings - Standardized editor configuration
• Centralized Font Management - Optimized Geist fonts

🚀 Quick Start

1. Clone and install dependencies:

   git clone <your-repo-url>
   cd next-template
   npm install

2. Set up environment variables:

   cp .env_template .env

3. Start the development server:

   npm run dev

4. Open your browser: Visit http://localhost:3001 to see your application.

📝 Available Scripts

• npm run dev - Start development server (uses custom port from .env)
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint
• npm test - Run Jest tests
• npm run test:watch - Run tests in watch mode
• npm run test:coverage - Run tests with coverage report

🧪 Testing

This template includes a complete testing setup with Jest and React Testing Library:

# Run all tests
npm test

# Watch mode for development
npm run test:watch

# Generate coverage report
npm run test:coverage

Test files should be placed in __tests__ directories or use .test.tsx suffixes.

🎨 Code Quality

Pre-commit Hooks

The project uses Husky to run code quality checks before commits:

• ESLint for code linting
• Prettier for code formatting

ESLint Configuration

• Next.js recommended rules
• TypeScript support
• Prettier integration

🐳 Docker

Build and run with Docker:

# Build the image
docker build -t next-template .

# Run the container
docker run -p 3000:3000 next-template

📁 Project Structure

For detailed information about the project structure and organization guidelines, see PROJECT_STRUCTURE.md.