Next.js Discord

Discord Forum

How to mask dynamic url in Next13( with app router)

Unanswered
Himalayan posted this in #help-forum
Open in Discord
HimalayanOP
I need to mask dynamic url for example part with /about/[id] -> to /about/some-readable-text

36 Replies

you dont want people in the browser to see? or..
@alfon wdym mark dynamic url?
HimalayanOP
i want replace dynamic part of url like /about/12 ---> /about/title, i tried with
<Link href='/about/${id}'  as='/about/title' />
but link equal to href only on prefetch where
params = { slug: id}
, when i click on it params change to
params={slug: title} 
i want people to see readable title instead id
well you can just use /about/[titleid]/
change your folder name from [id] to [title]
then your params will have title
console.log(params.title) // title
@alfon well you can just use `/about/[titleid]/`
HimalayanOP
i think it's not my case, now i have structure like this
`about
    page.tsx
    [slug]
       page.tsx`
 

in a slug page i need have id to call api request for data but also i want to keep url as
/about/some-dynamic-text

but now i have
/about/15
HimalayanOP
as i said <Link href={'/about/${id}'} as={'/about/${title_text}'} />
ohh you want to reuse /about/some-dynamic-text/ for API routes?
what
well you can just handle it in the [slug]/page.tsx to detect if its a string or a number
try parseInt(params.slug) and catch, if its an int do A, if its a string do B
HimalayanOP
I think it's a little different from what I want: i just need to change url in browser withoud rerender but still needthe id
@Himalayan i want people to see readable title instead id
if you want people to see readable title instead of id
why not just put
<Link href='/about/${id}'>{title}</Link>
so that it display like

some-dynamic-text -> on click, go to /about/15
@alfon if you want people to see readable title instead of id why not just put <Link href='/about/${id}'>{title}</Link>
HimalayanOP
yeah but they will redirect to page where url of page will smth about/3
but i need to change url in slug page not in parent
ah so you also want it to display /about/some-dynamic-text AFTER clicking?
HimalayanOP
yeah
i dont think thats supported in the new app dir, its undocumented :/
perhaps you can make do with rewrite() on middleware.ts
HimalayanOP
yes, thats why i'm here
something like this
@alfon perhaps you can make do with rewrite() on middleware.ts
HimalayanOP
hm, looks appropriate
can i pass dynamic param here? in request
good point :/
im not sure you can and if you can it would be expensive/costly for middleware
since you need to find out what 1, whats 2, whats 3 etc
HimalayanOP
ok, i will try and come back with result
there is this too
so if you hit an API you can just told the browser to rewrite lol