如何正确使用 Next JS 13 使用 App Router 框架中的 API 路由

Question

我对 React JS 和 Next.js 相当陌生。我之前在 Next.js 中使用 Page Router API，但后来改用 Next.js 13 中的新 App Router。

以前，使用 Page Router 时，创建单个 GET 请求的结构是将“JS”文件嵌套在page\api. 服务器自动创建路由并返回方法+数据。例如，我将导出以下函数：

export default (req, res) => {
  res.statusCode = 200
  res.json({ name: 'John Doe' })
}

现在，在 Next.js 13 上使用 App Router 和 TS，我了解到机制是不同的。API 文件夹嵌套在 app 文件夹下，您必须使用所有不同的 GET、POST （等）方法定义一个“route.ts”文件：

import { NextApiRequest } from 'next';
import React from 'react';


export async function GET (request:NextApiRequest){
    return new Response('John Doe')
} 

我在理解如何使用这个Response对象时遇到一些问题。在我的例子中，如何指定返回内容的结构{ name: 'John Doe' }？我想将响应状态更改为 400，该怎么做？

接下来，我必须处理 POST 请求。

import type {NextApiRequest, NextApiResponse} from 'next'

type MyData ={
    name:string
}

export async function POST(
    req: NextApiRequest, 
    res: NextApiResponse<Data>
){
    
    const {nameLookup} = req.body
    if(!nameLookup){
        
        //WHAT I WOULD LIKE TO DO IF I WAS USING THE PAGE ROUTER 
        //BUT THIS IS NOT WORKING WITH THE APP ROUTER

        res.statusCode = 400
        //- error TypeError: res.json is not a function
        res.json({name:'Please provide something to search for'})
        return res
    }

     //WHAT I WOULD LIKE TO DO IF I WAS USING THE PAGE ROUTER 
     //BUT THIS IS NOT WORKING WITH THE APP ROUTER
     //- error TypeError: res.status is not a function
     return res.status(200).json({anwser:'John Doe'})
})

感谢您的帮助，学习曲线有点陡峭，必须同时处理所有事情（TS，Next.js 13）

Answer 1

以下是基于您的路线的示例：

export async function POST(request: NextRequest) {
  const { nameLookup }: MyData = await request.json();

  if (!nameLookup) {
    return new NextResponse(
      JSON.stringify({ name: "Please provide something to search for" }),
      { status: 400 }
    );
  }
  
  return new NextResponse(JSON.stringify({ answer: "John Doe" }), {
    status: 200,
  });
}

请注意，在发布到 stack Overflow 之前，您应该自己做一些研究。看看这里的应用程序路由器文档可能就足够了。