GitHub

Developer Cookbook

Next.js

Accelerate your workflow with production-ready patterns, reference architectures, and reusable boilerplate code.

layers

New here? Start with the Foundation

Learn how this cookbook is structured before diving into recipes.

Start Herearrow_forward
folder_open
Foundations

Folder Structure

A feature-based folder structure so you always know where a file goes — and why it belongs there.

View Recipearrow_forward
code
Foundations

TypeScript for React

How to type component props, event handlers, and hooks correctly. The contracts that prevent silent bugs.

View Recipearrow_forward
account_tree
Foundations

Component Anatomy

The consistent internal structure every component follows — imports, types, constants, function, export.

View Recipearrow_forward
cycle
Foundations

useEffect & Render Cycle

When effects run, why the dependency array exists, and how to clean up after yourself. The mental model React developers get wrong most often.

View Recipearrow_forward
widgets
Foundations

Component Composition

How components combine and communicate — children props, slot patterns, and why composition beats deep prop drilling.

View Recipearrow_forward
hook
Foundations

Custom Hooks

The boundary between logic and rendering. When to extract a hook, what the rules are, and how to avoid the most common mistake.

View Recipearrow_forward

Showing 1 to 6 of 8 patterns

react-principles