Next.js Discord

Discord Forum

How do I make routing system like this

Unanswered
Harrier posted this in #help-forum
Open in Discord
HarrierOP
For this route:
www.example.com/blog/12345/this-is-a-test
I have this folder structure in the app/ directory:
app/
  blog/
    [id]/
      [title]/
        page.tsx


From the blog/[id]/[title]/page.tsx file, I have access to both the id and title. Using the id, I can fetch and display some data. No problem, I don't need to use the title. The title is for SEO purposes, and I want to be able to change the title in the URI to the actual title of the resource after being fetched using id.

I want the routes to work in a way that:
- Visiting www.example.com/blog/12345 should redirect to www.example.com/blog/12345/this-is-a-test. Right now, it's a 404 error cuz there's no page.tsx under [id] directory.
- Visiting www.example.com/blog/12345/this-a-some-random-text-blahblahblah should also redirect to www.example.com/blog/12345/this-is-a-test. The correct blog is always fetched using id, and the title of the blog is set as the second parameter.

How do I achieve this? I may have to change the folder structure, but I'm not sure.

8 Replies

@Sohel Shekh Make page.tsx in [id]/ and then in that redirect to /134/dummytext
HarrierOP
But to redirect to /132/my-title-here, I need to fetch the title from the database using the id.
That would be inefficient?
Sohel Shekh
aah actually i mean that in [title]/page.tsx you change the url
Ig i have seen that but can't remeber where so what I am saying is from id you redirect to any "dummytext" title and then in [title]/page.tsx change it to actual

not sure it will work or not
Or you could do is, I assume that you are having some kind of State Management, so in [id] query the db and save the api data in state and then in [title] if api data exists in state then use that or else fetch new using id and after set state back to null
And taking about your second point which is 
/1234/blahblah
to 
/1234/actual-title

after fetching the actual data in 
[title]/
just cross check if title is same if not then redirect to 
/1234/actual-title
HarrierOP
Thank you for your answers. It helped a lot!
@Harrier Thank you for your answers. It helped a lot!
Sohel Shekh
Oh, which one you finally considered?
@Sohel Shekh Oh, which one you finally considered?
HarrierOP
My goal is to make the minimal amount of requests to the database as well as minimal amount of redirects. Here's what I've finally decided.

My folder structure:
app/
  blog/
    [id]/
      [[...slug]]/
        page.tsx

This structure handles requests for:
- blog/12345
- blog/12345/
- blog/12345/some-dummy-text-unrelated-to-blog
- blog/12345/actual-title-of-blog (this one directly fetches the page; no redirects. The rest does some redirects)

In my page.tsx:
1. First, getting only the title of the blog using the id.
- to check if the id is actually valid and a blog with that id exists in the database. Else I can throw an error page.
- to get the title to redirect to the correct URI. If user types blog/12345/some-dummy-text or blog/12345 then I can actually redirect to blog/12345/actual-title-of-blog from there. For this I need the title.
2. Get the title from the URI.
- This is params.slug[0], the first parameter of the optional slug.
3. Check if there is a title in the URI params (not null), also check if the blog's title (fetched on first step) is equal to the title in URI params.
- If not, redirect to correct one. All other combinations of URI gets redirected to blog/12345/actual-title-of-blog.
4. Finally, fetch all the fields from the Blog using the id. After all the checks above, this will only run on blog/12345/actual-title-of-blog
5. Render blog.

All cool.
2 things still bothers me:
- I'm fetching the title once first, and then fetching all the fields. Title fetched twice, kinda bothering me, what can I do tho idk.
- A request to blog/12345/ gets redirected to blog/12345 and then redirects to blog/12345/actual-title-of-blog. And I don't know why.