NextJS 13 — как получить объект NextApiRequest в асинхронном компоненте?

Question

Согласно документации NextJS 13, написание асинхронных компонентов — это новый способ предварительной выборки некоторых данных на сервере.getStaticProps,getInitialProps, и их следует заменить асинхронными компонентами.

Моя проблема в том, что у меня есть ситуация, когда мне нужно получить доступ к для предварительной выборки некоторых данных (я загружаю метаданные для страницы с сервера). Раньше я пользовалсяNextApiRequestобъект, который был передан в качестве параметраgetServerSidePropsФункция для получения информации о пути. Однако я не уверен, как мне получить доступ к этой информации в моем асинхронном компоненте.

Я попытался использовать хук «useRouter» для полученияpathинформации, однако перехватчики не разрешены для серверных компонентов.

Answer 1

в вашем маршруте API вы можете получить доступ к объекту NextRequest

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

export async function GET(request: NextRequest) {
   // you can get `headers` `searchParams` `params` etc. from this request object
    return NextResponse.json({ id: 1, name: 'john doe'})
}

// app/page.tsx
async function getUser() {
 const res = await fetch('http://localhost:3000/api')
 return res.json();
}

export default async function Page() {
  const user = await getUser();

  return <div>hello, {user.name}</div>
}