1

I have a Next.js page, where the pages are statically generated (using next export). It's a dynamic route, but I will only fetch data on the client after the initial page load (in a useEffect).

The path is something like: /pages/foo/[id].tsx. This is in fact the only route which is going to exist.

My problem is:

  • If I access the URL directly (e.g. typing in https://mysite.fake/foo/1337 into the URL bar) I get a 404.
  • If I navigate to that route using a <Link /> it does work as expected
  • If I then reload the page, I get a 404 again.
  • On local dev, it works fine. The problem only exists when deployed.

The page in question is using the router.query, but I have the same problem with a completely static page (e.g. just /pages/bar/baz.tsx).

Example:

export const Home: NextPage = () => {
    const router = useRouter()
    const { id } = router.query

    const headerText = id ? `Hello ${id.toString()}` : ''
    
    // in a later iteration, I will use the query id to fetch data in a useEffect

    return <h1>{headerText}</h1>
}

As far as I understand from the Next.js documentation on dynamic routing and data fetching this should be possible to do.

My next.config.js is very bare:

/** @type {import('next').NextConfig} */
module.exports = {
    reactStrictMode: true,
}

What am I doing wrong?

Nix
  • 5,746
  • 4
  • 30
  • 51
  • My gut feeling is that you need to find a simple bug somewhere you don't expect it to be. For example, the file `/pages/foo/[id.tsx]` should in fact be `/pages/foo/[id].tsx`. Keep looking :) – 83C10 Sep 30 '21 at 09:18
  • Ah, thanks. That's a typo in my question, I will correct it. However, it also occurs on static routes (e.g. `pages/bar/baz.tsx`), so I don't think it's totally related to the dynamic routing. – Nix Sep 30 '21 at 09:26
  • 2
    Does this answer your question? [Nextjs 404 error on reload/ refresh action](https://stackoverflow.com/questions/62208254/nextjs-404-error-on-reload-refresh-action) – juliomalves Sep 30 '21 at 15:42
  • Did you ever figure it out? Currently stumped on this same issue. – Connor Mooneyhan May 18 '22 at 17:15
  • @ConnorMooneyhan were you able to get this fixed? I am running into the exact same issue. – harishannam Jul 15 '22 at 13:37
  • 1
    @harishannam Yes, I was, sort of. The problem is that if you're generating it statically with `next export`, you can't use dynamic routing out of the box, since there's no active server to rename the route and figure out where it's supposed to route to. If your dynamic routes are based on predefined data, you can use `getStaticPaths`. Check the Next.JS docs for that. If you only infrequently update the data that determines the paths, you can use Incremental Static Regeneration (also in the docs). Those require an active server though, and I'm running serverless, so I had to route client-side. – Connor Mooneyhan Jul 15 '22 at 13:50
  • I can't remember how exactly I solved this, but what @ConnorMooneyhan writes does ring a bell. It's possible that I created a Node server. Unfortunately, I no longer have access to the repo. – Nix Nov 16 '22 at 09:04

0 Answers0