I suddenly started to get 404 errors on second level pages
I'm not sure what happened or when it happened because everything has been working fine during the development of my website, but when I had to run my build command on my server on a Digitalocean droplet, I started getting 404 errors on second-level pages under app/:uid.
I then ran the build command on my localhost and development environment to understand what the problem may have been, but now I also get the same errors on my localhost. General page and slice templates are error free. I went over them all before I felt ready to move my project to a server, so I suspect something happened with my Route Resolver objects.
My project is based on Next.js and Tailwind, and this is my prismicio.ts file. It contains my Route Resolver objects.
/**
* prismicio.ts
*
*/
import * as prismic from '@prismicio/client'
import * as prismicNext from '@prismicio/next'
import config from '../slicemachine.config.json'
/**
* The project's Prismic repository name.
*/
export const repositoryName = process.env.NEXT_PUBLIC_PRISMIC_ENVIRONMENT || config.repositoryName
/**
* A list of Route Resolver objects that define how a document's `url` field is resolved.
*
* {@link https://prismic.io/docs/route-resolver#route-resolver}
*/
const routes: prismic.ClientConfig["routes"] = [
{
type: "home",
path: "/",
},
{
type: "page",
path: "/:uid",
},
{
type: "article",
path: "/:uid",
},
{
type: "showcase",
path: "/work/:uid",
}
]
/**
* Creates a Prismic client for the project's repository. The client is used to
* query content from the Prismic API.
*
* @param config - Configuration for the Prismic client.
*/
export const createClient = (config: prismicNext.CreateClientConfig = {}) => {
const client = prismic.createClient(repositoryName, {
routes,
fetchOptions:
process.env.NODE_ENV === "production"
? { next: { tags: ["prismic"] }, cache: "force-cache" }
: { next: { revalidate: 5 } },
...config,
})
prismicNext.enableAutoPreviews({
client,
previewData: config.previewData,
req: config.req,
})
return client
}
I also added middleware because I wanted to use multiple languages but load correct language based on domain name. This is my middleware,ts file.
/**
* middleware.ts
*
*/
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
/**
* Listening to header requests, and can be marked 'async' if using 'await' inside
*
*/
export function middleware(request: NextRequest) {
const requestHeaders = new Headers(request.headers)
const host = request.nextUrl.host
let locale = 'en-us'
if (host.endsWith('company.de')) {
locale = 'de-de';
}
requestHeaders.set('x-next-pathname', request.nextUrl.pathname)
requestHeaders.set('x-locale', locale)
return NextResponse.next({
request: {
headers: requestHeaders,
},
})
}
/**
* Fetches and export matching paths
*/
export const config = {
matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)',],
}
What I did notice is that the next file app-build-manifest.json clearly changed after the build command, and I can clearly see that pages on second level (/[uid]/page) is missing in that new manifest.
Old manifest
{
"pages": {
"/page": [
"static/chunks/webpack.js",
"static/chunks/main-app.js",
"static/chunks/app/page.js"
],
"/layout": [
"static/chunks/webpack.js",
"static/chunks/main-app.js",
"static/css/app/layout.css",
"static/chunks/app/layout.js"
],
"/loading": [
"static/chunks/webpack.js",
"static/chunks/main-app.js",
"static/chunks/app/loading.js"
],
"/not-found": [
"static/chunks/webpack.js",
"static/chunks/main-app.js",
"static/chunks/app/not-found.js"
],
"/[uid]/page": [
"static/chunks/webpack.js",
"static/chunks/main-app.js",
"static/chunks/app/[uid]/page.js"
],
"/work/[uid]/page": [
"static/chunks/webpack.js",
"static/chunks/main-app.js",
"static/chunks/app/work/[uid]/page.js"
]
}
}
New manifest
{
"pages": {
"/page": [
"static/chunks/webpack.js",
"static/chunks/main-app.js",
"static/chunks/app/page.js"
],
"/layout": [
"static/chunks/webpack.js",
"static/chunks/main-app.js",
"static/css/app/layout.css",
"static/chunks/app/layout.js"
],
"/loading": [
"static/chunks/webpack.js",
"static/chunks/main-app.js",
"static/chunks/app/loading.js"
],
"/not-found": [
"static/chunks/webpack.js",
"static/chunks/main-app.js",
"static/chunks/app/not-found.js"
],
"/work/[uid]/page": [
"static/chunks/webpack.js",
"static/chunks/main-app.js",
"static/chunks/app/work/[uid]/page.js"
],
"/_not-found/page": [
"static/chunks/webpack.js",
"static/chunks/main-app.js",
"static/chunks/app/_not-found/page.js"
]
}
}
The whole project is located under a /src/ folder as it was suggested in a prismic starter kit. Below is the file structure and if I understand the error I can see in the manifest, then next can’t find the /[uid]/page.
src/
└── app/
├── [uid]/
│ └── Page.tsx
├── api/
├── slicesimulator/
├── work/
│ └── [uid]/
│ └── page.tsx
├── Footer.tsx
├── Header.tsx
├── layout.tsx
├── loading.tsx
├── not-found.tsx
└── page.tsx
I first thought it was related to Eslint which I had to updated on my server, but I suspect that is not the case, and I know that it all worked fine on the following setup.
├── eslint-config-next@14.2.35
├── eslint@8.57.0
├── next@14.2.35
If anyone can see a clear error in what is shared, please suggest what I can do differently.
