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

Question

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):

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.

huh? what has that got to do with this?

strangeQuirks
– strangeQuirks

2020-11-27 09:28:47 +00:00
Commented Nov 27, 2020 at 9:28 — strangeQuirks
– strangeQuirks, Commented Nov 27, 2020 at 9:28

helrabelo · Accepted Answer · 2020-11-27 13:24:04Z

6

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

answered Nov 27, 2020 at 13:24

helrabelo

5514 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

strangeQuirks Over a year ago

The results then in Error: Catch-all must be the last part of the URL.

helrabelo Over a year ago

Sorry, as a matter of fact, since you need the editID, you should have [...slug.js] inside your edit folder! That would catch all IDs, and index.js would be, ideally, the index page with all the objects

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related