How to disable directory listing in Next js deployed to Vercel

user_11741333 0
Viewed 2134

I have deployed website built in Next.js and apparently when you deploy a next js app you can find the directory of all the static files and resources which i don't feel very good about.

the directory is generated in this way: mydomain.com/_next/static in my case https://www.ovanya.com/_next/static/

this is the directory: enter image description here

the next js docs say:

To prevent showing a Directory Listing page, add an index file, such as index.html, which will then show that file instead when accessing the directory's path.

but i really don't understand what directory should i add the index.html file to? so where should i exatcly put the index.html at?

and another question: is it bad if i leave this just like that? does it have any risks or stuff like that?

vercel next.js
2 Answers

2021 Update

You can disable directory listing in Project settings -> Advanced (see docs).

Before 2021

You need to add index.html to _next and every child directory recursively. You could do it by writing a post-build script that would do it.

But, there is no benefit doing so. There is no risk of exposing this directory or files inside it.

_next/static is just compiled client-side public assets.

user_59640230

I'm also looking for solution and have tried to create custom post-build script but didn't work. My final solution is creating redirect rules in vercel.json file in your root project directory.

This is my 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
    }
  ]
}

You can check at Vercel Dashboard > Your Project Deployment > Source > Output, if you have other directories to hide.

Once you deploy your site with this configuration, you will get 404 page rendered when you visit that URL.

user_74961980
Related