abanoub-ashraf/god-tier-nextjs

God Tier Next.js (App Router)

Overview

Use this skill to design, build, or review modern Next.js apps at staff level. It focuses on App Router, rendering strategies, data fetching, performance, testing, and deployment, with chapter references derived from the provided PDF.

How to Use This Skill

• Start with the reference that matches the question, then return here for cross-cutting checklists.
• If a question spans multiple areas (for example, performance + data fetching), read both references.
• App Router only. If someone requests Pages Router, clarify and redirect.

Decision Frameworks

Rendering Strategy Picker

• Static (SSG): content rarely changes; best SEO and cacheability.
• ISR: content changes periodically; use revalidation for freshness without full rebuilds.
• Server-rendered (SSR/Dynamic): per-request personalization or real-time data.
• Client-rendered (CSR): user-specific data that does not need SEO; consider hydration cost.

Data Fetching and Caching

• Prefer server data fetching in App Router for shared, cacheable data.
• Use client caching (SWR-style) for user-scoped, rapidly changing data.
• Revalidation is a lever: low values for fast-changing data, higher for stable content.

Server vs Client Component Boundary

• Server Components for data access, secrets, heavy computation, and reduced bundle size.
• Client Components only when you need interactivity, hooks, or browser-only APIs.

Performance Triage (Fast Path)

1. Identify the slowest page via Lighthouse or RUM.
2. Confirm rendering mode and data fetching approach.
3. Reduce JS and image cost (dynamic imports, next/image, correct sizing).
4. Recheck Core Web Vitals and iterate.

Production Readiness Checklist

• Routing: route structure and layout boundaries defined.
• Rendering: each page has an intentional strategy with documented tradeoffs.
• Data: cache strategy and revalidation values are explicit.
• Performance: Core Web Vitals targets met; images and bundles audited.
• Testing: unit + integration coverage for critical paths.
• Deployment: environment variables, build analysis, and hosting constraints reviewed.

Reference Map

• references/01-getting-started.md: Next.js basics, project setup, core concepts.
• references/02-routing.md: App Router conventions, dynamic routes, layouts.
• references/03-rendering-strategies.md: SSR/SSG/ISR/CSR guidance and tradeoffs.
• references/04-api-routes.md: API routes and server-side endpoints.
• references/05-auth.md: auth patterns and protected routes.
• references/06-data-fetching.md: data fetching modes, SWR, caching.
• references/07-styling.md: CSS Modules, Tailwind, global styles.
• references/08-state-management.md: local vs global state, library choices.
• references/09-performance.md: image optimization, code splitting, Lighthouse.
• references/10-testing.md: unit and integration testing approaches.
• references/11-deployment.md: build, hosting, and environment setup.
• references/12-advanced-features.md: advanced capabilities and patterns.
• references/13-real-world-projects.md: practical project patterns.
• references/14-career-prep.md: interview and job preparation guidance.
• references/15-tailwind-typescript-seo.md: deep dive on Tailwind CSS, TypeScript, and SEO.