Atomic Next.js boilerplate

TypeScript patterns workspace

A ready starting point for App Router projects with atomic UI folders, Redux Toolkit wiring, strict TypeScript, and a practical map of JavaScript, React, Next.js, and performance patterns.

Patterns are examples and defaults, not mandatory architecture. Apply them where they solve a concrete problem.

38 patterns mapped

Singleton

javascript

Share one global instance for application-wide coordination.

src/lib/patterns/javascript/singleton.ts

Proxy

javascript

Intercept reads and writes to another object.

src/lib/patterns/javascript/proxy.ts

Prototype

javascript

Share behavior through a prototype object.

src/lib/patterns/javascript/prototype.ts

Observer

javascript

Notify subscribed listeners when an event occurs.

src/lib/patterns/javascript/observer.ts

Module

javascript

Expose a small API while keeping implementation details private.

src/lib/patterns/javascript/module.ts

Mixin

javascript

Add reusable behavior to objects without inheritance.

src/lib/patterns/javascript/mixin.ts

Mediator/Middleware

javascript

Route work through a central pipeline instead of coupling callers.

src/lib/patterns/javascript/mediatorMiddleware.ts

Flyweight

javascript

Reuse existing instances for repeated identical values.

src/lib/patterns/javascript/flyweight.ts

Factory

javascript

Create objects through a function that hides construction details.

src/lib/patterns/javascript/factory.ts

Static Import

performance

Import critical code eagerly at module load time.

Use regular ES module imports for above-the-fold dependencies.

Dynamic Import

performance

Load code on demand with import() or next/dynamic.

src/lib/patterns/react/rendering.ts

Import On Visibility

performance

Defer non-critical resources until a section enters the viewport.

src/features/patterns/hooks/useIntersection.ts

Import On Interaction

performance

Load optional code after explicit user intent.

Wire dynamic import calls inside click, focus, or hover handlers.

Route Based Splitting

performance

Use routes as natural JavaScript bundle boundaries.

Next.js App Router creates route-level chunks by default.

Bundle Splitting

performance

Split application code into smaller reusable chunks.

Prefer route boundaries, dynamic imports, and isolated feature modules.

PRPL

performance

Push or preload critical assets, render quickly, precache, and lazy load the rest.

Use Next prefetching, metadata links, route splitting, and lazy components.

Tree Shaking

performance

Let the bundler remove unused exports.

Keep modules side-effect-light and prefer named exports for utilities.

Preload

performance

Tell the browser about critical resources early.

Use Next metadata or explicit link rel="preload" for critical assets.

Prefetch

performance

Fetch likely future resources before they are requested.

Use next/link prefetching for likely navigation paths.

Optimize Third Parties

performance

Load external scripts intentionally to protect page responsiveness.

Use next/script strategies and avoid blocking critical rendering.

List Virtualization

performance

Render only visible rows for very large lists.

Adopt a virtualization library when lists become large enough to need it.

Compressing JavaScript

performance

Reduce transferred JavaScript bytes with compression.

Deploy behind compression-enabled hosting such as Vercel or a CDN.

Animating View Transitions

performance

Use the View Transitions API for continuity between UI states.

Guard document.startViewTransition before using browser-only transitions.

Optimize Loading Sequence

performance

Prioritize the resources needed for the first usable screen.

Keep the initial route server-rendered and push non-critical work behind lazy boundaries.

Container/Presentational

react

Keep data and orchestration separate from rendering components.

src/features/patterns/containers/PatternExplorerContainer.tsx

Higher-Order Component

react

Wrap a component to add reusable behavior through props.

src/lib/patterns/react/withPatternTelemetry.tsx

Render Props

react

Pass rendering control as a function prop.

src/lib/patterns/react/RenderPropData.tsx

Hooks

react

Reuse stateful behavior with functions.

src/features/patterns/hooks/usePatternFilter.ts

Compound Components

react

Compose related components that cooperate through shared context.

src/lib/patterns/react/CompoundTabs.tsx

Client-side Rendering

react

Render interactive UI in the browser with client components.

Use "use client" components for browser-only state and events.

Server-side Rendering

react

Generate HTML on the server for each request when data is dynamic.

Use server components or dynamic route rendering in Next.js.

Static Rendering

react

Pre-render stable HTML at build time.

Next.js statically renders routes by default when possible.

Incremental Static Generation

react

Refresh static content after deployment.

Use fetch revalidate or route segment revalidate in Next.js.

Progressive Hydration

react

Hydrate less important interactive regions later.

Use server components first, then lazy client islands for lower-priority UI.

Streaming SSR

react

Stream HTML chunks as the server resolves them.

Use Suspense boundaries and loading.tsx files in the App Router.

React Server Components

react

Render components on the server without shipping their JavaScript.

Keep route and template components server-side unless interactivity is needed.

Core Web Vitals Optimization

react

Use Next.js primitives that protect loading, layout, and responsiveness metrics.

Prefer next/image, next/font, next/script, and route-level streaming.

React Stack Patterns

react

Use modern React stack defaults for routing, rendering, state, and data fetching.

This boilerplate uses App Router, server/client component boundaries, and Redux Toolkit.