NextJS resolvedUrl is string '/null'

Question

We have:

pages/[providerSlug]/index.ts
pages/account/index.ts

When we visit /account (with no query), this code in [providerSlug]/index.ts gets hit:

export const getServerSideProps = async (context) => {
   console.dir(context)
}

outputs:
  ...
  query: { providerSlug: 'null' },
  resolvedUrl: '/null',
  params: { providerSlug: 'null' },

Two questions:

Why is [providerSlug]/index.ts being hit? Shouldn't only account/index.ts be hit? I tried adding getServerSideProps to account/index.ts as well (it doesn't have it), made no difference.
Where is resolvedUrl & query.providerSlug getting set? I cannot find how this is getting set but it must be in our code somewhere -- what gets hit before getServerSideProps that I should look at?

thanks.

topheman · Accepted Answer · 2021-05-20 22:13:32Z

2

Instead of

pages/[providerSlug]/index.ts
pages/account/index.ts

Set up

pages/[providerSlug].ts
pages/account.ts

/account should now correctly take precedence on /foo

If you ever need to capture /foo/bar you can setup

pages/[providerSlug]/[secondarySlug].ts

or if it's a full slug, you can put an optional catch all route : https://nextjs.org/docs/routing/dynamic-routes#catch-all-routes

answered May 20, 2021 at 22:13

topheman

7,9725 gold badges26 silver badges33 bronze badges

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

Collectives™ on Stack Overflow

NextJS resolvedUrl is string '/null'

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related