如何在部署到 Vercel 的 Next js 中禁用目录列表答案

【问题标题】：How to disable directory listing in Next js deployed to Vercel如何在部署到 Vercel 的 Next js 中禁用目录列表
【发布时间】：2020-10-18 05:17:05
【问题描述】：

我已经部署了在Next.js 中构建的网站，显然，当您部署下一个 js 应用程序时，您可以找到所有我感觉不太好的静态文件和资源的目录。

目录是这样生成的：mydomain.com/_next/static在我的例子中是https://www.ovanya.com/_next/static/

这是目录：

下个jsdocs说：

为防止显示目录列表页面，请添加索引文件，例如 index.html，然后在访问目录路径时显示该文件。

但我真的不明白应该将 index.html 文件添加到哪个目录？那么我应该把 index.html 放在哪里呢？

还有另一个问题：如果我就这样离开会很糟糕吗？它有任何风险或类似的东西吗？

【问题讨论】：

标签： next.js vercel

【解决方案1】：

2021 年更新

您可以在项目设置 -> 高级（请参阅docs）中禁用目录列表。

2021 年之前

您需要递归地将index.html 添加到_next 和每个子目录。你可以通过编写一个构建后的脚本来做到这一点。

但是，这样做没有任何好处。 没有暴露此目录或其中的文件的风险。

_next/static 只是编译的客户端公共资产。

【讨论】：

那么他们为什么要为此提供密码保护呢？我不明白？你有什么想法吗？
@mangrove108，请参阅更新后的答案。您可以在设置中禁用它。
是的，正是我想要的，还没有看到 api 中的 404，非常感谢 ?

【解决方案2】：

我也在寻找解决方案，并尝试创建自定义构建后脚本，但没有成功。我的最终解决方案是在项目根目录的vercel.json 文件中创建重定向规则。

这是我的vercel.json

{
  "redirects": [
    {
      "source": "/_next",
      "destination": "/404",
      "statusCode": 404
    },
    {
      "source": "/_next/static",
      "destination": "/404",
      "statusCode": 404
    },
    {
      "source": "/_next/static/([A-z0-9_-]{21})",
      "destination": "/404",
      "statusCode": 404
    },
    {
      "source": "/_next/static/chunks",
      "destination": "/404",
      "statusCode": 404
    },
    {
      "source": "/_next/static/css",
      "destination": "/404",
      "statusCode": 404
    },
    {
      "source": "/_next/static/images",
      "destination": "/404",
      "statusCode": 404
    }
  ]
}

您可以在Vercel Dashboard > Your Project Deployment > Source > Output 进行检查，如果您还有其他目录要隐藏。

使用此配置部署站点后，您将在访问该 URL 时呈现 404 页面。

【讨论】：