Estoy tratando de configurar una aplicación next.js con un servidor express.js personalizado. He configurado el servidor y se ejecuta, pero no puedo realizar una solicitud a este servidor desde el front-end.
A continuación se muestra el código server.js.
import "@babel/polyfill"; import next from "next"; import "@babel/polyfill"; import dotenv from "dotenv"; import express from 'express'; const port = 3000; const dev = process.env.NODE_ENV !== 'production'; const app = next({ dev }); const handle = app.getRequestHandler(); // preparing next.js server app.prepare().then(() => { const server = express(); server.get('*', ( req, res ) => { return handle(req, res); }) server.get('/api/test', ( req, res ) => { res.send({john: john, doe: doe}); }) server.listen( port, err => { if (err) throw err console.log(`Server started at port ${port}`); }) }).catch(ex => { console.error(ex.stack); process.exit(1); })A continuación se muestra el código frontal de reacción.
import { useEffect } from 'react'; import Head from 'next/head' import Image from 'next/image' import styles from '../styles/Home.module.css' export default function Home() { useEffect(() => { const fetchUrl = "/api/test"; const method = "GET"; fetch(fetchUrl, { method: method, }) .then((response) => response.json()) .then((json) => { console.log(json); }); },[]) return ( <div className={styles.container}> </div> ) }Sigo recibiendo un error que dice: 404 localhost: 3000/api/test not found
Creo que si creas el servidor personalizado, tenías que usar este paquete next-routes (hace mucho tiempo que no lo uso) para registrar las rutas. Por ejemplo, en routes.js
const routes = (module.exports = require("next-routes")()); routes .add("nameTest", "/api/test") luego importe routes a server.js
const routes = require("../routes"); const app = next({ dev }); const handle = routes.getRequestHandler(app);De manera predeterminada, su interfaz Next.js buscará un archivo dentro de pages/api cada vez que se solicite una ruta que comience con /api . Dado que sus rutas Express comienzan con /api , puede configurar rewrites() en su next.config.js para asignar las solicitudes entrantes a sus rutas Express en su lugar:
const nextConfig = { // override `pages/api` async rewrites() { return [ { source: "/api/:path*", destination: "http://localhost:3000/api/:path*", }, ]; }, }; module.exports = nextConfig;