es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo utilizar next-connect con host proxy durante el desarrollo?

28 Jul, 2023 Programación

Estoy utilizando restinio como mi servidor de API de backend. Anteriormente, usaba ReactJS para el frontend y resolvía este problema de proxy utilizando “proxy”: “http://localhost:4000” en el archivo package.json, como se documenta aquí: https://create-react-app.dev/docs/proxying-api-requests-in-development/.

Ahora estoy usando Next.js y podría usar la función fetch directamente para obtener los datos del backend, pero si es posible, me gustaría usar next-connect, ya que este módulo tiene muchas características que simplificarían la codificación para mi proyecto actual.

He intentado varias formas, como reescribir la ruta utilizando el módulo de rewrites:

module.exports = {
  async rewrites() {
    return [
      {
        source: '/about',
        destination: '/',
      },
    ]
  },
}

Pero aún no puedo resolver el problema. ¿Cómo debo abordarlo?

Gracias.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Si desea seguir utilizando la función “proxy” de ReactJS, aún puede hacerlo agregando una clave “proxy” en el archivo package.json de Next.js. Esto le permitiría seguir utilizando Restinio como su servidor de API backend mientras utiliza Next.js para su frontend.

    Si desea utilizar next-connect en su lugar, puede crear un punto de conexión de API en Next.js utilizando API Routes. En este archivo de API Route, puede utilizar next-connect para manejar el enrutamiento y los middleware para las llamadas de su API backend. Luego, puede realizar una solicitud de búsqueda del lado del cliente a este punto de conexión de API desde sus componentes frontend para obtener los datos de su backend.

    Un ejemplo de un API Route utilizando next-connect:

    import nc from 'next-connect';
import fetch from 'isomorphic-unfetch';

const handler = nc()
  .get(async (req, res) => {
    const data = await fetch('http://localhost:4000/api/data');
    const json = await data.json();
    res.json(json);
  });

export default handler;

    En este ejemplo, estamos utilizando next-connect para crear un controlador de solicitud GET para un punto de conexión de API. Dentro del controlador, estamos utilizando la biblioteca isomorphic-unfetch para hacer una solicitud a nuestro servidor de API backend y recuperar los datos como JSON. Los datos JSON se envían de vuelta al cliente utilizando res.json().

    Para utilizar este punto de conexión de API en su frontend, puede hacer algo como esto:

    import React, { useEffect, useState } from 'react';

function MyComponent() {
  const [data, setData] = useState([]);

  useEffect(() => {
    async function fetchMyAPI() {
      const res = await fetch('/api/getData');
      const json = await res.json();
      setData(json);
    }
    fetchMyAPI();
  }, []);

  return (
    <div>
      <h1>Mis datos:</h1>
      <ul>
        {data.map(item => (
          <li key="{item.id}">{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default MyComponent;

    En este ejemplo, estamos utilizando la API de búsqueda del lado del cliente para hacer una solicitud GET a nuestro punto de conexión de API “/api/getData”. La respuesta se almacena en el estado utilizando el hook useState(). Finalmente, renderizamos los datos en un formato de lista.

    ¡Espero que esto sea útil! Avíseme si tiene alguna pregunta adicional.

Comments are closed.