Skip to content

Latest commit

 

History

History
133 lines (99 loc) · 5.04 KB

README.md

File metadata and controls

133 lines (99 loc) · 5.04 KB

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 14 with App Router
  • TailwindCSS for styling
  • 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:
  • 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.