Next.js Discord

Discord Forum

Redirecting to a dynamic URL

Unanswered
Nile Crocodile posted this in #help-forum
Open in Discord
Nile CrocodileOP
I have a URL that is /college-football/rankings/[division]/[year]/[week]. I want to be able to redirect a user who goes to lets say /college-football/rankings/fcs/2024 to the latest week that I have rankings for. However, not entirely sure where to put that redirect.

13 Replies

@Nile Crocodile I have a URL that is `/college-football/rankings/[division]/[year]/[week]`. I want to be able to redirect a user who goes to lets say `/college-football/rankings/fcs/2024` to the latest week that I have rankings for. However, not entirely sure where to put that redirect.
I would put it inside your page.tsx where you also get the week. If you would put it inside your middleware, it would be checked for all routes, even if you don't have a week. Also it is a little harder to parse the week from it.

So, check inside your page.tsx where you get the week, if the week is the latest and if so: render, if not: redirect
Nile CrocodileOP
@B33fb0n3 I don’t think that would work I would have to create a page.tsx in the [year] directory in order to redirect. That’s what Next would be trying to render and would result in a 404
@Nile Crocodile <@301376057326567425> I don’t think that would work I would have to create a page.tsx in the [year] directory in order to redirect. That’s what Next would be trying to render and would result in a 404
you can still do something like this:
import {redirect, RedirectType} from "next/navigation";

type PageProps = {
    params: {
        week: string;
    }
}

export default function Page({params: {week}}: PageProps) {
    // todo check if week is the latest
    const latestWeek = // do something to check    

    return redirect(`send/to/latest/${latestWeek}`, RedirectType.replace) // send to latest
}
@Nile Crocodiletried?
@B33fb0n3 you can still do something like this: tsx import {redirect, RedirectType} from "next/navigation"; type PageProps = { params: { week: string; } } export default function Page({params: {week}}: PageProps) { // todo check if week is the latest const latestWeek = // do something to check return redirect(`send/to/latest/${latestWeek}`, RedirectType.replace) // send to latest }
West African Lion
actually I have something similar in my codebase and the redirect works amazingly well when you land on the page, but if you do an hard reload on a sibyl folder you get redirected to the redirect path.

In my case I have this structure:
- project/
    - [projectId]
        - analytics/
        - sources/
        - findings/
    page.tsx


Let's say I land on /project/123 I get redirect to project/123/analytics (assuming that analytics is the URL I will redirect to), the issue pops up if I hard refresh project/123/sources/ I do get redirected to project/123/analytics 😞

There is an approach that will allow me to ignore this file if I am looking for a sub-folder?
West African Lion
you are correct, that's the strange part for me too.

If I land on the page while inside the same session of Next.js I can load the page withhout any issues.

But if I type in my browser project/123/sources/ and press enter, I get redirected to project/123/analytics/

And I am pretty sure that the [projectId] get's loaded because I placed a console.log there 😞
And I am pretty sure that the [projectId] get's loaded because I placed a console.log there 😞
never ever.

Can you provide a repro repo via https://codesandbox.io/ for exmaple?
West African Lion
Never mind, my friend, I am really thankful for your support, but luckily, I figured out where the problem was.

While I was able to read the console.log placed in project/[projectId]/page.tsx the issue wasn't from it, but from different select that I had to build.

Basically speaking, I have a bunch of "filters" that allow the visitor to select different values to organize the data he's seeing. Each select is controlling a slug of the path.

The control I had in place didn't account of the last folder (the page) I was rendering and the router.push I set brought me back to the default page ( project/[projectId]/page.tsx) and from that I was getting redirect to /analytics because that page had a redirect pointing to it.

Seems that now I've been able to solve it, this means that also [the answer you gave to the OP](https://nextjs-forum.com/post/1264717388356653099#message-1264989845181169704) results correct 💪
@Nile Crocodile is your issue resolved like that?
@Nile Crocodile ?
Great golden digger wasp
you can also just use router.push method