Welcome, traveler, to a well-trodden path for starting your next web adventure. This isn't just a blank slate; it's a carefully prepared basecamp 🏕️, equipped with modern tools and sensible defaults, designed to let you focus on building your unique application, not wrestling with setup.
Think of this boilerplate as a solid foundation built with:
- Discipline: 🧐 Pre-configured linting, formatting, and type-checking.
- Efficiency: ⚡ Modern tooling like Next.js, Bun, and Tailwind CSS.
- Structure: 🏗️ Sensible project layout and community-standard components.
- Guidance: 🧭 A comprehensive set of documentation to keep everyone on the same page.
A boring codebase doesn't make a bored developer, on the contrary, it frees developers up to think about important stuff...
We've packed the essentials so you don't have to:
- Next.js: The battle-tested React framework ⚛️.
- TypeScript: For catching errors before they happen 🔒.
- Tailwind CSS: Utility-first styling that stays out of your way 🎨.
- shadcn/ui: Beautiful, accessible components you can own ✨.
- HugeIcons: Beautiful, customizable icons for your UI 🎭.
- Framer Motion: Powerful animation library for React 🌊.
- ESLint & Prettier: The tireless guardians of code style and quality 🧹.
- Million.js: Linting hints for performance gains 🏎️.
- Bun: The speedy all-in-one toolkit 🐇.
- Docker: Containerization for consistent environments 🐳.
- The Handbook (
.docsfolder): Our collected wisdom on how we build things 📚.
Before you venture forth, familiarize yourself with the local customs and survival guides. These documents ensure we all navigate the codebase effectively and consistently.
- Contributing Guidelines: The rules of the road (commits, branches, PRs) 🤝.
- Ticket System: Deciphering the maps (tasks and requirements) 🎫.
- Priority System: Standardized priority management for tickets and tasks 🎯.
- Coding Standards: Speaking the common tongue (naming, style, TS, JSDoc) 🗣️.
- Architecture Guidelines: Ways to structure your components (Atomic Design inspiration) 🧱.
- State Management: Tackling the app state managment ⚙️.
- Testing Strategies: Building confidence with automated checks ✅.
- Debugging Techniques: Finding your way when lost in the code 🔦.
- Performance Guidelines: Keeping things running smoothly and swiftly 💨.
- Security Guidelines: Warding off the digital goblins (OWASP & best practices) 🛡️.
- AI Assistance: Leveraging your trusty AI companion 🤖.
Ready to pitch your tent?
- Claim the Land: Clone this repository. 🗺️
git clone https://github.com/TomasDmArg/next-js-template cd next-js-template - Gather Supplies: Install dependencies. 🎒
bun i
- Light the Fire: Start the development server. 🔥
bun run dev
- Scout the Area: Open http://localhost:3000 in your browser. 👀
For those who prefer their environments neatly packed:
- Build the Vessel: 🛠️
docker build -t nextjs-template . - Set Sail: ⛵
docker run -p 3000:3000 nextjs-template
New ideas and improvements are always welcome. Before you chart a new course, please consult the Contributing Guidelines.
¿Preferís leer la documentación en español? Tenemos una versión completa en español disponible en la carpeta .docs/es.
- Guía de Contribución: Las reglas del camino (commits, branches, PRs) 🤝.
- Sistema de Tickets: Descifrando los mapas (tareas y requisitos) 🎫.
- Sistema de Prioridades: Gestión estandarizada de prioridades para tickets y tareas 🎯.
- Estándares de Código: Hablando el idioma común (nombrado, estilo, TS, JSDoc) 🗣️.
- Guías de Arquitectura: Formas de estructurar tus componentes (inspiración en Atomic Design) 🧱.
- Gestión de Estado: Dominando la gestión del estado ⚙️.
- Estrategias de Testing: Construyendo confianza con verificaciones automatizadas ✅.
- Técnicas de Depuración: Encontrando el camino cuando te pierdes en el código 🔦.
- Guías de Rendimiento: Manteniendo las cosas funcionando suave y rápidamente 💨.
- Guías de Seguridad: Protegiéndote de los duendes digitales (OWASP y mejores prácticas) 🛡️.
- Asistencia de IA: Aprovechando tu fiel compañero de IA 🤖.