UI – Next.js 16 Starter

A modern, production-ready frontend starter built with Next.js 16 (App Router), React 19, and TypeScript. It is designed for scalable, CMS-driven applications powered by Strapi, with a strong focus on security, performance, localization, and Docker-based deployments.

Tech Stack

• Next.js 16 (App Router architecture)
• React 19
• TypeScript
• TailwindCSS 4
• shadcn/ui (Radix UI + Tailwind components)
• @tanstack/react-query & @tanstack/react-table
• better-auth (authentication)
• next-intl (localization)
• Sentry (error monitoring)
• dayjs, lodash, react-hook-form, zod

Architecture Overview

The project follows a modular structure built around the Next.js App Router. It separates shared components, page-specific components, API clients, and utilities to ensure long-term maintainability and scalability.

• /src/app – Main application routes and layouts
• /src/components – Shared and page-builder components
• /src/lib – API clients, auth, theme, i18n, utilities
• /src/hooks – Custom React hooks
• /src/locales – Localization files
• /src/types – Global and API type definitions

Strapi CMS Integration

The starter provides a fully structured integration with Strapi using typed API clients and secure proxy layers.

• Public API client (read-only content fetching)
• Private API client (authenticated user requests)
• Automatic token injection based on HTTP method
• Proxy routes to hide backend URL and API keys
• Strict endpoint allow-listing for improved security
• Type-safe content fetching based on Strapi content types

Both server-side and client-side fetching strategies are supported. Client-side requests use proxy handlers to ensure that sensitive credentials are never exposed in the browser.

Authentication & Authorization

• Powered by better-auth
• Strapi Users & Permissions plugin support
• JWT session handling (server & client)
• Route protection via middleware
• Typed session retrieval for SSR components
• Optional omission of auth headers for static rendering

Authentication state can be accessed both in server components and client components with reactive hooks.

Page Builder System

The dynamic page builder renders landing pages directly from Strapi content. Each Strapi component is mapped to a corresponding React component.

• Catch-all dynamic routing for CMS-driven pages
• Manual mapping between Strapi and frontend components
• Separate handling of single types (Navbar, Footer, etc.)
• Developer overview tools for component usage
• Support for Strapi Live Preview (draft mode)

The page builder enables flexible content management while keeping the frontend strictly typed and structured.

Data Fetching & Performance

• Incremental Static Regeneration (ISR)
• Runtime static generation for unknown dynamic routes
• Time-based revalidation (default: 60 seconds in production)
• Server-side rendering (SSR) support
• React Query for client-side caching and mutations

The project supports both build-time pre-rendering and runtime static generation, allowing flexible deployment strategies.

SEO & Metadata

• Dynamic metadata generation from Strapi
• Open Graph and Twitter card support
• JSON-LD structured data support
• Automatic sitemap.xml generation
• robots.txt generation (production only)

Metadata is generated per page using the page's SEO configuration stored in Strapi, with localization fallbacks.

Localization

• Built with next-intl
• Typed translations and message keys
• Locale-aware routing
• Wrapped navigation utilities for correct locale handling

The app is fully prepared for multi-language websites with type-safe translation workflows.

Production & Deployment

• Optimized Dockerfile (Next.js standalone output)
• Build-once, deploy-many strategy support
• Optional build-time pre-rendering
• Runtime environment variable injection
• Health check endpoint (/api/health)

The Docker setup supports both environment-specific builds and runtime configuration without rebuilding the image.

Security & Middleware

• HTTP Basic Auth (optional)
• HTTPS redirection in production
• Auth guard middleware
• Dynamic rewrite handling
• Strict environment variable validation

Error Handling & Monitoring

• Global error boundaries (Next.js error.tsx)
• Granular component-level ErrorBoundary
• Automatic Sentry logging
• Optional debug flags for API and ISR troubleshooting

Additional Features

• reCAPTCHA v3 integration
• Theme support with next-themes
• Typed environment variable validation
• Image optimization helpers
• Developer-only component overview pages

Summary

This starter provides a scalable, secure, and production-ready foundation for building modern web applications powered by Strapi CMS. It combines strong typing, optimized rendering strategies, secure API handling, and full localization support in a Docker-ready architecture.