Redirecting to a dynamic URL
Unanswered
Nile Crocodile posted this in #help-forum
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 you can use next.js middleware
https://nextjs.org/docs/app/building-your-application/routing/redirecting#nextresponseredirect-in-middleware
https://nextjs.org/docs/app/building-your-application/routing/redirecting#nextresponseredirect-in-middleware
@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
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
In my case I have this structure:
Let's say I land on
There is an approach that will allow me to ignore this file if I am looking for a sub-folder?
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.tsxLet'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 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?
Why would you be redirected, when you land on
/sources? Then the page.tsx from /sources will be loaded and not theone from [projectId]. So the redirect should never be executed, because the user lands on /sources and not on [projectId]. Or am I missing something?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
And I am pretty sure that the
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
Basically speaking, I have a bunch of "filters" that allow the visitor to select different values to organize the data he's seeing. Each
The control I had in place didn't account of the last folder (the page) I was rendering and the
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 💪
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