A modern, production-ready Next.js starter template with internationalization (i18n) support, built with the latest technologies and best practices.

• Internationalization: Multi-language support with i18next
• Next.js 15: Latest version with App Router and Turbopack
• TypeScript: Full type safety with strict mode
• Tailwind CSS 4: Modern utility-first CSS framework
• Radix UI: Accessible and customizable UI components
• TanStack Query: Powerful data synchronization

• Prettier: Automatic code formatting with import sorting
• ESLint: Custom rules with Prettier integration
• Husky: Git hooks for pre-commit, commit-msg, and pre-push
• Lint-staged: Automatic formatting on commit
• Commitlint: Conventional commits enforcement
• Bundle Analyzer: Performance analysis (yarn analyze)
• VSCode: Optimized settings and extensions
• TypeScript: Strict mode and advanced configurations

• Dark/Light Mode: Seamless theme switching with next-themes
• Theme System: Comprehensive theme provider and switcher
• Responsive Design: Mobile-first approach
• Accessible Components: WCAG compliant with Radix UI
• Modern Design: Clean and professional interface

• Security Headers: CSP, HSTS, X-Frame-Options, and more
• Content Security Policy: Configured for maximum security
• Type-safe Environment Variables: Zod validation
• Input Validation: Schema-based validation system

• Dynamic Metadata: Optimized meta tags and OpenGraph
• Twitter Cards: Social media optimization
• JSON-LD: Structured data for better search results
• Image Optimization: AVIF/WebP support
• Bundle Optimization: Automatic code splitting and optimization

• i18next: Complete i18n framework
• Language Detection: Automatic browser language detection
• Middleware: Smart routing for language-specific pages
• Type-safe Translations: Full TypeScript support

• Automated Dependencies: Renovate/Dependabot integration
• GitHub Actions: CI/CD pipeline ready
• Vercel Optimized: One-click deployment
• Docker Ready: Containerization support

• Next.js 15 - React framework with App Router
• React 19 - UI library
• TypeScript - Type safety

• i18next - Internationalization framework
• react-i18next - React integration
• i18next-browser-languagedetector - Language detection
• accept-language - Server-side language detection

• Tailwind CSS 4 - Utility-first CSS framework
• Radix UI - Accessible component primitives
• next-themes - Theme management
• Lucide React - Beautiful icons
• Class Variance Authority - Component variants
• clsx - Conditional classes
• tailwind-merge - Merge Tailwind classes

• TanStack Query - Powerful data synchronization

• ESLint - Code linting with custom rules
• Prettier - Code formatting with import sorting
• Husky - Git hooks
• Lint-staged - Pre-commit formatting
• Commitlint - Conventional commits
• @next/bundle-analyzer - Bundle analysis

• Zod - Schema validation
• Security Headers - Comprehensive security configuration

• Node.js 18+
• Yarn (recommended)

# Clone the repository
git clone <repository-url>
cd next-polyglot

# Install dependencies
yarn install

# Start development server
yarn dev

Open http://localhost:3000 with your browser to see the result.

next-polyglot/
├── app/
│   ├── [lng]/                 # Language-specific pages
│   │   ├── layout.tsx         # Layout with theme support
│   │   └── page.tsx           # Home page
│   ├── components/            # Shared components
│   │   ├── ui/                # UI components
│   │   ├── theme-provider.tsx # Theme context
│   │   ├── theme-switcher.tsx # Theme toggle
│   │   └── language-switcher.tsx
│   └── globals.css            # Global styles
├── lib/
│   ├── i18n/                  # i18n configuration
│   ├── react-query/           # React Query setup
│   ├── metadata.ts            # SEO utilities
│   ├── env.ts                 # Environment validation
│   └── utils.ts               # Utility functions
├── public/
│   └── locales/               # Translation files
│       ├── en/
│       └── pt/
├── .husky/                    # Git hooks
├── .vscode/                   # VSCode configuration
├── middleware.ts              # Next.js middleware
├── next.config.ts             # Next.js configuration
├── commitlint.config.js       # Commitlint configuration
├── .prettierrc.json           # Prettier configuration
└── components.json            # shadcn/ui configuration

