【Next】路由处理

概述

和前端路由一样，后端路由处理也同样采用约定式路由。比如可以在 /api 目录下定义路由文件。但是要注意：route.ts 和 page.tsx 不可以在同一目录下，因为难以区分是渲染页面还是请求接口。

支持以下 HTTP 方法：GET、POST、PUT、PATCH、DELETE、HEAD 和 OPTIONS。如果调用了不受支持的方法，Next.js将返回 405 Method Not Allowed 响应。

注意，在生产环境下，GET 请求默认会进行缓存（Next14）

将 Request 对象与 GET 方法一起使用。
使用任何其他 HTTP 方法。
使用 Cookie 和 Headers 等动态函数。
Segment Config Options 手动指定动态模式。

而最新的 Next15 版本中，默认情况下，Route Handlers 中的 GET 函数不再缓存。要将 GET 方法选择到缓存中，您可以使用路由配置选项，例如 export const dynamic = 'force-static' 在 Route Handler 文件中。

实例

使用 lowdb 模拟后端数据库，进行 CRUD 操作。

db.ts

ts 复制代码

import { JSONFilePreset } from 'lowdb/node'

// Read or create db.json
const defaultData: { posts: {id: string; title: string; content: string}[]} = { posts: [] }
const db = await JSONFilePreset('db.json', defaultData)

export default db;

/api/articles/route.ts

ts 复制代码

import {NextResponse} from "next/server";
import db from "@/db";

// GET => /api/articles
export async function GET(request: Request) {
}

// POST => /api/articles
export async function POST(request: Request) {
    const result = await request.json();
    await db.update(({posts}) => posts.push({
        id: Math.random().toString(36).slice(-8),
        ...result
    }))
    return NextResponse.json({
        code: 200,
        message: "success",
        data: result
    });
}

/api/articles/[id]/route.ts

ts 复制代码

// DELETE => /api/articles/:id
import {NextResponse} from "next/server";
import db from "@/db";

export async function DELETE(request: Request, { params }: { params: { id: string } }) {
    await db.update(({posts}) => {
        const index = posts.findIndex(post => post.id === params.id);
        posts.splice(index, 1);
    })
    return NextResponse.json({
        code: 200,
        message: "success",
        data: params.id
    });
}

// PATCH => /api/articles/:id
export async function PATCH(request: Request) {}

// GET => /api/articles/:id
export async function GET(request: Request) {}

测试：

DELETE http://localhost:3000/api/articles/7ea9w8at
Content-Type: application/json
Connection: Keep-Alive
User-Agent: Apache-HttpClient/4.5.14 (Java/17.0.7)
Accept-Encoding: br,deflate,gzip,x-gzip


###

POST http://localhost:3000/api/articles
Content-Type: application/json
Content-Length: 68
Connection: Keep-Alive
User-Agent: Apache-HttpClient/4.5.14 (Java/17.0.7)
Accept-Encoding: br,deflate,gzip,x-gzip

{
  "title": "Test article",
  "content": "This is a test article"
}