掌握 Next.js 15 的 App Router、Server Components 和 Server Actions。学习使用 React 和 TypeScript 进行现代 Web 开发的最佳实践。
# Next.js 15 完整开发指南
使用 Next.js 15 构建现代高性能 Web 应用,充分利用 App Router、Server Components 和 Server Actions 等最新特性。
## 项目初始化
### 创建新项目
```bash
npx create-next-app@latest my-project --typescript --tailwind --app
cd my-project
npm run dev
```
### 推荐的目录结构
```
my-project/
├── src/
│ ├── app/ # App Router(路由和页面)
│ │ ├── layout.tsx # 主布局
│ │ ├── page.tsx # 首页
│ │ ├── loading.tsx # 加载状态
│ │ └── error.tsx # 错误处理
│ ├── components/ # 可复用组件
│ │ ├── ui/ # UI 组件
│ │ └── forms/ # 表单组件
│ ├── lib/ # 工具函数和配置
│ └── types/ # TypeScript 类型定义
└── next.config.ts # Next.js 配置
```
## 服务器组件(Server Components)
服务器组件在服务器端完全渲染,减少发送到客户端的 JavaScript。
### 服务器组件示例
```typescript
// app/products/page.tsx
import { getProducts } from "@/lib/api";
// 此组件完全在服务器端渲染
export default async function ProductsPage() {
// 直接获取数据,无需 useEffect
const products = await getProducts();
return (
<main className="container mx-auto py-8">
<h1 className="text-3xl font-bold mb-6">我们的产品</h1>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{products.map((product) => (
<article key={product.id} className="border rounded-lg p-4">
<h2 className="text-xl font-semibold">{product.name}</h2>
<p className="text-gray-600">{product.description}</p>
<span className="text-lg font-bold text-blue-600">
¥{product.price}
</span>
</article>
))}
</div>
</main>
);
}
```
## 服务器操作(Server Actions)
```typescript
// app/actions/contact.ts
"use server";
import { z } from "zod";
import { revalidatePath } from "next/cache";
const contactSchema = z.object({
name: z.string().min(2, "姓名至少需要2个字符"),
email: z.string().email("请输入有效的电子邮箱"),
message: z.string().min(10, "消息至少需要10个字符"),
});
export async function submitContact(formData: FormData) {
const data = {
name: formData.get("name") as string,
email: formData.get("email") as string,
message: formData.get("message") as string,
};
const result = contactSchema.safeParse(data);
if (!result.success) {
return {
success: false,
errors: result.error.flatten().fieldErrors,
};
}
await saveMessage(result.data);
revalidatePath("/contact");
return { success: true, message: "消息发送成功" };
}
```
### 使用 Server Action 的表单
```typescript
// components/ContactForm.tsx
"use client";
import { useFormState, useFormStatus } from "react-dom";
import { submitContact } from "@/app/actions/contact";
function SubmitButton() {
const { pending } = useFormStatus();
return (
<button
type="submit"
disabled={pending}
className="bg-blue-600 text-white px-6 py-2 rounded-lg disabled:opacity-50"
>
{pending ? "发送中..." : "发送消息"}
</button>
);
}
export function ContactForm() {
const [state, action] = useFormState(submitContact, null);
return (
<form action={action} className="space-y-4 max-w-md">
<div>
<label htmlFor="name" className="block text-sm font-medium">
姓名
</label>
<input
type="text"
id="name"
name="name"
required
className="mt-1 block w-full rounded-md border px-3 py-2"
/>
{state?.errors?.name && (
<p className="text-red-500 text-sm">{state.errors.name}</p>
)}
</div>
<div>
<label htmlFor="email" className="block text-sm font-medium">
电子邮箱
</label>
<input
type="email"
id="email"
name="email"
required
className="mt-1 block w-full rounded-md border px-3 py-2"
/>
</div>
<div>
<label htmlFor="message" className="block text-sm font-medium">
您的消息
</label>
<textarea
id="message"
name="message"
rows={4}
required
className="mt-1 block w-full rounded-md border px-3 py-2"
/>
</div>
<SubmitButton />
{state?.success && (
<p className="text-green-600">{state.message}</p>
)}
</form>
);
}
```
## 数据获取与缓存
```typescript
// lib/api.ts
export async function getProducts() {
const res = await fetch("https://api.example.com/products", {
next: { revalidate: 3600 }, // 缓存1小时
});
if (!res.ok) {
throw new Error("无法加载产品数据");
}
return res.json();
}
```
这份完整指南帮助中文开发者掌握 Next.js 15 的核心概念和最佳实践。This nextjs prompt is ideal for developers working on:
By using this prompt, you can save hours of manual coding and ensure best practices are followed from the start. It's particularly valuable for teams looking to maintain consistency across their nextjs implementations.
Yes! All prompts on Antigravity AI Directory are free to use for both personal and commercial projects. No attribution required, though it's always appreciated.
This prompt works excellently with Claude, ChatGPT, Cursor, GitHub Copilot, and other modern AI coding assistants. For best results, use models with large context windows.
You can modify the prompt by adding specific requirements, constraints, or preferences. For nextjs projects, consider mentioning your framework version, coding style, and any specific libraries you're using.