skills.rest
jshsakura
jshsakuraCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

nextjs-developer

Guide Next.js routing and rendering boundary changes across App and Page Routers.

22|2|Updated Mar 24, 2026
Search Tags:#routing#nextjs#ssr#hydration#serialization#data-fetching#server-actions
One-click install
npx skills add https://github.com/jshsakura/awesome-opencode-skills --skill nextjs-developer-jshsakura
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-developer
Source: https://github.com/jshsakura/awesome-opencode-skills/tree/main/skills/nextjs-developer
Command: npx skills add https://github.com/jshsakura/awesome-opencode-skills --skill nextjs-developer-jshsakura

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Addresses Next.js-specific work across routing, rendering modes, server actions, data fetching, and deployment-sensitive frontend behavior.

Core Features & Use Cases

  • App Router/Page Router boundaries: Clarify boundary responsibilities and ensure correct route resolution.
  • Server vs Client boundaries: Maintain proper serialization and data flow across boundaries.
  • Data fetching & rendering modes: Guide SSR/ISR/RSC data strategies and hydration-safe patterns.
  • Server actions & API contracts: Enforce safe server actions and predictable API contracts.
  • Auth/session propagation: Ensure consistent auth state across server and browser environments.
  • Use cases include upgrading Next.js projects, auditing route boundaries, and implementing edge-runtime deployments.

Quick Start

Provide the smallest safe Next.js change to preserve routing and rendering behavior.

Frequently Asked Questions about nextjs-developer

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

FAQPage Schema
How do I manage Next.js App Router and Page Router boundaries correctly?▼

Server and client boundaries in Next.js require proper serialization to maintain data flow. You must map component boundaries carefully and ensure data passed between server and browser environments remains serializable to prevent hydration mismatches.

What is the safest way to implement Next.js server actions and API contracts?▼

Next.js data fetching across SSR, CSR, and ISR requires hydration-safe patterns to prevent runtime errors. You must align data strategies with the correct rendering mode and verify that server components handle serialization properly before client hydration.

How do I propagate auth session state across Next.js server and browser environments?▼

Edge deployments in Next.js require careful boundary mapping and hydration-safe patterns to function correctly. You must verify rendering modes and data fetching strategies align with edge runtime constraints before applying minimal-risk changes.

Why does my Next.js hydration fail when fetching data in server components?▼

Upgrading Next.js projects requires auditing route boundaries and verifying server versus client component responsibilities. You should map App Router and Page Router boundaries, check data fetching modes, and apply minimal-risk changes to ensure safe upgrades.

Related Skills

Explore More Software Engineering Skills→
MohammedHTahirMohammedHTahir

nextjs

Migrate Next.js Pages Router code to App Router with async APIs.

Community
Advanced
Shresth-shShresth-sh

react-patterns

Identify and apply React/Next.js performance optimization patterns for load times.

Community
Advanced
idiaz01idiaz01
3

nuxt4-patterns

Mitigate hydration mismatches and SSR data-fetching pitfalls in Nuxt 4 applications.

Community
Advanced
lengo0951lengo0951

ck:web-frameworks

Set up web frameworks with Next.js, Turborepo, and RemixIcon.

Community
Advanced