Antes, cuando creaba aplicaciones con create-react-app, tenía un archivo setupProxy.js que enrutaba solicitudes de API similares a esta
const proxy = require('http-proxy-middleware'); module.exports = function(app) { app.use('/api', proxy({ target: 'http://localhost:8000', changeOrigin: true, }) ); };Pero eso no parece funcionar con next.js. Cuando hago lo mismo, obtengo varios errores.
Buscando en Google una solución, muchos dicen usar un servidor personalizado de algún tipo. Pero, ¿cómo lograría un proxy como el anterior usando el servidor de desarrollo nextjs predeterminado? (Equivalente a npm run dev cuando dev en mi paquete.json es el next dev .
Mi servidor.js configurado, espero que ayude
import express from 'express'; import next from 'next'; import proxy from 'http-proxy-middleware'; const port = parseInt(process.env.PORT, 10) || 3000; const dev = process.env.NODE_ENV !== 'production'; const app = next({ dev }); const handle = app.getRequestHandler(); app.prepare().then(() => { const server = express(); server.use( '/api', proxy({ target: process.env.API_HOST, changeOrigin: true, }), ); server.all('*', (req, res) => handle(req, res)); server.listen(port, err => { if (err) throw err; console.log(`> Ready on http://localhost:${port}`); }); });paquete.js
"scripts": { "dev": "NODE_ENV=development node -r esm server.js", "build": "NODE_ENV=production next build", "start": "NODE_ENV=production node -r esm server.js", },Ahora hay una función oficial para esto en la configuración: reescrituras
Además de las reescrituras de rutas normales, también pueden enviar solicitudes a otro servidor web.
siguiente.config.js:
module.exports = { async rewrites() { return [ { source: '/api/:path*', destination: 'http://localhost:8000/:path*' // Proxy to Backend } ] } }Las reescrituras no funcionaron para mí, y tampoco lo hizo el uso de axios config.proxy .
He recurrido a una buena y antigua constante:
const SERVER_URL = process.env.NODE_ENV === 'production' ? 'https://produrl.com : 'http://localhost:8000'; export async function getStaticProps() { const data = axios.get(`${SERVER_URL}/api/my-route`) // ... }Preferiría con mucho las solicitudes de proxy y mantener mis solicitudes más limpias, pero no tengo un día para pasar luchando con esto.
Tal vez esta configuración tan simple ayude a otros.