Resulting in "404 Not Found" on manual navigation to subdirectory and on refresh

[GnussonNet]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.5.0: Thu Jun  8 22:22:19 PDT 2023; root:xnu-8796.121.3~7/RELEASE_ARM64_T8103
    Binaries:
      Node: 16.18.0
      npm: 9.3.1
      Yarn: 1.22.19
      pnpm: 7.25.0
    Relevant Packages:
      next: 13.4.12
      eslint-config-next: 13.4.12
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.6
    Next.js Config:
      output: export

Which area(s) of Next.js are affected? (leave empty if unsure)

Static HTML Export (output: "export")

Link to the code that reproduces this issue or a replay of the bug

https://github.com/GnussonNet/nextjs-bug

To Reproduce

1. Create a new nextjs project using default values
   npx create-next-app@latest

2. Change next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "export",
  images: {
    unoptimized: true,
  },
};

module.exports = nextConfig;

3. Create a folder inside app (ex, about) and add a page.tsx

4. Remove all content in app/page.tsx and add a next/link to "/about"

5. In app/about/page.tsx, add a div with "about" text inside.

6. Build project
   npm run build

7. Transfer all files from out/ to one.com via SFTP

8. Go to domain, navigate to /about by using the Link, refresh (Gives 404 not found)

9. Manually enter domain /about (gives 404 not found)

Describe the Bug

Described above

Expected Behavior

Expected behavior is to be able to navigate and refresh the page without getting a "404 Not Found" response and be able to directly access subdirectories via domain.com/about

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

SFTP to one.com

[balazsorban44]

Hi, this sounds like a hosting-specific issue, can you provide your deployment URL? Or can you reproduce it locally (eg.: next build && npx serve out) or on a different hosting platform?

[mendlero]

I tested it on my computer, and after I ran npm run build, I looked at the html code genrated, here is the part related to the link:
<a href="/about">About</a>

as you can see it links to /about but the page is actually at /about.html (the location of the file).
If you then open the index.html page in the browser (I used the vscode 'open in default browser' extension) and navigate to /about then you will get 404 error because the page is in /about.html.
I didn't test this on one.com because I am not familiar with that site, but it seemes like the cause of this issue is that next doesn't update the urls used in links correctly, or maybe it is spesific to the host platform.

[zhangxinyong12]

nginx.conf
try_files $uri $uri/ /index.html;

Refresh to jump to the home page...

[zhangxinyong12]

nginx.conf try_files $uri $uri/ /index.html;

Refresh to jump to the home page...

nginx.conf try_files $uri $uri//index. html;

返回上一页返回上一页

`location / {

将以.html结尾的请求添加Cache-Control头信息

if ($uri ~* .(html)$) {
add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
}

默认情况下，根据路径转发，找不到加载index.html

try_files $uri /$uri.html /index.html;
}`

[yqz945]

I have the same problem when I 'next build' and 'static export' to out, then deploy the out to Nginx.
All route path not work and Refresh to jump to the home page.
http://migo.gelii.net/ is the deploy.
Ngnix Config:
location / {
if ($uri ~* .(html)$) {
add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
}
try_files $uri /$uri.html /index.html;
# try_files $uri $uri.html $uri/ =404;
}

[yqz945]

"Next.js generates an HTML file per route", but when I use [param] for route, next build will not generates the HTML file for the route. I found that's the problem. So I have to remove all [param] from app ruote path.

[zhangxinyong12]

是的。[param]是服务器渲染用的。你需要修改一下你的传参数方式。

[nextjs-bot]

This issue has been automatically marked as stale due to two years of inactivity. It will be closed in 7 days unless there’s further input. If you believe this issue is still relevant, please leave a comment or provide updated details. Thank you.

[nextjs-bot]

This issue has been automatically closed due to two years of inactivity. If you’re still experiencing a similar problem or have additional details to share, please open a new issue following our current issue template. Your updated report helps us investigate and address concerns more efficiently. Thank you for your understanding!