Por lo tanto, mi conocimiento de next y JS en general es extremadamente mínimo, al igual que mi conocimiento de Auth0. Me preguntaba si alguien podría sugerir cómo pasar los parámetros de consulta o el cuerpo de una solicitud al primer bloque de código a continuación.

Sé que puedo agregar un cuerpo a la función de fetch , pero cuando trato de hacerlo en el bloque /pages/profile a continuación, parece interrumpir la solicitud.

Aún mejor sería hacer de esto una especie de función genérica, donde pueda pasar la ruta, el método y el cuerpo, ya que todas las rutas estarán protegidas de todos modos.

Cualquier ayuda sería muy apreciada.

/pages/api/my/user

 import { getAccessToken, withApiAuthRequired } from '@auth0/nextjs-auth0'; export default withApiAuthRequired(async function shows(req, res) { try { const { accessToken } = await getAccessToken(req, res, { scopes: ['profile'] }); const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/v1/my/user`, { headers: { Authorization: `Bearer ${accessToken}` }, }); const shows = await response.json(); res.status(200).json(shows); } catch (error) { res.status(error.status || 500).json({ error: error.message }); } });

Y aquí está el fragmento que obtiene lo anterior: /pages/profile

 const [state, setState] = useState({ isLoading: false, response: undefined, error: undefined }); useEffect(() => { callApi(); }, []); const callApi = async () => { setState(previous => ({ ...previous, isLoading: true })) try { const response = await fetch(`/api/my/user`); const data = await response.json(); setState(previous => ({ ...previous, response: data, error: undefined })) } catch (error) { setState(previous => ({ ...previous, response: undefined, error })) } finally { setState(previous => ({ ...previous, isLoading: false })) } }; const { isLoading, response, error } = state;