使用 tauri 构建的 Next.js 应用程序不显示 404 页面

Question

我有一个 next.js 应用程序，其 /app 文件夹中的 not-found.tsx 文件在使用时完美运行

cargo tauri dev

但是当我用

编译应用程序时

cargo tauri build
// or
cargo tauri build --debug

转到不存在的页面，我渲染了 / (/app/page.tsx page) 而不是 /not-found 但 url 仍然是 my.app/something-thats-not-found

那是我的 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 />;
}

我尝试将其与 NotFoundCatchAllPage() 一起使用，但没有一个起作用

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/[email protected]",
        "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
      }
    ]
  }
}

下一个.config.mjs

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

export default nextConfig;

Answer 1

NextJS 在 SSR 模式下依赖于 404 功能。 然而，当您使用 Tauri 打包 NextJS 时，它仅使用

next export

来打包生成的 HTML 和 JS/CSS 文件（仅限前端）。

因此没有 NextJS（服务器）监听路由变化。

一个简单的解决方案是检查请求的页面是否存在，如果不存在，则重定向到您选择的页面。

哦，并在客户端用 JS 进行这些检查。