解决 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 错误。

以下是示例代码：

-- -------------------- ---- -------
----- - ------------ - - ----------------
----- - ----- - - ---------------
----- ---- - ----------------
----- - ---- - - ----------------

----- ---------------- - -----------------------
----- ---------- - --- --------------------------------------- ------------

----- --- - -------------------- --- -------------
----- --- - ------ --- ---
----- ------ - ------------------------

--------------------- -- -
  ------------------ ---- -- -
    ----- --------- - -------------- ------
    ----- - -------- - - ----------

    -- -------------------------------- -- -------------------------------------- -
      ------ --------------------- -----
    -

    ------ ----------- ---- -----------
  --------------- ----- -- -
    -- ----- ----- ----
    -------------- ----- -- ------------------------
  ---
---

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

总结

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

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