nextjs-15_skill

Overview

This skill collects practical patterns and conventions for building with Next.js 15 App Router. It covers file layout, server components, Server Actions, data fetching strategies, route handlers, middleware, metadata, and server-only usage. Use it as a concise reference when designing routing and server-side behavior in Next.js apps.

How this skill works

The skill inspects common App Router file conventions and demonstrates idiomatic implementations: server components as the default, Server Actions for form handling and post-action revalidation/redirects, and parallel or streaming data fetching with Suspense. It also shows API route handlers using the new route.ts convention, middleware for protected routes, metadata generation, and enforcing server-only code with the server-only package.

When to use it

• When structuring the app/ folder and route groups in a Next.js 15 project
• When implementing server-first components and deciding what runs on server vs client
• When handling form submissions with Server Actions and needing automatic revalidation or redirects
• When creating REST-like API endpoints inside the app directory
• When protecting routes with middleware or configuring route matching

Best practices

• Keep root files: layout.tsx, page.tsx, loading.tsx, error.tsx, not-found.tsx to leverage App Router features
• Favor server components for data fetching; make client components minimal and explicit with 'use client'
• Use Server Actions for multipart form or server-side mutations, then revalidatePath() and redirect() where appropriate
• Fetch parallel data with Promise.all and stream slow parts inside Suspense fallbacks
• Place non-routed helpers in a private folder (e.g., _components/) and mark server-only modules with 'server-only' to avoid client imports
• Define middleware matcher to limit scope and avoid global performance impact

Example use cases

• Create a user sign-up flow using a route group (e.g., (auth)/login and signup) and a Server Action to persist users and redirect to /users
• Build a dashboard that fetches users and posts in parallel, rendering fast portions first and streaming slower widgets with Suspense
• Implement app/api/users/route.ts to expose GET and POST handlers for an internal API used by server components
• Protect /dashboard/* with middleware that checks an authentication cookie and redirects to /login if missing
• Generate dynamic metadata per product by implementing generateMetadata in a product/[id] route