Nextjs 15

What it does

This skill enables AI agents to generate and manage Next.js 15 applications, leveraging its new App Router and Server Components for efficient frontend development. It facilitates the creation of route structures, server actions for data manipulation, API endpoints with route handlers, middleware for authentication, and metadata management. The skill provides guidance on best practices for building modern, performant Next.js applications.

When to use it

• Creating a new Next.js 15 project from scratch.
• Implementing user authentication flows using middleware and route groups.
• Building API endpoints for data fetching and manipulation via Route Handlers.
• Developing server actions for form submissions and database interactions.
• Setting up dynamic metadata generation based on application data.

Key capabilities

• App Router File Conventions: Generates standard Next.js 15 directory structures (app/, layout.tsx, page.tsx, etc.).
• Server Components: Creates components that execute server-side code by default, eliminating the need for explicit directives.
• Server Actions: Implements form handling and data mutations using server actions with revalidation and redirection capabilities.
• Data Fetching: Provides examples of parallel data fetching and streaming with Suspense.
• Route Handlers (API): Generates API endpoints to handle GET and POST requests.
• Middleware: Creates middleware for authentication and redirecting unauthenticated users.
• Metadata Generation: Sets up static and dynamic metadata for SEO and application information.
• Server-only Package: Demonstrates the use of server-only modules to restrict client-side access to sensitive data.

Example prompts

• "Create a Next.js 15 project with an authentication flow using route groups."
• "Generate a server action for creating users and redirecting them to the user list page."
• "Build an API endpoint that returns all users from the database."

Tips & gotchas

• The skill assumes familiarity with basic Next.js concepts and TypeScript.
• The generated code relies on a db object, which represents your database connection - you will need to configure this separately.
• Pay attention to file conventions within the app/ directory as they dictate routing behavior.