Menu

Individual skill

opinionated-nextjs-patterns

0upvotes

Opinionated, backend-agnostic Next.js 16 (App Router) architecture — authorization at the data layer, server-side loading with cache()+Promise.all, mutations through next-safe-action + typed route handlers, client/server boundaries ('use client' at leaves + TanStack Query), forms with RHF + Zod, UI via shadcn/ui + Tailwind + Base UI + next-intl, request handling in proxy.ts (Next.js 16's renamed middleware), and a Turbo monorepo of @app/* packages confining the backend behind one data-access package. Examples use Supabase but every rule states the transferable principle. Use when writing, reviewing, or refactoring Next.js 16 code. Trigger on server actions, route handlers, RSC vs 'use client' placement, TanStack Query, RHF/Zod, proxy.ts, or monorepo package layout — even when the user doesn't say 'patterns' or 'best practices'.

skills/.experimental/opinionated-nextjs-patterns/SKILL.md

Read pinned source

Source commit cf93c57cac89d6fc3e4194686000411567f5caf3

What was checked

Matches the observed repository HEAD
Yes
Scanner rules are current
No
Repository scan complete
No
Skill scan complete
No
Observed behavior
Not checked yet
Last checked
Nov 5, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings)
222
Repository last updated
Aug 15, 2026
License
MIT

Observed agent integration: codex

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files
Read excerpt
# Opinionated Next.js 16 Patterns

Implementation-pattern reference for **Next.js 16 (App Router)** codebases that want a single, opinionated architecture. Contains **50 rules across 8 categories**, prioritised by execution-lifecycle cascade impact — authorization and (optional) tenant modeling first, then the request boundary, server fetching, mutations, client boundaries, architecture, and UI conventions.

The rules are **backend-agnostic in principle but use Supabase as the concrete example**. Each rule teaches the transferable idea (e.g. "authorize at the data layer", "read through a typed repository"); where the backend genuinely matters, a `*Transferable:*` note explains the pattern for other stores (Drizzle, Prisma). The structure is a **Turbo monorepo** with `@app/*` packages you own — built on canonical libraries (`next-safe-action`, `@supabase/ssr`, `@tanstack/react-query`, `react-hook-form` + `zod`, `shadcn/ui`, `next-intl`, `pino`), not a vendored starter kit.

## When to Apply

Reach for these rules when:

- **Writing new code** — pages, layouts, server actions, route handlers, `proxy.ts`, feature packages, client components, hooks, the data-access package, SQL/migrations, forms.
- **Reviewing a PR** — authorization slips (privileged client without a guard, missing `'server-only'`), waterfalls (sequential awaits, client-fetching server data), drift (hand-edited generated types, deep package imports, hardcoded i18n strings).
- **Refactoring** — moving code between `apps/web` and `packages/*`, splitting actions and services, lifting `'use client'` boundaries, replacing raw queries with a typed data-access factory, swapping a backend behind the data-access package.
- **Designing a feature** — choosing the right client (request-scoped vs privileged vs browser), deciding action vs route handler, planning the form/server-action contract, scoping a tenant (if multi-tenant).
- **Onboarding** — understanding *why* the codebase looks the way it does, with concrete, transferable examples.
Back to top