Next.js Template

Welcome to the Next.js Template project! This template is designed to be the ideal starting point for your modern Next.js applications, streamlining the development process right from the get-go.

🚀 Quick Start

Getting started with this Next.js template is straightforward. Follow these steps to create your new project using this template:

1. Create a new Next.js app using this template:

   Run the following command in your terminal to create a new project with this template:

   npx create-next-app@latest your-project-name --example https://github.com/zerodays/nextjs-template
   

2. Navigate into your new project folder:

   cd your-project-name
   

3. Install dependencies:

   pnpm i
   

4. Run the development server:

   pnpm dev
   

🧐 What's Included?

• Next.js 16 with App Router
• TailwindCSS for styling
  • Exposes styles as global CSS variables and theme object
  • Includes plugins like tailwindcss-animate, tailwindcss/typography, and tailwind-scrollbar
• Biome.js for formatting and linting
  • Replaces ESLint and Prettier
  • Configured for accessibility, correctness, and custom formatting
  • Automatically organizes imports
• Orval for generating API clients from OpenAPI specs
  • Configured to use react-query for API calls
  • Supports mocking and integration with Biome.js
• React Hook Form for forms
• Zod for form validation
• Git Hooks with Husky for:
  • commitlint for conventional commits
  • lint-staged for staged changes
• VS Code Settings for consistent development environment
  • Auto format and fix on save with Biome.js
  • Prioritize non-relative imports
• Internationalization using next-international
  • Server-side: await getScopedI18n('fileName')
  • Client-side: useScopedI18n('fileName')
• Type-safe Environment Variables with t3-oss/env-nextjs
• Sentry for error/event tracking
• Shadcn/UI setup for reusable components
• Utility Hooks for common tasks

📂 Project Structure

Here's an overview of the folder structure provided in this template:

.
├── .github             # GitHub Actions configurations for CI/CD + PR template
├── .husky              # Husky configurations for managing Git hooks
├── .vscode             # VSCode settings to maintain consistency in development environments
├── docs                # Extended documentation and guides
├── public              # Stores static files like images and fonts
├── scripts             # Custom scripts for development tasks like API generation
├── src                 # Source files for the Next.js application
│   ├── api             # API clients generated by Orval
│   ├── app             # Core application files including pages and API routes
│   ├── components      # Reusable UI components
│   ├── i18n            # Internationalization configurations
│   ├── lib             # Utility functions and custom hooks
│   ├── env.ts          # Type-safe environment variable configuration
│   └── middleware.ts   # Custom middleware functions
└── README.md           # The main README file for the project

🔧 Configuration

🔍 Biome.js Configuration

Biome.js replaces ESLint and Prettier, offering formatting, linting, and organizing imports in one tool. Key configurations include:

• Custom rules for accessibility, correctness, and complexity
• Automatic import organization
• Custom formatting styles for JavaScript, TypeScript, and CSS

Configuration file: biome.jsonc

Run the formatter and linter:

pnpm format
pnpm lint

📡 Orval Configuration

Orval generates react-query clients from OpenAPI specs. It is set up to:

• Fetch the OpenAPI spec from a deployed URL
• Split the output into endpoints and schemas
• Enable mocking for local development
• Integrate with Biome.js for consistent formatting

API client generation script: scripts/generate-api.ts

Run the script:

pnpm gen-api

🌍 Environment Variables

Environment variables are managed with t3-oss/env-nextjs for type safety. Update src/env.ts to define and validate variables.

📦 TailwindCSS

TailwindCSS is fully configured with plugins for animations, typography, and custom scrollbars. Customize tailwind.config.ts to extend themes or add plugins.

🌐 Internationalization

Add languages in src/i18n and update i18n.ts to include new translations.

🤝 Contributing

We welcome contributions to this template! Open an issue or submit a pull request to suggest improvements.