mcpField
N
nextjs-15

nextjs-15

github.com/gentleman-programming开发661181 次安装31 周前更新
代码仓库

关于 nextjs-15

nextjs-15 是面向 Next.js 15 应用开发者的参考技能，整理了 App Router 的文件约定及常见开发模式。内容涉及服务器组件、Server Actions、数据获取、路由处理器、中间件和元数据。

主要功能

  1. 01概述 App Router 文件约定
  2. 02使用服务器组件与 Server Actions
  3. 03展示并行数据获取方式
  4. 04说明 API 路由处理器
  5. 05配置中间件与页面元数据

适用场景

  1. 01规划 App Router 页面和布局
  2. 02实现服务端表单操作
  3. 03并行获取页面数据
  4. 04编写 API 路由和访问控制中间件

安装

复制下面的命令，在终端中运行。

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

安装后在 Claude Code 中输入/nextjs-15确认已加载。

详细介绍

App Router 文件约定

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)

服务端组件（默认）

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

服务端操作

// 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>

数据获取

// 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>

路由处理器（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.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*"],
};

元数据

// 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 包

import "server-only";

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

关键词

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

评论

支持 Markdown