nextjs-15

Guide Next.js 15 App Router patterns including Server Components and Actions.

Updated Feb 21, 2026

Search Tags:#web development #react #next.js #server actions #nextjs #server components #app router

Ready to run

npx skills add https://github.com/josemartinrodriguezmortaloni/opencode-config --skill nextjs-15-josemartinrodriguezmortaloni

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: nextjs-15
Source: https://github.com/josemartinrodriguezmortaloni/opencode-config/tree/main/skill/nextjs-15
Command: npx skills add https://github.com/josemartinrodriguezmortaloni/opencode-config --skill nextjs-15-josemartinrodriguezmortaloni

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides clear guidance and examples for leveraging the advanced features of Next.js 15's App Router, enabling efficient development of modern web applications.

Core Features & Use Cases

App Router Conventions: Understand the file-based routing system, including layouts, pages, and route groups.
Server Components & Actions: Implement dynamic server-side rendering and handle mutations with Server Actions.
Data Fetching & Streaming: Optimize data retrieval with parallel fetching and streaming UI updates.
API Routes & Middleware: Build robust APIs and implement request-level logic.
Metadata & Server-Only: Manage SEO and secure sensitive code.

Quick Start

Use the nextjs-15 skill to generate a basic App Router structure with a layout and a page.

Frequently Asked Questions about nextjs-15

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

FAQPage Schema

How do I implement Server Actions for data mutations in Next.js 15?▼

Server Actions in Next.js 15 handle data mutations by letting you define asynchronous server-side functions that execute directly within Server Components to submit form data and update your application state without writing separate API endpoints.

What is the best way to fetch data with parallel fetching and streaming in Next.js App Router?▼

Data fetching in the App Router optimizes performance through parallel requests and React Suspense, allowing you to stream UI updates progressively so users see fetched content immediately instead of waiting for the entire page to render.

How do I structure file conventions for layouts, pages, and route groups in Next.js 15?▼

App Router file conventions structure your application using special files like page.tsx for UI, layout.tsx for shared interfaces, and route groups organized in parentheses to isolate specific layout logic without affecting the URL path.

Do I need prior React knowledge to use Next.js Server Components effectively?▼

You need a solid understanding of React fundamentals to use Next.js Server Components effectively, as they extend React's architecture by rendering components on the server to reduce client-side JavaScript and improve initial page load performance.

How does middleware handle request-level logic in a Next.js application?▼

Middleware in Next.js intercepts incoming requests to execute server-side logic before routing completes, enabling you to manage authentication checks, redirects, and localized content delivery based on specific request conditions.

Why does Next.js 15 generate metadata for SEO and secure sensitive code with server-only?▼

Next.js 15 dynamically generates metadata tags to improve SEO and uses server-only imports to restrict sensitive code execution to the server, preventing proprietary logic or environment variables from leaking to the client browser.