Next.js CodeHacks Template

Production-ready Next.js 16 template with i18n, analytics, and monorepo structure.

Stack

• Next.js 16 (App Router) + TypeScript (strict)
• Tailwind CSS v4 + Dark mode
• next-intl (i18n: en, es)
• GTM + GA4 ready
• pnpm workspaces

Quick Start

pnpm install
cd apps/web
cp .env.development.example .env.development
# Edit .env.development (set NEXT_PUBLIC_BASE_URL, optionally NEXT_PUBLIC_GTM_ID)
pnpm dev

Structure

apps/web/          # Main app
├── app/[locale]/  # Localized routes
├── components/    # React components
├── i18n/          # Translations (en.json, es.json)
├── lib/           # Utilities
└── public/images/[locale]/ # Localized images

packages/
├── core/          # Shared utils

Key Features

i18n: Locale-based routing (/ = en, /es = es). Add languages in i18n/routing.ts and i18n/messages/{locale}.json. Images per locale in public/images/{locale}/.

Analytics: GTM/GA4 via Analytics.tsx. Events tracked in lib/analytics.ts. Set NEXT_PUBLIC_GTM_ID in env.

Monorepo: Import shared code: @template/core (utils).

Version Label: Shows version + environment. Auto-generated from package.json.

Commands

pnpm dev          # Start dev server
pnpm build        # Build for production
pnpm start        # Start production server

Deployment

Deploy to Vercel, Netlify, or Cloudflare Workers. Configure env vars in platform settings.