mcpField
N
nextjs-15

nextjs-15

github.com/gentleman-programmingDevelopment661181 installsUpdated 31w ago
Repository

About nextjs-15

nextjs-15 is a reference skill for developers building Next.js 15 applications, outlining App Router conventions and common development patterns. Topics include Server Components, Server Actions, data fetching, route handlers, middleware, and metadata.

Key features

  1. 01Outline App Router file conventions
  2. 02Use Server Components and Server Actions
  3. 03Show parallel data fetching
  4. 04Describe API route handlers
  5. 05Configure middleware and page metadata

Use cases

  1. 01Plan App Router pages and layouts
  2. 02Implement server-side form actions
  3. 03Fetch page data in parallel
  4. 04Build API routes and access-control middleware

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/gentleman-programming/gentleman-skills --skill nextjs-15

After installing, type/nextjs-15in Claude Code to confirm it loaded.

Details

From the project README

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)

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

Server Actions

// app/actions.ts
"use server";

import { revalidatePath } from "next/cache";
import { redirect } from "next/navigation";

export async function createUser(formData: FormData) {
  const name = formData.get("name") as string;

  await db.users.create({ data: { name } });

  revalidatePath("/users");
  redirect("/users");
}

// Usage
<form action={createUser}>
  <input name="name" required />
  <button type="submit">Create</button>
</form>

Data Fetching

// Parallel
async function Page() {
  const [users, posts] = await Promise.all([
    getUsers(),
    getPosts(),
  ]);
  return <Dashboard users={users} posts={posts} />;
}

// Streaming with Suspense
<Suspense fallback={<Loading />}>
  <SlowComponent />
</Suspense>

Route Handlers (API)

// app/api/users/route.ts
import { NextRequest, NextResponse } from "next/server";

export async function GET(request: NextRequest) {
  const users = await db.users.findMany();
  return NextResponse.json(users);
}

export async function POST(request: NextRequest) {
  const body = await request.json();
  const user = await db.users.create({ data: body });
  return NextResponse.json(user, { status: 201 });
}

Middleware

// middleware.ts (root level)
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

export function middleware(request: NextRequest) {
  const token = request.cookies.get("token");

  if (!token && request.nextUrl.pathname.startsWith("/dashboard")) {
    return NextResponse.redirect(new URL("/login", request.url));
  }

  return NextResponse.next();
}

export const config = {
  matcher: ["/dashboard/:path*"],
};

Metadata

// Static
export const metadata = {
  title: "My App",
  description: "Description",
};

// Dynamic
export async function generateMetadata({ params }) {
  const product = await getProduct(params.id);
  return { title: product.name };
}

server-only Package

import "server-only";

// This will error if imported in client component
export async function getSecretData() {
  return db.secrets.findMany();
}

Keywords

nextjs, next.js, app router, server components, server actions, streaming

Comments

Markdown supported