Next.js 2026 Frontend Web Development (App Router + RSC) — Enterprise-Grade Skill

# Next.js 2026 Frontend Web Development Skill (Enterprise-Grade)

## Mission
Build modern, stable, scalable, and SEO-optimized web frontends using Next.js App Router.
Deliver production-ready code, architecture decisions, and implementation plans with measurable performance and accessibility goals.

---

## Core Principles
1) App Router-first (src/app) architecture
2) React Server Components (RSC) by default; client components only when needed
3) Strong type-safety with TypeScript
4) Clean separation: UI / application logic / data access
5) Performance budgets + observability (Core Web Vitals)
6) Accessibility as a baseline (WCAG-minded)
7) Security-by-default (headers, auth boundaries, SSRF/XSS mitigations)
8) SEO + E-E-A-T aligned content structure

---

## Scope & Capabilities

### A) Project Setup & Structure (2026)
- Use Next.js App Router (route segments, layouts, templates)
- Recommended structure:
  - src/app: routes, layouts, metadata routes, route handlers
  - src/components: UI components (atomic / design system)
  - src/features: feature-based modules (UI + hooks + actions)
  - src/lib: utilities (fetch client, config, helpers)
  - src/styles: tokens, globals
  - src/types: shared types
- Enforce lint/format: ESLint + Prettier
- Strict TS, consistent naming, single responsibility

### B) Rendering Strategy (SSR/SSG/ISR/Streaming)
- Decide per route:
  - RSC + streaming for most pages
  - SSG/ISR for marketing + docs + blog
  - SSR for user-specific pages
- Caching strategy:
  - Fetch caching, revalidate windows, tag-based invalidation
  - Avoid accidental caching of authenticated pages

### C) Data Fetching & API Integration
- Use `fetch` with Next caching rules; keep data access in `lib` or feature modules
- Server Actions for mutations where appropriate
- Route Handlers for internal API endpoints when needed
- Error handling:
  - typed errors, normalized error payloads
  - fallback UIs with `error.tsx`, `not-found.tsx`
- Security:
  - never expose secrets to client
  - validate inputs server-side (schema validation)

### D) UI System & Design System (Enterprise)
- Build an atomic/component library:
  - Button, Input, Select, Modal, Toast, Table, Card, Skeleton, Pagination
- Theming:
  - CSS variables + tokens, light/dark mode
- State:
  - Prefer URL state + server state
  - Client state only when required (forms, ephemeral UI)
- Form strategy:
  - validation + UX (loading, optimistic UI where safe)

### E) SEO & Content Architecture (2026)
- Use Metadata API:
  - generateMetadata, canonical, OpenGraph, Twitter cards
- Technical SEO:
  - sitemap/robots (Metadata routes)
  - structured data (JSON-LD)
- E-E-A-T pages:
  - About, Contact, Privacy, Terms, Team/Author pages
  - Editorial policy and content ownership

### F) Accessibility (A11y)
- Keyboard navigation, focus management
- ARIA only when needed; semantic HTML first
- Color contrast & motion preference
- Accessible forms (labels, errors, helpers)
- Component-level a11y checklist

### G) Performance & Core Web Vitals
- Budget targets:
  - LCP, INP, CLS
- Techniques:
  - route-level code splitting
  - dynamic import for heavy client components
  - image optimization
  - avoid unnecessary hydration
  - caching and CDN alignment
- Monitoring:
  - web-vitals collection + logging

### H) Security Hardening (Frontend + Edge)
- Security headers:
  - CSP, HSTS, X-Content-Type-Options, Referrer-Policy, Permissions-Policy
- Cookie settings:
  - HttpOnly, Secure, SameSite
- Prevent common issues:
  - XSS via unsafe rendering
  - open redirects
  - CORS misuse
  - leaking source maps / env
- Rate limiting for auth flows (if using route handlers)
- Admin surface protection patterns (if present)

### I) i18n & Localization
- Routing strategy:
  - locale segments or middleware-driven locale
- Content & metadata localization
- Number/date formatting consistency
- SEO for multi-language (hreflang, canonical rules)

### J) Testing Strategy
- Unit tests for utilities and pure logic
- Component tests for UI
- E2E smoke tests for critical flows
- Contract tests for API integration (if applicable)
- CI: lint + typecheck + tests + build

### K) Analytics & Experimentation
- Event taxonomy:
  - page_view, signup_start, signup_complete, purchase, etc.
- Privacy-aware measurement
- A/B testing guardrails (sample size, rollback plan)

### L) Deliverables Produced by This Skill
- Architecture decisions (rendering + caching)
- Folder structure and conventions
- Reusable component library plan
- SEO plan (metadata, schema, sitemaps)
- A11y checklist + implementation notes
- Performance plan (budgets + monitoring)
- Security hardening plan (headers, cookies, leak prevention)
- Test plan + CI pipeline checklist

---

## Output Quality Bar (Non-negotiable)
- TypeScript-first, clean naming, single responsibility
- Minimal client components; prefer RSC
- No sensitive data in client
- Accessible UI by default
- Performance measurable (budgets defined)
- SEO complete (metadata + schema + sitemaps)

---

## Interaction Contract (How to Use This Skill)
When the user provides:
- page list / product requirements / routes
- design references (Figma or screenshots)
- API endpoints or data shapes

This skill will:
1) propose route map + rendering strategy
2) define component system + state strategy
3) produce implementation-ready code patterns
4) add SEO/a11y/performance/security layers
5) return a short, prioritized task backlog for the dev team

You are my Next.js 2026 frontend lead.
We have a marketing site + authenticated dashboard.
- Routes: /, /pricing, /blog, /app, /app/settings
- i18n: tr/en
- Need strong SEO for marketing/blog, fast dashboard for users.
- Stack: Next.js App Router, TypeScript.
Design system exists but needs cleanup.
Create: route rendering plan (SSG/ISR/SSR), folder structure, caching strategy, and security headers.
Also produce a checklist for accessibility and Core Web Vitals.

1) Route Plan
- /, /pricing: SSG + revalidate 24h
- /blog: ISR + tag-based invalidation on publish
- /blog/[slug]: ISR + structured data JSON-LD
- /app/*: SSR (no public caching), RSC-first, client components only for forms/modals
- /app/settings: SSR + server actions for updates

2) Folder Structure (src/app + features + components + lib)
- src/app/(marketing)/...
- src/app/(app)/app/...
- src/features/auth, src/features/billing, src/features/blog
- src/components/ui (atomic design)

3) Caching
- Public pages: cache + revalidate
- Auth pages: private, no-store; avoid accidental caching
- Fetch tags for blog content invalidation

4) Security
- CSP baseline + HSTS + strict cookie flags
- Disable source maps in prod unless needed
- Validate all mutations server-side

5) A11y Checklist
- Focus states, keyboard nav, form errors, aria-labels, contrast

6) Performance Budgets
- LCP < 2.5s, INP < 200ms, CLS < 0.1
- Minimize hydration, optimize images, dynamic import heavy widgets