10.Next.js14配置后端api动态路由和POST请求

配置动态路由

检查如何设置动态更改的 URL，例如 api/1、api/2、…api/100 等，而不是像 api 这样的静态 API 端点。

在api目录下创建[]括起来的[id]目录，并在其下创建route.ts文件。

动态路由

要创建一个动态 API 路由，在 app/api 目录中创建一个用于该路由的 username 文件夹，并定义一个动态路由。在本例中，我们将在 app/api/username 目录中创建一个名为[user]的动态路由。然后，在 [user] 路由内部，创建一个 route.ts 文件，内容如下：

//app/api/username/[user]/route.ts
import {NextRequest} from "next/server";

export async function GET(request:NextRequest,{params}:{
    params:{user:string}
}) {
    // 我们将使用 params 来访问传递给动态路由的数据
    const user = params.user;
    return new Response(`欢迎来到我的Next课堂，用户：${user}`);
}

结果：访问user为hedy的用户

构建嵌套API路由

要创建一个嵌套路由，首先在app/api中定义父 API 路由。添加到创建的父路由的任何子文件夹都被视为嵌套路由，而不是独立的路由。

在上面的示例中，我们创建了一个名为 username 的路由，并在其中嵌套了一个动态路由 [user]。在 app/api/username 中，我们可以在 route.ts 中定义父路由，如下所示：

//app/api/username/route.ts
import {NextRequest} from "next/server";

export async function GET(request:NextRequest) {
    // username parent route
    return new Response("这是一个父API路由");
}

我们可以通过 localhost:3000/api/username 访问父路由，如下所示：

POST请求

了解如何检索通过 POST 请求发送的数据。

request.json()获取的数据原样返回给客户端，这些会涉及将数据插入数据库等。

我们在之前的hello/route.ts文件中添加post请求

//app/api/hello/route.ts
import {NextResponse} from "next/server";
import {cookies, headers} from "next/headers";

export async function GET(request:Request) {
    const headersList = headers()
    const cookieStore = cookies()
    console.log('headersList',headersList)
    console.log('cookieStore',cookieStore)
    const { searchParams } = new URL(request.url)
    const name = searchParams.get('name')
    console.log(name)
    const response = await fetch('https://jsonplaceholder.typicode.com/users')
    const data = await response.json()
    return NextResponse.json(data);
}

export async function POST(request:Request){
    const res = await request.json()
    return NextResponse.json({res})
}

为了发送 POST 请求，我们需要创建一个输入表单，但这里我们只添加使用 fetch 函数将 POST 请求的数据发送到 app/page.tsx文件中。

//app/page.tsx
import Link from "next/link";
import Counter from "@/app/components/Counter";
import UserLst from "@/app/components/UserLst";
export default async function Home() {
    const response = await fetch('http://localhost:3000/api/hello',{
        method:'POST',
        headers:{
            'Content-Type': 'application/json',
        },
        body:JSON.stringify({
            name:'John',
            email:'john@example.com'
        })
    })

    const data = await response.json();

    console.log(1111,data)

  return (
   <main>
     <Link href="/users">Users</Link>
       <Counter>
           <h2>用户列表</h2>
           <UserLst />
       </Counter>
   </main>
  )
}