Netlify attempts to look up a file based on several XOR filters, and when all of these fail, we end up serving a 404 page. For example, a request made to /example/ would check /example/index.html, /example.html, /example/home.html and several other combinations (not necessarily in the same order) before hitting the 404. However, in case you were not expecting a 404 at a particular URL, you might be interested in finding out the reason and potentially fixing it. This guide aims to cover the most common reasons (and their solutions) on Netlify. This guide assumes that the common reasons for a 404 (like an incorrect URL) do not apply.
Incorrect publish directory: If someone is trying to deploy their site directly, without any build step, a common scenario we’ve noticed is that they upload their site to a git repo and place all the files inside a sub-folder. However, when connecting the site to Netlify, due to the lack of framework, we leave the responsibility of configuring the correct settings to the user and some users don’t configure the publish directory. Thus, when they visit their site, they see a 404, as the files actually live inside https://their-site.netlify.app/sub-folder. In this case, either move all your files outside the sub-folder or change the publish directory in Netlify Site settings.
SPA redirect rule missing: A variety of tools, like Create React App, Vite, Angular, etc., are used to create Single-Page Applications. These applications don’t have an HTML page per path but instead rely on JavaScript to handle the navigation. For such apps, it is important to have the following contents:
/* /index.html 200
as the contents of the _redirects file which should exist in the public (or similar) folder, so that it’s copied over to your publish directory when the site is being built.
Server-Side Rendered Content: A lot of frameworks these days, like Next.js, Gatsby, Nuxt, Astro, Remix, SvelteKit, etc. support Server Side Rendering on Netlify. Netlify officially maintains its own integrations for Next.js and Gatsby, while the other frameworks maintain their integrations for Netlify. In the case of Next.js, for example, the Next.js Runtime can generate several redirects for even a minimal Next.js site. Even in case of Gatsby, if you use SSR/DSG, we would generate a few redirects. For any other framework that uses SSR using Netlify Functions, there would be at least 1 redirect that would handle this routing. So, if your deploy shows no redirect (or a fairly less number of redirects in case of Next.js), you can be sure that something went wrong with the integration. It might be worth trying to consult docs of the respective integration to make sure it’s correctly configured.
Another situation with SSR could be that, you could be sending a 404 for a request based on some conditional logic you might be having in your code.
In case the 404 is coming from a proxied URL, make sure the proxy destination is not serving a 404.
In case your HTML page loads fine, but the assets are missing/throwing a 404, make sure their paths are correct. Create React App checks for homepage in package.json, and thus, could configure the paths to the assets differently than expected.
Check if you’re running any Edge Functions that could be blocking the request.
If you’re using rewrites to proxy a site into the sub-directory of another, make sure the assets are published at a URL that matches the directory structure of the proxy-source. You can always use <base> tag or absolute URLs to make sure assets load reliably.
In case of doubts or confusion, it could be useful to try to build your site locally (using the build command and not the dev server) or browse/download your deploy as described in this article: New feature: Browse files in your deploy with the Deploy File Browser , to make sure a file actually exists at the path you’re requesting.
If none of this applies to you or if you’re still having issues, please open another thread to discuss. Make sure to include as many details as possible regarding your setup.
I can reach my website with url, but it shows the error when I refresh the page, or leave the page idle for a while. I use “CI= react-scripts build” and by default the folder is /build. And I do have [[redirects]] in netlify.toml.
In order to troubleshoot this, we need to be able to track the HTTP response with this issue. The simplest way to do this is to send us the x-nf-request-id header which we send with every HTTP response.
There more information about this header here:
If that header isn’t available for any reason, please send the information it replaces (or as many of these details as possible). Those details are:
Hi Dennis, Hi everyone.
I’m Lowi, newbie here.
I’m stuck with 404 page though the deployment is published.
I’m using an Eleventy theme that runs in localhost.
I checked the /index.html and it seems good.
Please could you help me?
Thanks in advance!
You can private message (PM) that to one of our support staff and I’ve confirmed that PMs are enabled for your community login. Note, that only one person can see the PM and this will likely mean a slower reply than posting the information publicly. Please feel free to reply to however you prefer though.
I deployed my site with a custom domain I purchased from you guys and I’m getting a 404 error with “Looks like you’ve followed a broken link or entered a URL that doesn’t exist on this site.”
I was able to enter my react site with the link and even access the routes with the nav links BUT when i refresh any page exept the homepage the i got this annoying 404 error (I already have my styled 404 page) and when i try to access any page from the url even if it exist i get the same 404 error.
MY SOLUTION:
I switched from using BrowserRouter to use HashRouter from react-router-dom
Hi,
I just started using Github, and I realized that my code was rather properly written and I was able to publish it as well, but for some very odd reason “Page not found” error kept popping up. Even after downloading the Deploy, as instructed, I can see that the downloaded “published” file has the “index.html” in it. Would you be able to assist me with this?
Hi,
the reason why I contacted you was regarding the fact that if you submit on the Demo Contact Tab, that is when the “error” pops up of the “Page Not Found”. Instead, I think it should be “Thank you for your response”. You can correct me, if I am wrong about this?
.