使用 NextJS 和 next-routes，如何从 server.js 和客户端处理 404

Question

我希望我的下一个路由在从 server.js（服务器端）运行以及在链接端运行 Link 时优雅地处理文件未找到（真正路由未找到）。我有一个解决方案，但它非常庞大，感觉我没有尽我所能。

我粘贴在我的页面文件 (pages/speakerdetail.js) 下方，它可以正确处理服务器和客户端，但在每个显示“未找到”的文件中都必须有一个自定义渲染方法似乎是错误的。

我也像 repo 中的示例一样运行它

https://github.com/pkellner/next-routes-problem

import React, {Component} from 'react';
import {Link} from '../routes'
import Router from 'next/router'

class speakerdetail extends Component {

    static async getInitialProps({req,res,query}) {

        console.log("getInitialProps speakerdetail");
        let statusCode = 200;
        let slugSpeaker = '';
        let ccYear = '';
        if (query && query.slugSpeaker) {
            console.log("query.slugSpeaker:" + query.slugSpeaker);
            slugSpeaker = query.slugSpeaker;
        }
        if (query && query.ccYear) {
            console.log("query.ccYear:" + query.ccYear);
            ccYear = query.ccYear;
        }
        if (slugSpeaker != 'douglas-crockford-1124' || ccYear != '2018') {
            if (req) {
                console.log("getInitialProps - res.redirect cause server");
                statusCode = 404;
                res.statusCode = 404;
            } else {
                console.log("getInitialProps - router.push cause client")
                Router.push('/error404');
            }
        }
        return {
            slugSpeaker,
            ccYear,
            statusCode
        };
    }

    render() {

        if (this.props.statusCode == 404) {
            return (
                <div>Not Found</div>
            )
        }

        return (
            <div>
                <b>speakerdetail    {this.props.ccYear}   {this.props.slugSpeaker}   {this.props.statusCode}</b>
                <hr/>
                <Link route='/' >
                    <a>home</a>
                </Link>
            </div>
        );
    }
}

speakerdetail.propTypes = {};
speakerdetail.defaultProps = {};

export default speakerdetail;

Answer 1

与其手动检查传递到页面的每个参数，不如从server.js文件中进行控制：

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

// With express
const express = require('express');
app.prepare().then(() => {
    const srv = express();

    srv.get('/:year/:slugSpeaker', (req, res) => {
      const { year, slugSpeaker } = req.params;

      return app.render(req, res, `/speakerdetail`, {
        year,
        slugSpeaker,
      });
    });

    srv.use(handler).listen(3000)
});

然后你可以尝试打开数据不正确的url，它会自动重定向到404页面。

参考：NextJS 与 custom-server-express