json 如何在NextJS 13.4中处理NextResponse

bfrts1fy 于 2023-08-08 发布在其他

关注(0)|答案(1)|浏览(177)

如何接收我的请求内容？假设我们在NextJS13.4中有一个全新的应用程序，在app/API/route.tsx中有

import { NextResponse } from 'next/server'
 
export async function GET() {
  const res = await fetch('https://jsonplaceholder.typicode.com/todos/1', {
    headers: {
      'Content-Type': 'application/json',
    },
  })
  const data = await res.json()
 
  return NextResponse.json({ data })

}

字符串
我想知道两件事：为什么要使用NextResponse以及如何使用。
文档没有向我们展示如何处理页面中的值。js/ts
所以在app/page.tsx中

import Image from 'next/image'
import { GET } from '../api/route'

export default async function Home() {
    const data  = await GET()
    console.log(data)
    return(
        <>
            <div>Contents</div>
            <div>Goes Here</div>
        </>
    )
}

型
什么是正确的处理方式？因为这是返回一堆标头的东西，我找不到内容。如果我删除这个NextResponse.json({ data })，只返回data，我就可以得到这样的值

{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}

型
那么，有没有人能解释一下为什么文档告诉我使用NextResponse，但没有解释我如何在实际的前端获得值。
这是正确的方式，我正在进口，并试图接收的价值？

JSON

来源：https://stackoverflow.com/questions/76687658/how-to-handle-the-nextresponse-in-nextjs-13-4

1条答案

按热度按时间

fiei3ece1#

pages/API/route.ts

Request是您在浏览器和最新版本的Node.js中使用的标准Web API
NextRequest是Request的一个子类，它添加了几个属性和方法。它用于中间件
NextApiRequest扩展了Node.js的IncomingMessage（来自node：http），并为其添加了几个助手。它用于API路由

import { NextResponse } from 'next/server'
   import type { NextApiRequest, NextApiResponse } from 'next';

  export async function handle(req: NextApiRequest, resp: NextApiResponse) {
   if (req.method === 'GET') {
       const res = await fetch('http://jsonplaceholder.typicode.com/todos/1', {
           headers: {
               'Content-Type': 'application/json',
           },
       })
       const data = await res.json()

       return resp.status(201).json(data);
   }
 }
export default handle

字符串
pages/app/index.tsx

import {useEffect, useState} from 'react'
const Page = (props) => {
const [state,setState]= useState([])
const getData = async () => {
const res = await fetch(`/api/route`
  , {
    method: "GET",
  },
)
const pos = await res.json()
 setState(pos)

}
useEffect(() => {
getData()
}, [])

console.log(state);

 return (
   <>
    <div >
   {state.map((item) => (
 <>
<p>{item.id}</p>
<p>{item.title}</p>
</>))}
 </div>
 </>
)}
export default Page

型

赞(0）回复(0）举报 2023-08-08

我来回答

json 如何在NextJS 13.4中处理NextResponse

1条答案

相关问题

热门标签

最新问答