Nextjs Advanced Routing

What it does

This skill provides guidance for building advanced Next.js applications using the App Router. It covers features like Route Handlers (API routes), Parallel Routes, Intercepting Routes, Server Actions, error handling, draft mode, and streaming with Suspense. A key focus is on adhering to strict TypeScript coding standards within the provided codebase.

When to use it

• Creating API endpoints using Route Handlers.
• Implementing parallel or intercepting routes for complex navigation patterns (e.g., modals, drawers).
• Building forms and handling data mutations with Server Actions.
• Setting cookies or managing application state.
• Developing CMS previews utilizing draft mode.

Key capabilities

• Guidance on Route Handlers (API Routes)
• Support for Parallel and Intercepting Routes
• Implementation of Server Actions
• Error handling strategies
• Draft Mode integration
• Streaming with Suspense
• TypeScript type pattern examples (Page props, form events, server actions)

Example prompts

• "How do I create an API endpoint in Next.js using a Route Handler?"
• "Can you show me how to implement parallel routes for a modal window?"
• "What's the correct way to handle form submissions with Server Actions and TypeScript?"

Tips & gotchas

• TypeScript is critical: The codebase enforces strict TypeScript rules; avoid using the any type, as it will cause build failures. Use specific types like React.FormEvent<HTMLFormElement> instead.
• Server Action Filenames: Pay close attention to required filenames when implementing Server Actions. If no name is specified, default to app/actions.ts for multiple actions or app/action.ts for a single handler.