CODEWITHSUNDEEP
reactjsnext.js
strangeQuirks
strangeQuirks

Reputation: 5920

NextJS routing doesnt work when deployed but works when using my local server

I have the following url:

/job/engineer_123456/edit/abcde

Now when I run my local server: npm run dev ("next src/") then when i go to that link it works. However when I deploy my project (to firebase) then I get a 404 from that url.

I have a feeling there is a clash in the routing as my NextJS page directory structure looks like this /job is under pages):

enter image description here

Could it be that on production for some reason, when I go to that link, i am going to /job/[job].js instead of /job/[job]/edit/[editId].js

I am really confused why production shows a 404 page but locally it works.

Upvotes: 7

Views: 8589

Answers (1)

helrabelo
helrabelo

Reputation: 551

According to the documentation:

Predefined routes take precedence over dynamic routes, and dynamic routes over catch all routes. Take a look at the following examples:

pages/post/create.js - Will match /post/create

pages/post/[pid].js - Will match /post/1, /post/abc, etc. But not /post/create

pages/post/[...slug].js - Will match /post/1/2, /post/a/b/c, etc. But not /post/create, /post/abc

*Pages that are statically optimized by Automatic Static Optimization will be hydrated without their route parameters provided, i.e query will be an empty object ({}).

After hydration, Next.js will trigger an update to your application to provide the route parameters in the query object.*

So, you need to have something like:

pages - folder
    job - folder
        [...slug] - folder
            - index.js
            edit - folder
                - index.js

the slug folder will act as a "template" for all /job/[slug] routes which will have an index.js and also an edit page

Upvotes: 6

Related Questions