Next.js Discord

Discord Forum

How to fix vercel 404 page not used?

Answered
Lazuee posted this in #help-forum
Open in Discord
my codebase is monorepo without turbopack, and I've already set the Root Directory on vercel deployment settings to apps/website which is the NextJS app router., my only problem is that whenever i visit a not existing page instead of showing not-found.tsx, it goes to HTTP ERROR 404 browser page.
Answered by Lazuee
nvm, looks like [...not-found]/page.tsx solved this problem,. not-found.tsx seems useless,.
View full answer

8 Replies

# vercel.json
{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "framework": "nextjs",
  "installCommand": "cd ../.. && pnpm install --no-frozen-lockfile",
  "buildCommand": "cd ../.. && pnpm build",
  "cleanUrls": true,
  "public": false,
  "github": {
    "enabled": true,
    "autoJobCancelation": true
  }
}
// apps/website/next.config.ts
import withSerwistInit from "@serwist/next";
import { type NextConfig } from "next";

const withSerwist = withSerwistInit({
  cacheOnNavigation: true,
  disable: process.env.NODE_ENV === "development",
  reloadOnOnline: true,
  swDest: "public/sw.js",
  swSrc: "src/app/sw.ts",
  dontCacheBustURLsMatching:
    /^dist\/static\/([a-zA-Z0-9]+)\.([a-z0-9]+)\.(css|js)$/,
  exclude: [
    /\.map$/,
    /asset-manifest\.json$/,
    /LICENSE/,
    /README/,
    /robots.txt/,
  ],
});

const nextConfig: NextConfig = {
  allowedDevOrigins: ["*.*.gitpod.io"],
  compress: true,
  generateEtags: true,
  output: "standalone",
  poweredByHeader: false,
  productionBrowserSourceMaps: false,
  reactStrictMode: true,
  transpilePackages: ["@serwist/next"],
  compiler: {
    removeConsole:
      process.env.NODE_ENV === "production"
        ? {
            exclude: ["error", "warn"],
          }
        : false,
  },
  devIndicators: {
    position: "bottom-right",
  },
  experimental: {
    largePageDataBytes: 128 * 100000,
    optimizePackageImports: ["@serwist/next"],
    parallelServerBuildTraces: true,
    parallelServerCompiles: true,
    ppr: true,
    reactCompiler: true,
    serverSourceMaps: true,
    viewTransition: true,
    webpackBuildWorker: true,
    serverActions: {
      bodySizeLimit: "5mb",
    },
  },
  images: {
    dangerouslyAllowSVG: true,
    remotePatterns: [
      {
        hostname: "*",
        protocol: "http",
      },
      {
        hostname: "*",
        protocol: "https",
      },
    ],
  },
  eslint: {
    ignoreDuringBuilds: false,
  },
  typescript: {
    ignoreBuildErrors: false,
  },
};

export default withSerwist(nextConfig);
nvm, looks like [...not-found]/page.tsx solved this problem,. not-found.tsx seems useless,.
Answer