How do I install the Next 15 App Router skill?

Run npx skillmds@latest add yolo-labs-hq/next-15-app-router in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Next 15 App Router safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: makes network calls, reads secrets. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Next 15 App Router?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Next 15 App Router free to use?

Yes. Installing skills from SkillMD is free. This skill is licensed under MIT.

Who published Next 15 App Router?

yolo-labs-hq (@yolo-labs-hq) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Next 15 App Router by yolo-labs-hq — Agent Skill

Name: Next 15 App Router
Rating: 4.2 (5 reviews)
Author: yolo-labs-hq

Next 15 App Router

Patterns for Next.js 15 App Router projects — server vs. client components, route handlers, dynamic params (now async), revalidation primitives, and metadata. Covers gotchas introduced when upgrading from Next 14, including the params Promise change and async cookies/headers.

yolo-labs-hq Updated Sep 22, 2026

File contents

Next.js 15 App Router

Server vs. client components

Default to server components (no "use client" directive). They run on the server, can fetch data directly with await fetch(...) or await db.query(...), and don't ship JS to the browser.
Add "use client" only when you need state, effects, or browser APIs (event handlers, useState, useEffect, localStorage, etc.).
A client component cannot import a server component as a child; pass the server component in via children or props instead. This is the "interleaving" pattern.

Async params (Next 15 change)

In page/layout components, params and searchParams are now Promise<...>:

export default async function Page({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  // ...
}

This breaks the Next 14 pattern where params was a plain object. If you're upgrading, every dynamic route needs to be migrated. The codemod next codemod next-async-request-api . handles most of it.

Async cookies/headers

cookies(), headers(), and draftMode() are also async in Next 15:

import { cookies } from "next/headers";
const cookieStore = await cookies();
const token = cookieStore.get("auth")?.value;

Route handlers

app/api/*/route.ts exports GET, POST, PUT, DELETE, etc. They run as server functions. Return a Response directly — NextResponse.json(...) is a thin helper but plain Response.json(...) works just as well in Node 20+.

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  return Response.json({ id: searchParams.get("id") });
}

Revalidation

revalidatePath("/some/route") — invalidate the route cache.
revalidateTag("user-data") — invalidate fetches tagged with the same string at fetch time (fetch(url, { next: { tags: ["user-data"] } })).

Both are server-only — call them from server actions or route handlers, never from a client component.

Metadata

Use the metadata export (static) or generateMetadata (dynamic) in layout.tsx/page.tsx. Don't reach for the legacy <Head> component — App Router ignores it.

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Settings",
  description: "Manage your account",
};

For dynamic metadata that depends on params:

export async function generateMetadata({
  params,
}: {
  params: Promise<{ id: string }>;
}): Promise<Metadata> {
  const { id } = await params;
  const item = await getItem(id);
  return { title: item.name };
}

Edge runtime

Avoid Edge runtime (export const runtime = "edge") unless you have a specific reason — it has a smaller dependency surface (no Node APIs, no large npm packages) and most projects deploy fine on Node runtime.

OpenNext on Cloudflare

If this project deploys via OpenNext on Cloudflare Workers, the wrangler.opennext.jsonc is the source of truth for env vars and bindings. App Router code itself doesn't change — but server-only env access uses process.env and is wired up by OpenNext at build time.

---name: next-15-app-routerdescription: Patterns for Next.js 15 App Router projects — server vs. client components, route handlers, dynamic params (now async), revalidation primitives, and metadata. Covers gotchas introduced when upgrading from Next 14, including the params Promise change and async cookies/headers.license: MIT---# Next.js 15 App Router## Server vs. client components- Default to **server components** (no `"use client"` directive). They run on the server, can fetch data directly with `await fetch(...)` or `await db.query(...)`, and don't ship JS to the browser.- Add `"use client"` only when you need state, effects, or browser APIs (event handlers, `useState`, `useEffect`, `localStorage`, etc.).- A client component cannot import a server component as a child; pass the server component in via `children` or props instead. This is the "interleaving" pattern.## Async params (Next 15 change)In page/layout components, `params` and `searchParams` are now `Promise<...>`:```tsxexport default async function Page({ params,}: { params: Promise<{ id: string }>;}) { const { id } = await params; // ...}```This breaks the Next 14 pattern where `params` was a plain object. If you're upgrading, every dynamic route needs to be migrated. The codemod `next codemod next-async-request-api .` handles most of it.## Async cookies/headers`cookies()`, `headers()`, and `draftMode()` are also async in Next 15:```tsximport { cookies } from "next/headers";const cookieStore = await cookies();const token = cookieStore.get("auth")?.value;```## Route handlers`app/api/*/route.ts` exports `GET`, `POST`, `PUT`, `DELETE`, etc. They run as server functions. Return a `Response` directly — `NextResponse.json(...)` is a thin helper but plain `Response.json(...)` works just as well in Node 20+.```tsexport async function GET(request: Request) { const { searchParams } = new URL(request.url); return Response.json({ id: searchParams.get("id") });}```## Revalidation- `revalidatePath("/some/route")` — invalidate the route cache.- `revalidateTag("user-data")` — invalidate fetches tagged with the same string at fetch time (`fetch(url, { next: { tags: ["user-data"] } })`).Both are server-only — call them from server actions or route handlers, never from a client component.## MetadataUse the `metadata` export (static) or `generateMetadata` (dynamic) in `layout.tsx`/`page.tsx`. Don't reach for the legacy `<Head>` component — App Router ignores it.```tsximport type { Metadata } from "next";export const metadata: Metadata = { title: "Settings", description: "Manage your account",};```For dynamic metadata that depends on params:```tsxexport async function generateMetadata({ params,}: { params: Promise<{ id: string }>;}): Promise<Metadata> { const { id } = await params; const item = await getItem(id); return { title: item.name };}```## Edge runtimeAvoid Edge runtime (`export const runtime = "edge"`) unless you have a specific reason — it has a smaller dependency surface (no Node APIs, no large npm packages) and most projects deploy fine on Node runtime.## OpenNext on CloudflareIf this project deploys via OpenNext on Cloudflare Workers, the `wrangler.opennext.jsonc` is the source of truth for env vars and bindings. App Router code itself doesn't change — but server-only env access uses `process.env` and is wired up by OpenNext at build time.

Frequently asked questions