← 返回博客
·10 分钟阅读

使用 Next.js 构建全栈应用

Next.js 不仅仅是前端框架——它是一个全栈框架。了解 API 路由、服务端操作和中间件如何协同工作，从零开始构建完整的应用。

超越前端

Next.js 通常被认为是构建 UI 的 React 框架，但它实际上是一个完整的全栈平台。您可以在单个 Next.js 项目中构建从数据库到浏览器的整个应用。

API 路由与路由处理器

App Router 提供了路由处理器，让您使用标准 Web API 创建 API 端点：

// app/api/posts/route.ts
export async function GET() {
  const posts = await db.post.findMany();
  return Response.json(posts);
}

export async function POST(request: Request) {
  const body = await request.json();
  const post = await db.post.create({ data: body });
  return Response.json(post, { status: 201 });
}

服务端操作

服务端操作允许您直接从组件中调用服务端函数，无需创建单独的 API 路由：

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

import { revalidatePath } from "next/cache";


export async function createPost(formData: FormData) {
  const title = formData.get("title") as string;
  await db.post.create({ data: { title } });
  revalidatePath("/posts");
}

// 客户端组件
"use client";

import { createPost } from "./actions";


export function NewPostForm() {
  return (
    

      
      
    

  );
}

中间件

中间件在请求完成之前运行。用于身份验证、重定向、A/B 测试等：

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

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


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


return NextResponse.next();
}


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

综合运用

一个典型的全栈 Next.js 应用可能包括：

  • 服务端组件：用于数据获取和渲染。
  • 客户端组件：用于交互式 UI 元素。
  • 服务端操作：用于表单提交和数据变更。
  • 中间件：用于身份验证和路由逻辑。
  • 路由处理器：用于外部 API 集成。

    • 所有这些都存在于一个统一的代码库中——无需单独的后端！

    ← 返回博客