How to fix vercel 404 page not used?
Answered
Lazuee posted this in #help-forum
LazueeOP
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,.8 Replies
LazueeOP
# 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);
@Lazuee jsonc
# 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
}
}
LazueeOP
LazueeOP
nvm, looks like
[...not-found]/page.tsx
solved this problem,. not-found.tsx
seems useless,.Answer