nextjs-app_skill

Overview

This skill generates Next.js 14+ App Router components and patterns for full-stack pages. It produces server components with data fetching, client components (including forms and actions), API-like server actions, and middleware examples. The outputs are TypeScript-ready and follow modern Next.js conventions for ISR, revalidation, and client/server separation.

How this skill works

Provide a request describing the page, component, or route you need and I generate App Router files (page.tsx, client components, actions, middleware) with example code and comments. I include data-fetching patterns (fetch with next.revalidate), server actions for form handling, Suspense-based loading, and middleware for route protection. The generated code is practical and ready to drop into a Next.js 14+ project with minimal edits.

When to use it

• Scaffolding App Router pages that need server-side data fetching or ISR.
• Creating client-side interactive forms that call server actions.
• Implementing authentication or route guards via middleware.
• Prototyping CRUD flows with revalidation and optimistic UI patterns.
• Converting older pages to the Next.js App Router and server components.

Best practices

• Keep data fetching in server components and UI interactions in client components.
• Use 'next: { revalidate }' on fetch for ISR and revalidatePath in server actions after mutations.
• Validate incoming form data server-side with a schema (e.g., zod) before calling APIs.
• Wrap async server-rendered lists with Suspense and provide concise fallbacks.
• Protect sensitive routes in middleware and minimize matcher scope for performance.

Example use cases

• A users index page that fetches and displays users with ISR and Suspense fallback.
• A CreateUser client form that calls a server action and revalidates the users page.
• Middleware that redirects unauthenticated visitors from /dashboard to /login.
• API integration patterns for POST/GET flow in server actions using fetch.
• Converting a legacy page to a server component with client subcomponents for interactivity.