For anyone working with the latest version of next.js more specifically next.js 15 or above will now need to know that all dynamic API's are asynchronous, thus for any operation requiring accessing the fields of the params or searchParms needs to be handled as an asynchronous operation. Example: Before: function ProductID({ params, }: { params: { productId: number } }) { const { productId } = params return Product ID: {productId} } export default ProductID After: async function ProductID({ params, }: { params: { productId: number } }) { const { productId } = await params return Product ID: {productId} } export default ProductID you will now need to await the params object as well.
Outstanding tutorial! I first watched the lessons and now watching a second time while coding in parallel. Thanks for developing such exceptional content.
Thanks so much❤ I’d moved so quickly to astro (ssr) a couple years ago, but now I have a next.js project, so I really appreciate your presentation style and the content to get me up to speed.
Wow. Amazed by the content you provided in 7 minutes. I must have tried to learn about dynamic routes from so many resources, never quite understood it until now.
Damn THIS was too good, it helps me a lot i was searching for this type of content but everyone just explained it in a more difficult way , anyway it was damn good to understand the basics of the dynamic routes. Thanks a lot..
actually bro is explaining very good... those who took 2 hours for this.. they are paid courses.... their goal is only to take money.... nextjs course... then nextjs advanced course... then nextjs project learning course etc..... that's why they are taking 2 hours on this.... bcz if they teach everything in one course who will buy second...
@@mzohaib27 imo paid courses are very focused on giving EVERYTHING the good bad and ugly, the useful, useless and good to know, so they are not time efficient but definitely worth it, at least the good ones some things they tend to over explain which why i watch channels like this, straight to the point
Thank you! Where did you find it? There is no this info in documentation I think. Only with the help of your video I managed to finally do dynamic routes ( params especially are never mentioned in documentation, or I am stupid I don;t know)
Hey Codevolution & watchers, In your dynamic routes we're using params. Is there any difference to your usage and type declaration compared to NextJS useParams für dynamic routes? In their docs they create a variable with const params = useParams (and import it). Thanks for your videos!
thank you so much ! i was struggling with NextJs router specially with the 14.0 version because we're not using the folder "pages" anymore if i get it right.
If someone gets an error, the id does not appear in the text on the page or next shows an error, check whether you wrote the ID correctly in the ProductId folder. In the folder name, the first letter I must be capitalized product Id
Sir, words can not express our appreciation to your short and fully concised tutorial, we are very grateful for this. i watched a 3 hours tutorial but couldnt understand fully but yours of less than 10 mins i feel like a pro in this thank you so much for all you do sir❤❤❤
Thanks for the lecture. I have a doubt. How can I add a check so that only if the productId is a number, I navigate to the right page. But if the user enters something like product/temp it does not navigate to the productid page
well, lets say you are searching for that id in the database and returning its properties, then yuo can do a conditional rendering to see if your api returned the data or returned a 404 error!
But what happen of we try to access a outOfRange dynamic route? Do we need to build that logic so if a user is trying to go to /[100] but we only have 50 resources? Or will nextJS render a 404 - not found?
Why when im ussing output: export I got the error "Page "/[ID1]/[ID2]" is missing "generateStaticParams()" so it cannot be used with "output: export" config." ??? I dont have all possible values to ID2 and ID2 to generateSTtaicParams
For me it didn't work as it didn't display the product ID after 'Details about product'. For anyone having the same issue first thing to check is that the folder is named [productId], mine was [productID] and it couldn't match/find the page. So the big lesson here is that next.js is case-sensitive. The only way I could work out how to debug it was to use postman and look at the actual response from the server which contained the following content (buried in a HTML tag) "{\"children\":[\"Details about product \",\"$undefined\"]}] 5:[\"productID\",\"1\",\"d\"] 7:D{\"name\":\"RootLayout\",\"env\":\"Server\"} 8:D{\"name\":\"NotFound\",\"env\":\"Server\"} 8:[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}" In other words the server simply returned 200 = OK as a status on a 404 page. I'm guessing this type of issue is handled in a later video?
I have this created this file structure in Next js version ->14 project\[[id]] Inside page.tsx I have this code-> 'use client'; import PathwayContainer from '@/components/Pathways/PathwayContainer'; const PathwayPage = () => { const clientID = '06375fa6-999a-46a8-9d80-12e41e76aa52'; return ( ); }; export default PathwayPage; This clienID I would fetch from useselector later as of now i keep code like this. and this is the component for PathwayContainer. 'use client'; interface IPathwayContainerProps { fetchClientProjects: (clientId: string) => Promise; clientID: string; } const PathwayContainer: FunctionComponent = (props) => { const { fetchClientProjects, clientID, } = props; const [loading, setLoading] = useState(false); const [activeProjectList, setActiveProjectList] = useState([]) useEffect(() => { const getActiveProjectList = async () => { try { setLoading(true); const projectInfo = await fetchClientProjects(clientID); setActiveProjectList(projectInfo); } catch { } finally { setLoading(false); } } getActiveProjectList(); }, [clientID]) return ( {activeProjectList.map((activeProject, index) => (
{activeProject.name}
))}
); }; export default connect(() => ({}), { fetchClientProjects: actions.clients.fetchClientProjects, })(PathwayContainer); whevaver user clcik on this link which i have crated using clientID is not changed but my useeffect code runs again and again whenver user click on links. same code works fine in react. How can i solve this issue.please help.
![Dynamic routing in Nextjs | how to use [id] |Step-by-Step Guide| #nextjs #coding](/img/n.gif)
For anyone working with the latest version of next.js more specifically next.js 15 or above will now need to know that all dynamic API's are asynchronous, thus for any operation requiring accessing the fields of the params or searchParms needs to be handled as an asynchronous operation.
Example:
Before:
function ProductID({
params,
}: {
params: {
productId: number
}
}) {
const { productId } = params
return Product ID: {productId}
}
export default ProductID
After:
async function ProductID({
params,
}: {
params: {
productId: number
}
}) {
const { productId } = await params
return Product ID: {productId}
}
export default ProductID
you will now need to await the params object as well.
thanks brother !!
Was searching for the solution
@MAR-kh4ed you're welcome😄
thanx bro
@@xboy2374 you're welcome
Outstanding tutorial! I first watched the lessons and now watching a second time while coding in parallel. Thanks for developing such exceptional content.
Vishwas is a gifted teacher and educator. You are a gift to mankind dear Vishwas.
Thanks so much❤ I’d moved so quickly to astro (ssr) a couple years ago, but now I have a next.js project, so I really appreciate your presentation style and the content to get me up to speed.
Thanks. I'm following this course as soon as they drop. Promise to finish it with you. This is great
so as you might finished this could you tell me how is this
Wow. Amazed by the content you provided in 7 minutes. I must have tried to learn about dynamic routes from so many resources, never quite understood it until now.
Thanks! This cleared up what my instructor meant by dynamic routes, I didn't get it in class.
Your explanations are top notch
Am following the series thanks for breaking this down to this level
this course helps me very much. you are the best instructor
Gold mine of a course😭❤
Thanks for your guides. Exactly what I wanted to render!
Damn THIS was too good, it helps me a lot i was searching for this type of content but everyone just explained it in a more difficult way , anyway it was damn good to understand the basics of the dynamic routes. Thanks a lot..
Great tutorial. Very comprehensive.
great tutorial video, my first day learning your course!!
תודה רבה, הסבר ענייני ומקצועי. 👍
THIS HELPED SO MUCH! Thank you 🫡
Thank you for step-by-step tutorial, very helpful
Thank you brother for such amazing content
explanation is so good.And it seems like john the don it teaching.
You are doing a great and wonderful job. Nice teaching
Thanks u so much step by step , it's very helpful
I am going to finish this series with you 🙌
Those who are wondering where the params come from. The folder name [productId] will pass as a params in page.tsx file of the same folder.
bro explained a 2 hours lecture in 7 mins
no
actually bro is explaining very good... those who took 2 hours for this.. they are paid courses.... their goal is only to take money.... nextjs course... then nextjs advanced course... then nextjs project learning course etc..... that's why they are taking 2 hours on this.... bcz if they teach everything in one course who will buy second...
@@mzohaib27 imo paid courses are very focused on giving EVERYTHING the good bad and ugly, the useful, useless and good to know, so they are not time efficient but definitely worth it, at least the good ones
some things they tend to over explain which why i watch channels like this, straight to the point
You are doing a great and wonderful job!
Thank you! Where did you find it? There is no this info in documentation I think. Only with the help of your video I managed to finally do dynamic routes ( params especially are never mentioned in documentation, or I am stupid I don;t know)
Hey Codevolution & watchers,
In your dynamic routes we're using params. Is there any difference to your usage and type declaration compared to NextJS useParams für dynamic routes? In their docs they create a variable with const params = useParams (and import it). Thanks for your videos!
Bro, please continue with the series.
Well explained 👍🏻👍🏻
Thank you so much for the guide! ❤
you are a genius bro, thaks
Thank you very much Sir!
Thank you so much. Short and precise, extremely helpful!
Just Awesome. Thanks for this.
so useful teaching! Thanks
Thank you.
thank you so much ! i was struggling with NextJs router specially with the 14.0 version because we're not using the folder "pages" anymore if i get it right.
What if I need some pattern like this a-to-b-journey. where a and b can be anything. would having a folder with name [src]-to-[des]-journey works?
Thank you sir
Does this work with js also?
It renders only the "404 page not found" component in my case
Yeah, I'm having the same problem.
Great tutorial!!
Amazing
why do we destructure params in paramerters of function component?
certainly u are the best.
Amazing!
Thanks bro! You are so cool!
If someone gets an error, the id does not appear in the text on the page or next shows an error, check whether you wrote the ID correctly in the ProductId folder. In the folder name, the first letter I must be capitalized product Id
Thanks mate
Wonderful, keep going
i only tought the only way to get the paramd is using hooks , i didnt know about params ; thank you
Sir, words can not express our appreciation to your short and fully concised tutorial, we are very grateful for this. i watched a 3 hours tutorial but couldnt understand fully but yours of less than 10 mins i feel like a pro in this
thank you so much for all you do sir❤❤❤
Thank you!
Thanks
Very useful, thanks ;)
Thanks 🙂
Thanks for the lecture. I have a doubt. How can I add a check so that only if the productId is a number, I navigate to the right page. But if the user enters something like product/temp it does not navigate to the productid page
import useRouter, then destructure your dynamic id, and check for this whether is number using Number.isInteger(), if not redirect to another url
will it work on build?
Thanks ✨✨
Dynamic routs information start at minute 4:00 all previously said is not dynamic routes.
NICE video
love it
how to do it programmatically
This video must be accepted by official docs
with dynamic routes i could't able to make build with static export can anyone help me with this
How I can get id in nested component?
Saviour
why my params.productID is showing undefined in console.log
I have question while deploying in next js 14 with app router (Dynamic Route) it's not supported. Do you know any way?
I also have the same problem, have you found a solution?
Same here
waiting for next pieces
How do you handle 404 page for dynamic routes
well, lets say you are searching for that id in the database and returning its properties, then yuo can do a conditional rendering to see if your api returned the data or returned a 404 error!
my layout is not working in productId, do u know why?
where's _app module in newest next.js version?
seems using typescript is a hassle
My VS Code doesn't automatically format my code when I save the file like yours does... Is that an extension you're using?
You can use and configure prettier for that
But what happen of we try to access a outOfRange dynamic route? Do we need to build that logic so if a user is trying to go to /[100] but we only have 50 resources? Or will nextJS render a 404 - not found?
u need to manually redirect it to not found else it will still attempt to show the page
Thanks a lot
what;s this error in console Warning: Extra attributes from the server: cz-shortcut-listen
best
But NextJs docs says folder name should be like this: pages/products/[id].js.
You’re using the pages router. You should be using the app router. You’re looking at the wrong docs
waiting more videos
Why when im ussing output: export I got the error "Page "/[ID1]/[ID2]" is missing "generateStaticParams()" so it cannot be used with "output: export" config." ??? I dont have all possible values to ID2 and ID2 to generateSTtaicParams
I'm getting the same issue, were you able to solve it?
@@EzequielGrigolatto-lg6mz the """"fix""" is downgrad tô 13.4.9 , apparently next 14 release with this bug but never fixed
@@gabrielsouza4483 thanks for your quick answer! unfortunately downgrade next version is not possible on my case, I'll look for other options then
@@EzequielGrigolatto-lg6mz I tried almost everything , almost for two weeks, but if u find a solution tell me
GoodJob!
bestia animal idolo
😊
fuckin amazing, thank you
isn't TypeScript a waste of time ?
The voice is AI. I am sure.
nah he is just Indian 🤣🤣🤣🤣🤣🤣
BRO, you've been repeating the same thing in the last 3 videos
respect sir
For me it didn't work as it didn't display the product ID after 'Details about product'. For anyone having the same issue first thing to check is that the folder is named [productId], mine was [productID] and it couldn't match/find the page.
So the big lesson here is that next.js is case-sensitive.
The only way I could work out how to debug it was to use postman and look at the actual response from the server which contained the following content (buried in a HTML tag)
"{\"children\":[\"Details about product \",\"$undefined\"]}]
5:[\"productID\",\"1\",\"d\"]
7:D{\"name\":\"RootLayout\",\"env\":\"Server\"}
8:D{\"name\":\"NotFound\",\"env\":\"Server\"}
8:[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}"
In other words the server simply returned 200 = OK as a status on a 404 page.
I'm guessing this type of issue is handled in a later video?
If you used your common sense you’d know that js is a case sensitive language.
I have this created this file structure in Next js version ->14
project\[[id]]
Inside page.tsx I have this code->
'use client';
import PathwayContainer from '@/components/Pathways/PathwayContainer';
const PathwayPage = () => {
const clientID = '06375fa6-999a-46a8-9d80-12e41e76aa52';
return (
);
};
export default PathwayPage;
This clienID I would fetch from useselector later as of now i keep code like this.
and this is the component for PathwayContainer.
'use client';
interface IPathwayContainerProps {
fetchClientProjects: (clientId: string) => Promise;
clientID: string;
}
const PathwayContainer: FunctionComponent = (props) => {
const {
fetchClientProjects,
clientID,
} = props;
const [loading, setLoading] = useState(false);
const [activeProjectList, setActiveProjectList] = useState([])
useEffect(() => {
const getActiveProjectList = async () => {
try {
setLoading(true);
const projectInfo = await fetchClientProjects(clientID);
setActiveProjectList(projectInfo);
}
catch {
}
finally {
setLoading(false);
}
}
getActiveProjectList();
}, [clientID])
return (
{activeProjectList.map((activeProject, index) => (
{activeProject.name}
))}
);
};
export default connect(() => ({}), {
fetchClientProjects: actions.clients.fetchClientProjects,
})(PathwayContainer);
whevaver user clcik on this link which i have crated using clientID is not changed but my useeffect code runs again and again whenver user click on links. same code works fine in react. How can i solve this issue.please help.
You are doing a great and wonderful job!
I have question while deploying in next js 14 with app router (Dynamic Route) it's not supported. Do you know any way?
Thanks a lot
Thanks