使用自定义 Express 服务器时的端点 returns 404

Question

我有一个有两个页面的 Next.js 应用程序。我的结构如下所示：

/pages
    /index.js
    /city.js

我创建了一个自定义服务器，这样如果用户访问主页以外的任何内容，它应该呈现 city.js。例如，如果您转到 myapp.com/phl，那么 url 应该保留为 myapp.com/phl，但它应该呈现 city.js。如果您转到 myapp.com/stl.

，同样适用

这是我的自定义服务器：

const express = require('express');
const next = require('next');
const url = require('url');
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handler = app.getRequestHandler();

app.prepare()
    .then(() => {
        const server = express();

        server.get('*', (request, response) => {
            return handler(request, response);
        });

        server.get('/:airportCode', (request, response) => {
            console.log('hello from the server');
            app.render( request, response, '/city', { ...request.query, ...request.params } );
        });

        server.listen(3000, error => {
            if (error) throw error;

            console.log('> Ready on http://localhost:3000');
        });
    })
    .catch(exception => {
        console.error(exception.stack);
        process.exit(1);
    });

当我访问主页时，它可以很好地呈现该页面，但是当我转到 https://myapp.com/phl 时，我得到了 404。我是否遗漏了什么？

Answer 1

您需要将您的页面处理程序切换为星号页面处理程序：

const express = require('express');
const next = require('next');
const url = require('url');
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handler = app.getRequestHandler();

app.prepare()
    .then(() => {
        const server = express();

        server.get('/:airportCode', (request, response) => {
            console.log('hello from the server');
            app.render( request, response, '/city', { ...request.query, ...request.params } );
        });

        server.get('*', (request, response) => {
            return handler(request, response);
        });

        server.listen(3000, error => {
            if (error) throw error;

            console.log('> Ready on http://localhost:3000');
        });
    })
    .catch(exception => {
        console.error(exception.stack);
        process.exit(1);
    });

asterisk 的功能就像是前一个函数未处理的任何路径的回退。

使用自定义 Express 服务器时的端点 returns 404

Endpoint returns 404 when using custom Express server

url-routing

reactjs

next.js