Max's Personal Next.js Template 🚀

A modern, opinionated Next.js template featuring TypeScript, SCSS, and best practices for rapid development.

✨ Features

• Next.js 15 - Latest version with App Router
• TypeScript - Full type safety with strict mode
• SCSS - Modern styling with CSS custom properties
• Radix UI - Unstyled, accessible component primitives
• PNPM - Fast, efficient package management
• ESLint - Code quality and consistency
• Responsive Design - Mobile-first approach
• Dark Mode Support - Automatic theme switching
• Performance Optimized - Built for speed

🛠️ Tech Stack

• Next.js 15 - React framework
• TypeScript - Type safety
• SCSS - Enhanced CSS
• Radix UI - Primitive components
• PNPM - Package manager
• ESLint - Linting

🚀 Quick Start

1. Clone or use this template

   git clone <your-repo-url>
   cd nextjs-typescript-template

2. Install dependencies

   pnpm install

3. Run the development server

   pnpm dev

4. Open your browser

   Navigate to http://localhost:3000

📁 Project Structure

src/
├── app/
│   ├── globals.scss      # Global styles
│   ├── layout.tsx        # Root layout
│   ├── page.tsx          # Homepage
│   └── page.module.scss  # Homepage styles
├── components/           # Reusable components
│   ├── index.ts          # Component exports
│   ├── Button/
└── types/               # TypeScript type definitions

🎨 Styling Architecture

This template uses a modern SCSS architecture with:

• CSS Custom Properties - For consistent theming
• SCSS Modules - Component-scoped styles
• Responsive Design - Mobile-first breakpoints
• Dark Mode - Automatic theme switching
• Design Tokens - Consistent spacing, colors, and typography

🧩 Radix UI Integration

This template integrates Radix UI primitives for building accessible, composable components:

Key Benefits

• Accessibility First - WAI-ARIA compliant out of the box
• Keyboard Navigation - Full keyboard support for all interactions
• Focus Management - Proper focus handling and restoration
• Unstyled Primitives - Complete design control with your styling
• Composable - Use asChild prop for advanced composition patterns

📝 Scripts

• pnpm dev - Start development server
• pnpm build - Build for production
• pnpm start - Start production server
• pnpm lint - Run ESLint
• pnpm lint:fix - Fix ESLint errors

🔧 Customization

Colors & Theming

Edit the SCSS custom properties in src/app/globals.scss:

:root {
  --primary: #2563eb;
  --secondary: #64748b;
  --accent: #f59e0b;
  // ... more variables
}

Typography

The template uses Geist fonts by default. Update in src/app/layout.tsx to change fonts.

Components

Add new components in the src/components/ directory with their corresponding SCSS modules.

📚 Best Practices

• SOLID Principles - All code follows SOLID design principles
• Type Safety - Comprehensive TypeScript coverage
• Accessibility - WCAG compliant with Radix UI primitives
• Performance - Optimized for Core Web Vitals
• Composability - Components built for reusability and extension
• SEO - Proper meta tags and semantic HTML

📄 License

MIT License - see LICENSE file for details.

---

Made with ❤️ by Max