SOLVED
At the beginning of my project, I was considering using internationalization for translating the pages. In the next.config.js file, there are some configurations for internationalization like the one below that caused issues:
//next.config.js
const nextConfig = {
i18n: {
locales: ["en-US", "tr-TR", "ru-RU"],
defaultLocale: "tr-TR",
},
...
}
I'm a newcomer to Next.js and have an app with App router (the one where the pages exist in the src/app folder).
When fetching all blog posts from /blog-posts and a single blog post from /blog-posts/example-name dynamic route, everything worked fine in localhost during development. However, after deploying the app on Vercel, it only fetched all blog posts on the /blog-posts page. When navigating to /blog-posts/example-name, it displayed a 404 page and showed "Failed to load resource" error in the console. The Vercel logs didn't provide any insight into the issue.
To give you more context, here is the link to the last deployment:
I followed the fetching guidelines as per Next docs: The fetch function used:
async function getData() {
const res = await fetch("https://*backendurl*/api/getBlogPosts");
if (!res.ok) {
// This will activate the closest `error.js` Error Boundary
throw new Error("Failed to fetch data");
}
return res.json();
}
and I called the function on the page:
const data = await getData();
Vercel deployment build logs (with { cache: 'no-store' } option):
Route (app) Size First Load JS
┌ ○ / 0 B 0 B
├ λ /blog-yazilari 315 B 84.1 kB
├ λ /blog-yazilari/[slug] 536 B 84.3 kB
├ ○ /favicon.ico 0 B 0 B
└ ○ /magaza 135 B 77.8 kB
+ First Load JS shared by all 77.7 kB
├ chunks/769-f274f40a4e22dc69.js 25.2 kB
├ chunks/bce60fc1-5c8e6a0bf302e824.js 50.5 kB
├ chunks/main-app-6118df2562cf8b41.js 216 B
└ chunks/webpack-753df88ab1dee99a.js 1.75 kB
Route (pages) Size First Load JS
─ ○ /404 182 B 75.5 kB
+ First Load JS shared by all 75.4 kB
├ chunks/framework-8883d1e9be70c3da.js 45 kB
├ chunks/main-c4daa89c94afb7ed.js 28.4 kB
├ chunks/pages/_app-998b8fceeadee23e.js 195 B
└ chunks/webpack-753df88ab1dee99a.js 1.75 kB
λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
○ (Static) automatically rendered as static HTML (uses no initial props)
There are no references to the blog posts page in ISR functions:
favicon.ico
Node.js 18.x
7.5 MB
IAD1
index
Node.js 18.x
7.5 MB
IAD1
index.rsc
Node.js 18.x
7.5 MB
IAD1
magaza
Node.js 18.x
7.5 MB
IAD1
magaza.rsc