基于Tauri构建的Next.js应用打包后无法显示404页面

问题现象 #

开发环境执行 cargo tauri dev 时，/app/not-found.tsx 能正常渲染；但执行 cargo tauri build 或 cargo tauri build --debug 打包后，访问不存在的路由（如 my.app/something-thats-not-found）时，URL 保持不变，但渲染的是首页（/app/page.tsx）而非 404 页面。

相关代码文件 #

1. /app/not-found.tsx #

import {
  NotFoundButton,
  NotFoundContainer,
  NotFoundInfo,
} from "./styles/style";

const NotFound = () => {
  return (
    <NotFoundContainer>
      <NotFoundInfo>
        <h1>Not Found!</h1>
        <span>
          |、
          <br />
          (˚ˎ 。7
          <br />
          |、˜〵
          <br />
          じしˍ,)ノ
        </span>
      </NotFoundInfo>
      <NotFoundButton href="/">Go to home</NotFoundButton>
    </NotFoundContainer>
  );
};

export default function NotFoundCatchAllPage() {
  return <NotFound />;
}

2. tauri.conf.json #

{
  "build": {
    "beforeBuildCommand": "yarn build",
    "beforeDevCommand": "yarn dev",
    "devPath": "http://localhost:3000",
    "distDir": "../out"
  },
  "package": {
    "productName": "scribble",
    "version": "0.1.0"
  },
  "tauri": {
    "allowlist": {
      "all": false,
      "window": {
        "all": false,
        "close": true,
        "hide": true,
        "show": true,
        "maximize": true,
        "minimize": true,
        "unmaximize": true,
        "unminimize": true,
        "startDragging": true
      },
      "globalShortcut": {
        "all": true
      }
    },
    "bundle": {
      "active": true,
      "category": "DeveloperTool",
      "copyright": "",
      "deb": {
        "depends": []
      },
      "externalBin": [],
      "icon": [
        "icons/32x32.png",
        "icons/128x128.png",
        "icons/128x128@2x.png",
        "icons/icon.icns",
        "icons/icon.ico"
      ],
      "identifier": "com.scribble.dev",
      "longDescription": "",
      "macOS": {
        "entitlements": null,
        "exceptionDomain": "",
        "frameworks": [],
        "providerShortName": null,
        "signingIdentity": null
      },
      "resources": [],
      "shortDescription": "",
      "targets": "all",
      "windows": {
        "certificateThumbprint": null,
        "digestAlgorithm": "sha256",
        "timestampUrl": ""
      }
    },
    "security": {
      "csp": null
    },
    "updater": {
      "active": false
    },
    "windows": [
      {
        "fullscreen": false,
        "height": 600,
        "resizable": true,
        "title": "Scribble",
        "width": 800,
        "decorations": false
      }
    ]
  }
}

3. next.config.mjs #

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

export default nextConfig;

问题原因 #

Next.js 开启 output: "export" 时生成静态站点，所有路由依赖客户端路由处理。但 Tauri 默认的文件系统规则中，访问不存在的文件会 fallback 到 index.html（首页），导致 Next.js 无法触发 not-found.tsx 组件。

解决步骤 #

1. 添加 Catch-All 路由 #

在 /app 目录下创建 [[...not-found]]/page.tsx 文件，内容如下：

import NotFound from "../not-found";

export default function CatchAllPage() {
  return <NotFound />;
}

这个文件会捕获所有未匹配的路由，在静态导出时将这些路径指向 404 组件，确保客户端路由能正确识别并渲染 404 页面。

2. 重新打包验证 #

执行 yarn build 确认 out 目录生成了 [[...not-found]] 相关文件，再执行 cargo tauri build，打包完成后测试不存在的路由，即可正常渲染 404 页面。

内容的提问来源于stack exchange，提问作者Igors Igors