nextjs-15

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

App Router File Conventions

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)

app/
├── layout.tsx          # 根布局（必填）
├── page.tsx            # 首页（/）
├── loading.tsx         # 加载UI（Suspense）
├── error.tsx           # 错误边界
├── not-found.tsx       # 404页面
├── (auth)/             # 路由组（不影响URL）
│   ├── login/page.tsx  # /login
│   └── signup/page.tsx # /signup
├── api/
│   └── route.ts        # API处理器
└── _components/        # 私有文件夹（不参与路由）

Server Components (Default)

Server Components（默认组件）

typescript

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

typescript

// 无需指令 - 默认异步
export default async function Page() {
  const data = await db.query();
  return <Component data={data} />;
}

Server Actions

typescript

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

typescript

// 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");
}

// 使用示例
<form action={createUser}>
  <input name="name" required />
  <button type="submit">Create</button>
</form>

Data Fetching

数据获取

typescript

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

typescript

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

// 结合Suspense实现流式加载
<Suspense fallback={<Loading />}>
  <SlowComponent />
</Suspense>

Route Handlers (API)

路由处理器（API）

typescript

// 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 });
}

typescript

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

中间件

typescript

// 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*"],
};

typescript

// middleware.ts（根目录）
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

元数据

typescript

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

typescript

// 静态元数据
export const metadata = {
  title: "My App",
  description: "Description",
};

// 动态元数据
export async function generateMetadata({ params }) {
  const product = await getProduct(params.id);
  return { title: product.name };
}

server-only Package

server-only 包

typescript

import "server-only";

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

typescript

import "server-only";

// 如果在客户端组件中导入会报错
export async function getSecretData() {
  return db.secrets.findMany();
}

Keywords

关键词

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