Nextjs 15

Master Next.js 15 App Router patterns with Server Components & Actions

✨ The solution you've been looking for

Verified

Tested and verified by our team

12565 Stars

Next.js 15 App Router patterns. Trigger: When working in Next.js App Router (app/), Server Components vs Client Components, Server Actions, Route Handlers, caching/revalidation, and streaming/Suspense.

nextjs-15 app-router server-components server-actions full-stack react typescript caching

Repository

See It In Action

Interactive preview & real-world examples

Live Demo

AI Conversation Simulator

See how users interact with this skill

User Prompt

Help me create a Next.js 15 app router page that fetches user data server-side with loading states

Skill Processing

Analyzing request...

Agent Response

Complete page component with async data fetching, Suspense boundaries, and proper file structure

Quick Start (3 Steps)

Get up and running in minutes

Install

claude-code skill install nextjs-15

claude-code skill install nextjs-15

Config

First Trigger

@nextjs-15 help

Commands

Command	Description	Required Args
@nextjs-15 building-server-first-app-router-pages	Create efficient server components with proper data fetching and streaming	None
@nextjs-15 implementing-server-actions-for-forms	Build type-safe form handling with server actions and revalidation	None
@nextjs-15 setting-up-api-routes-and-middleware	Create RESTful API endpoints and authentication middleware using App Router conventions	None

Typical Use Cases

Building Server-First App Router Pages

Create efficient server components with proper data fetching and streaming

Implementing Server Actions for Forms

Build type-safe form handling with server actions and revalidation

Setting Up API Routes and Middleware

Create RESTful API endpoints and authentication middleware using App Router conventions

Overview

App Router File Conventions

app/
├── layout.tsx          # Root layout (required)
├── page.tsx            # Home page (/)
├── loading.tsx         # Loading UI (Suspense)
├── error.tsx           # Error boundary
├── not-found.tsx       # 404 page
├── (auth)/             # Route group (no URL impact)
│   ├── login/page.tsx  # /login
│   └── signup/page.tsx # /signup
├── api/
│   └── route.ts        # API handler
└── _components/        # Private folder (not routed)

Server Components (Default)

1// No directive needed - async by default
2export default async function Page() {
3  const data = await db.query();
4  return <Component data={data} />;
5}

Server Actions

 1// app/actions.ts
 2"use server";
 3
 4import { revalidatePath } from "next/cache";
 5import { redirect } from "next/navigation";
 6
 7export async function createUser(formData: FormData) {
 8  const name = formData.get("name") as string;
 9
10  await db.users.create({ data: { name } });
11
12  revalidatePath("/users");
13  redirect("/users");
14}
15
16// Usage
17<form action={createUser}>
18  <input name="name" required />
19  <button type="submit">Create</button>
20</form>

Data Fetching

 1// Parallel
 2async function Page() {
 3  const [users, posts] = await Promise.all([
 4    getUsers(),
 5    getPosts(),
 6  ]);
 7  return <Dashboard users={users} posts={posts} />;
 8}
 9
10// Streaming with Suspense
11<Suspense fallback={<Loading />}>
12  <SlowComponent />
13</Suspense>

Route Handlers (API)

 1// app/api/users/route.ts
 2import { NextRequest, NextResponse } from "next/server";
 3
 4export async function GET(request: NextRequest) {
 5  const users = await db.users.findMany();
 6  return NextResponse.json(users);
 7}
 8
 9export async function POST(request: NextRequest) {
10  const body = await request.json();
11  const user = await db.users.create({ data: body });
12  return NextResponse.json(user, { status: 201 });
13}

Middleware

 1// middleware.ts (root level)
 2import { NextResponse } from "next/server";
 3import type { NextRequest } from "next/server";
 4
 5export function middleware(request: NextRequest) {
 6  const token = request.cookies.get("token");
 7
 8  if (!token && request.nextUrl.pathname.startsWith("/dashboard")) {
 9    return NextResponse.redirect(new URL("/login", request.url));
10  }
11
12  return NextResponse.next();
13}
14
15export const config = {
16  matcher: ["/dashboard/:path*"],
17};

Metadata

 1// Static
 2export const metadata = {
 3  title: "My App",
 4  description: "Description",
 5};
 6
 7// Dynamic
 8export async function generateMetadata({ params }) {
 9  const product = await getProduct(params.id);
10  return { title: product.name };
11}

server-only Package

1import "server-only";
2
3// This will error if imported in client component
4export async function getSecretData() {
5  return db.secrets.findMany();
6}