Next.js Discord

Discord Forum

ISR dynamic route /blog/[slug] returns 404 on Vercel, but works locally

Answered
Long-legged ant posted this in #help-forum
Open in Discord
Long-legged antOP
I'm not sure why its erroring, and i can't figure out how to find logs on vercel either. I'm really at a loss for how to fix this.
Answered by joulev
looks like an issue of the i18n config option
View full answer

24 Replies

@Long-legged ant I'm not sure why its erroring, and i can't figure out how to find logs on vercel either. I'm really at a loss for how to fix this.
joulev
for logs, you can view it here
but you provided too little information for anyone to know what's wrong
Long-legged antOP
we cannot help from this much information
Long-legged antOP
copy pasting the whole file is an issue too.

My route was working on next 13 on pages on vercel, but when i migrated to next app 13, things failed.

My file path:
/app/blog/[slug]/page.tsx
export default async function Post({ params }: { params: { slug: string } }) {
  const { post, source, tocSource } = await getContent(params.slug);

  return (
    <Page pageName="Blog" title={post.title} description={post.subtitle}>
      <Suspense fallback={<div>Loading...</div>}>
        <BlogContent post={post} source={source} tocSource={tocSource} />
      </Suspense>
    </Page>
  );
}

export async function generateStaticParams() {
  const posts = getAllPosts(["slug"]);
  return posts.map((post) => {
    slug: post.slug;
  });
}


This works to load when i run npm run dev. The routes resolve correctly.

However, on vercel, the pages return 404, and i cant see any logs for what is 404ing. Is this the route not existing?

The npm run build / vercel build shows ISR route for /blog/[slug], but it's not "catching" the paths
getContent uses fs to read -- is this allowed on Vercel ISR functions?
I was converting from something that had getstaticprops, and im trying to figure out how to, ideally, at compile time, statically compile the props for this page.
Long-legged antOP
yes
it does say 
- warn Entire page /blog/[slug] deopted into client-side rendering. https://nextjs.org/docs/messages/deopted-into-client-rendering /blog/[slug]
when browising to it, via the npm start version
but it still works, and doesn't 404
joulev
well i need a minimal reproduction repository then
this looks fine to me, except for the export const dynamicParams which you may want to set it to false (= fallback: false) rather than the default true (= fallback: blocking)
Long-legged antOP
so I just made some headway, im curious what you think of this / if this is a clue towards something.

By adding suspense in my layout
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <Suspense>
          <Providers>{children}</Providers>
        </Suspense>
      </body>
    </html>
  );
}


I have now reproduced the difference, npm run dev lets me go to the pages, npm run build && npm run start gives me a 404.
joulev
Just make a minimal reproduction repository, this is not enough for me to debug anything
Long-legged antOP
Here is a minimal repro repo
https://github.com/bluecoconut/nextjs-app-router-isr-test/tree/main

In here, i can run npm run dev and browse to localhost:3000/blog/a and it works. also npm run build -> shows the route
Route (app)                                Size     First Load JS
┌ ○ /                                      0 B                0 B
└ ● /blog/[slug]                           155 B          77.8 kB
    ├ /blog/a
    â”” /blog/b

however, npm run start, and browsing to localhost:3000/blog/a reuslts in a 404.
joulev
looks like an issue of the i18n config option
Answer
joulev
it's known to be incompatible with app dir
Long-legged antOP
okay, can confirm -> removing the i18n config option and now it works.
Tbh, i have no idea what that means for me, is there anything i should be worried about removing that?
also, second question, how could you tell that was the error? just knowing how the build works / looking for known incompatabilities? or, is there something in logs or something that would have tipped me off that this was the spot to look?
@Long-legged ant okay, can confirm -> removing the i18n config option and now it works. Tbh, i have no idea what that means for me, is there anything i should be worried about removing that? also, second question, how could you tell that was the error? just knowing how the build works / looking for known incompatabilities? or, is there something in logs or something that would have tipped me off that this was the spot to look?
joulev
Tbh, i have no idea what that means for me, is there anything i should be worried about removing that?
obviously if your app relies on i18n in the pages router, this means that no longer works. otherwise there aren't any effects

also, second question, how could you tell that was the error? just knowing how the build works / looking for known incompatabilities? or, is there something in logs or something that would have tipped me off that this was the spot to look?
i already knew in advance that next.config.mjs i18n doesn't play well with the app router. combined with the fact that the code for your dynamic route looks perfectly fine, i can say with a high confidence that i18n might be the issue (and indeed it is)
Long-legged antOP
huh, well anyways -- i successfully deployed to vercel and it works now.
Thanks 🙏
joulev
you're welcome
Spectacled bear
Had same problem. It was a nightmare to debug, it gives no errors. The logs have nothing useful. This problem really needs some error logs.