---

name: nextjs-app description: 生成Next.js 14+ App Router组件，包括服务端组件、客户端组件、API路由、中间件和数据获取模式。 metadata: short-description: 生成Next.js App Router代码

Next.js App Skill

描述

生成Next.js 14+ App Router组件，包含服务端/客户端模式。

触发条件

• /nextjs 命令
• 用户请求Next.js代码
• 用户需要App Router模式

提示

你是一个Next.js专家，能够创建现代化的App Router应用程序。

服务端组件与数据获取

// app/users/page.tsx
import { Suspense } from 'react';

interface User {
  id: string;
  name: string;
  email: string;
}

async function getUsers(): Promise<User[]> {
  const res = await fetch('https://api.example.com/users', {
    next: { revalidate: 60 }, // ISR: 每60秒重新验证
  });
  if (!res.ok) throw new Error('获取用户失败');
  return res.json();
}

async function UserList() {
  const users = await getUsers();
  
  return (
    <ul className="space-y-2">
      {users.map(user => (
        <li key={user.id} className="p-4 bg-white rounded-lg shadow">
          <h3 className="font-semibold">{user.name}</h3>
          <p className="text-gray-600">{user.email}</p>
        </li>
      ))}
    </ul>
  );
}

export default function UsersPage() {
  return (
    <main className="container mx-auto p-4">
      <h1 className="text-2xl font-bold mb-4">用户列表</h1>
      <Suspense fallback={<div>加载用户中...</div>}>
        <UserList />
      </Suspense>
    </main>
  );
}

客户端组件与表单

'use client';

import { useState, useTransition } from 'react';
import { useRouter } from 'next/navigation';
import { createUser } from './actions';

export function CreateUserForm() {
  const router = useRouter();
  const [isPending, startTransition] = useTransition();
  const [error, setError] = useState<string | null>(null);

  async function handleSubmit(formData: FormData) {
    setError(null);
    startTransition(async () => {
      const result = await createUser(formData);
      if (result.error) {
        setError(result.error);
      } else {
        router.push('/users');
        router.refresh();
      }
    });
  }

  return (
    <form action={handleSubmit} className="space-y-4">
      {error && <div className="text-red-600">{error}</div>}
      
      <input
        name="name"
        placeholder="姓名"
        required
        className="w-full p-2 border rounded"
      />
      <input
        name="email"
        type="email"
        placeholder="邮箱"
        required
        className="w-full p-2 border rounded"
      />
      
      <button
        type="submit"
        disabled={isPending}
        className="w-full p-2 bg-blue-600 text-white rounded disabled:opacity-50"
      >
        {isPending ? '创建中...' : '创建用户'}
      </button>
    </form>
  );
}

服务端操作

// app/users/actions.ts
'use server';

import { revalidatePath } from 'next/cache';
import { z } from 'zod';

const CreateUserSchema = z.object({
  name: z.string().min(1),
  email: z.string().email(),
});

export async function createUser(formData: FormData) {
  const validated = CreateUserSchema.safeParse({
    name: formData.get('name'),
    email: formData.get('email'),
  });

  if (!validated.success) {
    return { error: '输入无效' };
  }

  try {
    await fetch('https://api.example.com/users', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(validated.data),
    });
    
    revalidatePath('/users');
    return { success: true };
  } catch {
    return { error: '创建用户失败' };
  }
}

中间件

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const token = request.cookies.get('token')?.value;
  
  // 保护仪表板路由
  if (request.nextUrl.pathname.startsWith('/dashboard')) {
    if (!token) {
      return NextResponse.redirect(new URL('/login', request.url));
    }
  }
  
  return NextResponse.next();
}

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

标签

nextjs, react, app-router, server-components, fullstack

兼容性

• Codex: ✅
• Claude Code: ✅