• English (en)
• Portuguese (pt)

1. Add the language code to lib/i18n/settings.ts:

export const languages = ['en', 'pt', 'es']; // Add 'es' for Spanish

2. Create translation files in public/locales/[lang]/:

public/locales/es/common.json

3. Add translations to the new file:

{
  "welcome": "Bienvenido",
  "edit": "Editar"
  // ... more translations
}

import { useTranslation } from 'react-i18next';

export default function Component() {
  const { t } = useTranslation('en');

  return <h1>{t('welcome')}</h1>;
}

This starter includes a comprehensive theme system with:

• Light/Dark modes with system preference detection
• Theme Provider for consistent theming
• Theme Switcher component with smooth transitions
• Tailwind CSS integration with CSS variables

import { useTheme } from 'next-themes';

export default function Component() {
  const { theme, setTheme } = useTheme();

  return (
    <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
      Toggle theme
    </button>
  );
}

yarn dev              # Start development server with Turbopack
yarn build            # Build for production
yarn start            # Start production server
yarn lint             # Run ESLint
yarn lint:fix         # Fix linting issues automatically
yarn format           # Format code with Prettier
yarn format:check     # Check code formatting
yarn type-check       # TypeScript type checking
yarn analyze          # Analyze bundle size

yarn deps:check       # Check for outdated packages
yarn deps:update      # Update dependencies interactively
yarn deps:audit       # Security audit
yarn deps:fix         # Fix vulnerabilities

This starter includes comprehensive security headers:

• Content Security Policy (CSP)
• HTTP Strict Transport Security (HSTS)
• X-Frame-Options
• X-Content-Type-Options
• Referrer-Policy
• Permissions-Policy

Type-safe environment variables with Zod validation:

// lib/env.ts
import { z } from 'zod';

const envSchema = z.object({
  NODE_ENV: z.enum(['development', 'production', 'test']),
  NEXT_PUBLIC_APP_URL: z.string().url(),
});

export const env = envSchema.parse(process.env);

Dynamic metadata generation with:

• OpenGraph tags
• Twitter Cards
• JSON-LD structured data
• Language alternates
• Canonical URLs

import { generateMetadata } from '@/lib/metadata';

export const metadata = generateMetadata({
  title: 'Your Page Title',
  description: 'Your page description',
  image: '/og-image.jpg',
});

• Pre-commit: Linting and formatting
• Commit-msg: Conventional commits validation
• Pre-push: Type checking and tests

This project uses conventional commits:

• feat: New feature
• fix: Bug fix
• docs: Documentation
• style: Code style/formatting
• refactor: Code refactoring
• test: Tests
• chore: Maintenance tasks

The easiest way to deploy your Next.js app is to use the Vercel Platform.

# Deploy to Vercel
vercel --prod

This Next.js app can be deployed to any platform that supports Node.js:

• Netlify
• Railway
• DigitalOcean
• AWS
• Google Cloud

Analyze your bundle size:

yarn analyze

• Automatic code splitting
• Image optimization (AVIF/WebP)
• Font optimization
• CSS optimization
• JavaScript minification

• Jest + React Testing Library for unit tests
• Playwright for E2E tests
• Storybook for component documentation
• Coverage reporting

• Sentry for error tracking
• Web Vitals tracking
• Performance monitoring
• Real User Monitoring (RUM)

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes using conventional commits
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

# Clone the repository
git clone https://github.com/alanbasilio/next-polyglot.git
cd next-polyglot

# Install dependencies
yarn install

# Set up git hooks
yarn prepare

# Start development
yarn dev

This project is licensed under the MIT License - see the LICENSE file for details.

• Next.js Documentation
• React Documentation
• Tailwind CSS Documentation
• i18next Documentation
• Radix UI Documentation
• next-themes Documentation

Happy coding! 🎉