解决 Next.js 部署到 nginx 后 404 问题的 5 种方法

前言

Next.js 是目前非常流行的一种 React 框架。随着其越来越广泛的应用，有时我们可能会遇到一个常见问题：部署到 nginx 上后出现 404 错误。这篇文章将提供5种解决方案，以帮助您解决这个问题。

方法一：使用 try_files

在 /etc/nginx/nginx.conf 文件中，我们可以加入以下配置：

location / {
    try_files $uri $uri/ /index.html;
}

这种解决方案的核心是让 nginx 按照先后顺序尝试查找 URIs 是否存在，若不存在则返回 index.html。

方法二：使用 fallback

以下是实现 fallback 的示例代码：

location / {
    try_files $uri $uri/ @fallback;
}

location @fallback {
    rewrite .* /index.html break;
}

这种方法的优点是如果请求中的 URI 匹配不到任何静态文件，请求将会被转发到定义的 '@fallback' 地址。这种做法不会导致 404 错误的产生。

方法三：更改 next.config.js 文件

我们可以在 next.config.js 文件中添加以下设置：

module.exports = {
  // 可以在导出对象时指定 target
  // http://localhost:8000/todos/index.html
  // 只能访问 http://localhost:8000/todos/
  trailingSlash: true
}

通过增加末尾斜杠，可以避免在服务器上出现 404 错误。

方法四：更改 basepath

在实际部署时，我们将应用程序部署到子路径，为此需要在 next.config.js 文件中进行更改。以下是示例代码：

module.exports = {
  basePath: '/docs'
}

注意，必须在应用程序中使用 next/link 以正确地生成链接。如果使用手动链接，URL 将会被发送到不正确的位置。

方法五：使用 StaticFileMiddleware

在 node.js 应用程序中使用 StaticFileMiddleware 可以映射请求，避免出现 404 错误。

以下是示例代码：

const { createServer } = require('http');
const { parse } = require('url');
const next = require('next');
const { join } = require('path');

const staticMiddleware = require('node-static');
const fileServer = new staticMiddleware.Server(join(__dirname, '/public'));

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  createServer((req, res) => {
    const parsedUrl = parse(req.url, true);
    const { pathname } = parsedUrl;

    if (pathname.startsWith('/assets/') || pathname.startsWith('/_next/static/')) {
      return fileServer.serve(req, res);
    }

    return handle(req, res, parsedUrl);
  }).listen(3000, (err) => {
    if (err) throw err;
    console.log('> Ready on http://localhost:3000');
  });
});

这种方法非常灵活，可以适用于不同的部署情况。

总结

在这篇文章中，我们介绍了解决 Next.js 部署到 nginx 后 404 错误的五种方法，每个方法都有其自身的特点。选择适合您部署环境的方法，将使您的应用程序更加健壮。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a3a874add4f0e0ffbcb28c