Open-source project
NextRanger
A strict Next.js engineering base where architectural decisions are enforced by tooling instead of documented and forgotten.
Overview
NextRanger is the starting point I use for serious frontend work. Its premise is that conventions a team agrees to but cannot enforce will erode, so every rule that matters is expressed as a lint rule, a type, or a failing test rather than a paragraph in a README.
Architecture
Next.js App Router with Server Components by default, strict TypeScript, and a module-first layout with one-way dependencies: routes depend on modules, modules on shared code, shared on vendor wrappers, and never the reverse. Each third-party package has exactly one owning wrapper, so upgrades and error handling live in a single reviewed file.
Engineering
A custom ESLint plugin enforces the layer policy, package ownership, TSX-only components and translation coverage. Vitest and Playwright cover unit, integration, end-to-end, accessibility and visual testing, alongside internationalisation with RTL, a nonce-based CSP, and CI gates that run the whole set before anything merges.
- Role
- Author. Designed the architecture model, the custom ESLint rule set and the quality gates.
- Category
- Full-stack
- Stack
- Next.jsReactTypeScriptESLintVitestPlaywrightTailwind CSS
- Language
- TypeScript