skills.rest
scsm-unrestrict
scsm-unrestrictCOMMUNITY
Explore all skills by this author →
GitHub

nextjs-react-expert

Guides architecture, data fetching, and performance decisions for Next.js App Router and React applications.

1|Updated Aug 18, 2026
Search Tags:#code review#performance#caching#react#nextjs#server components#app router
One-click install
npx skills add https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent --skill nextjs-react-expert-scsm-unrestrict
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-react-expert
Source: https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent/tree/main/frontend-engineer/skills/nextjs-react-expert
Command: npx skills add https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent --skill nextjs-react-expert-scsm-unrestrict

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Modern Next.js and React codebases frequently suffer from misplaced server/client boundaries, implicit caching behavior, hydration bugs, and bloated client bundles. This Skill provides structured engineering guidance for building, reviewing, and debugging App Router applications with correct rendering and data-fetching patterns. ## Core Features & Use Cases - Server/Client Boundary Design: Decide where "use client" belongs, keep client components at the leaves, and pass serializable props across the boundary. - Data Fetching, Caching & Mutations: Use async Server Components, explicit cache/revalidate intent, Server Actions for mutations, and Suspense streaming for slow data. - Performance & Quality Review: Apply a checklist covering Core Web Vitals (LCP, INP, CLS), next/image and next/font optimization, error/loading boundaries, and accessibility. - Use Case: When a page renders stale data after a mutation, use this Skill to diagnose the caching configuration and add a Server Action that revalidates the affected paths and tags. ## Quick Start Review my Next.js App Router page for incorrect server/client component boundaries and caching issues.

Frequently Asked Questions about nextjs-react-expert

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I decide between Server and Client Components in Next.js?▼

Default to Server Components and add "use client" only at leaves that need interactivity, browser APIs, or React state and effects. Fetch data on the server near where it renders and pass plain serializable props down to keep client bundles small.

How do I handle mutations in Next.js App Router?▼

Use Server Actions for mutations instead of client-side API calls. After a write, revalidate the affected paths or tags so cached data stays consistent with the mutation.

Why is my Next.js page showing stale data after an update?▼

Stale data usually comes from implicit reliance on default fetch caching. Set caching intent explicitly with cache, revalidate, or dynamic options, and revalidate the relevant paths or tags after mutations.

Should I fetch data with useEffect in React?▼

Avoid useEffect for data fetching in App Router applications. Use async Server Components with fetch or ORM calls instead, which co-locate data with rendering and benefit from request memoization.

How do I improve Core Web Vitals in a Next.js app?▼

Optimize images with next/image, load fonts with next/font to prevent layout shift, and code-split heavy client widgets with dynamic imports. Measure LCP, INP, and CLS regularly and use the bundle analyzer as a routine tool.

Related Skills

Explore More Software Engineering Skills→
shazilk-devshazilk-dev

nextjs-frontend

Generate a Next.js 16 frontend scaffold with App Router, TypeScript, and Tailwind CSS.

Community
Intermediate
achmfachmf

performance-profiling

Run Lighthouse audits to analyze Core Web Vitals and rendering bottlenecks.

Community
Intermediate
sridsrid
25

code-police

Audit pull request code changes against code-police rules for quality and simplicity.

Community
Advanced
SaturateSaturate

frontend-ui-engineering

Detect frontend frameworks and design component hierarchies with accessibility and performance checks.

Community
Intermediate