Turbo Setup: Next.js 16.0.10 + React Compiler & TailwindCSS Boilerplate

Kickstart your next project with a cutting-edge, production-ready Next.js 16.0.10 boilerplate with React Compiler enabled. Enjoy seamless TypeScript integration, rapid UI development with TailwindCSS v4, and a suite of modern tools for code quality, state management, and internationalization. Build faster, scale easier, and deliver with confidence.

✨ Features

• 🚀 Next.js 16.0.10 – Latest Next.js for modern web apps.
• ⚛️ React Compiler – Automatic optimization enabled natively in Next.js 16.
• 📝 TypeScript – Type-safe coding for reliability.
• 🎨 TailwindCSS v4 – Rapid, beautiful UI development.
• 🌐 i18n Support – Multilanguage support (English & Korean) with next-intl.
• 🔍 ESLint + Prettier – Consistent code style and quality.
• 🪝 Husky Git Hooks – Automated checks before every commit.
• 🏷️ Conventional Commits – Standardized commit messages.
• 🔄 Nuqs – Advanced URL query state management with type safety.
• ⚡ Custom useFetch Hook – Lightweight data fetching with loading and error states.
• 📦 Zustand State Management – Simple and scalable state management.
• 🎯 Path Aliases – Clean and easy imports.
• 🔒 Type-Safe API Calls – Secure and robust API integration.
• 🔐 Enhanced Cookie Management – with client/server separation.
• 🛡️ Middleware-based Authentication – for route protection.
• 📁 Snake-case File Naming – Consistent file organization convention.

🚀 Getting Started

Prerequisites

• Node.js 18+
• Bun

Installation

1. Install command:

npx turbo-setup nextjs-tailwind

2. Install dependencies:

bun install

3. Set up environment variables:

# Copy the example environment file
cp .env.example .env.local

# Edit the environment variables
# NEXT_PUBLIC_ENV=development
# NEXT_PUBLIC_API_URL=https://your-api-url.com

Development

Start the development server:

# Development (with Webpack)
bun run dev

# The application will be available at http://localhost:8000

Building

# Production build
bun run build

📁 Project Structure

messages/ # Translation message files
├── [locale].json
src/
├── app/ # Next.js app directory with route handlers
├── components/ # Reusable UI components
├── configs/ # Configuration files (API, env, HTTP)
├── constants/ # Constants and regex patterns
├── hooks/ # Custom React hooks
├── i18n/ # Internationalization configuration
├── providers/ # React context providers
├── services/ # API and utility services
├── styles/ # Global styles and Tailwind config
├── types/ # TypeScript type definitions
├── utils/ # Utility functions
└── views/ # Page-specific view components

🌐 Internationalization

The project uses next-intl for internationalization. Currently supported languages:

• English (en)
• Korean (ko)

Translation Files

• Message files are stored in /messages/{lang}.json
• Each language has its own JSON file with nested translation keys
• Translation files follow this structure:

{
  "lang": "english",
  "home": {
    "title": "Home",
    "welcome_to_home": "Welcome to the home page",
    // ... other translations
  }
}

Adding a New Language

1. Create a new JSON file in /messages/{lang}.json
2. Add the language code to the locales array in src/i18n/config.ts

export const locales = ['en', 'ko', 'your-new-locale'] as const

Using Translations

import {useTranslations} from 'next-intl'

const Component = () => {
  const t = useTranslations()
  return <div>{t('home.welcome_to_home')}</div>
}

Configuration

The internationalization setup is configured in:

• next.config.ts - Next.js configuration with next-intl plugin
• src/i18n/config.ts - Locale configuration and defaults
• src/i18n/request.ts - Server-side locale detection

🪝 Git Hooks

This project uses Husky for Git hooks:

• Pre-commit: Runs TypeScript compilation, lint-staged, and build
• Commit message: Enforces conventional commit messages

⚙️ Environment Variables

The project supports multiple environments:

• Development (.env.dev)
• Staging (.env.staging)
• Production (.env.prod)

Required environment variables:

NEXT_PUBLIC_ENV=development
NEXT_PUBLIC_USER_API_URL=https://your-api-url.com
NEXT_PUBLIC_API_URL=https://your-api-url.com

React Compiler

The project uses React Compiler for automatic optimization of React components. The compiler is enabled in next.config.ts with reactCompiler: true.

Benefits include automatic memoization, performance optimization, and zero configuration - Next.js 16 handles it natively.