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

Question

我已经部署了内置于Next.js中的网站，显然当您部署下一个js应用程序时，您会找到所有我不太满意的静态文件和资源的目录。

以这种方式生成目录：在我的情况下，mydomain.com/_next/static https://www.ovanya.com/_next/static/

这是目录：

下一个js docs说：

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

但是我真的不明白我应该将index.html文件添加到哪个目录？所以我应该在哪里将index.html放在哪里？

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

Answer 1

可能需要将index.html添加到_next，并且每个子目录都必须递归添加。您可以通过编写可以完成此任务的构建后脚本来实现。

但是，这样做没有没有好处。公开此目录或其中的文件没有没有风险。

_next/static只是经过编译的客户端资产，必须是公开的。

Answer 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
    }
  ]
}

如果要隐藏其他目录，则可以在working example>项目部署>源>输出中进行检查。

使用此配置部署网站后，访问该URL时将显示404页面。