Next JS tutorial in Hindi #12 Dynamic Routing in next.js 13
ฝัง
- เผยแพร่เมื่อ 5 ก.พ. 2025
- Instragram Id : code.steps
In this next js tutorial video, we learn about common layout in next js 13.4 in Hindi. this course is made by Anil Sidhu in the Hindi language.
points of video
What are Dynamic Routes
Make a folder and file for the Dynamic route
Write Code and Navigation
Get Dynamic Route name.
Interview Question.
The task for you.
What is a dynamic Route?
How to get a dynamic Route name?
github.com/ani...
React js Latest Playlist in Hindi: • React tutorial for beg...
inst id: @code.steps
I struggle to set dynmic routes in my nextjs app after spending hr's if found your video it help also than you so much sir
Happy to help
Task ka solution ka videos bhi banao plz. Kyunki after completing task we can compair.. nice explanation
🎉🎉 you are great sir
the method of explaining is very clear and perfect. just keep going.
Video title card starting awesome and your video content are starsome
Thank you so much 😀
wonderful explanation for each and every part .... just perfect
maja aa rha hai sir thank u for providing us best source of next js
Sir .. Plz upload more next js videos in a day if it is possible... 😇
You are great 😍😍😍😍
Thanks for sharing 🙏
Great explanation
very nice sir
Thanks and welcome
Please Keep uploading and introduce more concepts in depth
no
Brother increase interview questions and what a method of teaching going to be fan ❤🎉
Noted
Thank you so much!!! God bless you
import React from "react";
import Link from "next/link";
const StudentList = () => {
// Create an array of student objects
const students = [
{ id: 1, name: "mona" },
{ id: 2, name: "sony" },
{ id: 3, name: "pally" },
{ id: "bhaiya", name: "bhaiya" },
];
return (
Student List
{/* Use map to dynamically render the student list */}
{students.map((student) => (
{student.name}
))}
);
};
export default StudentList;
"use client";
import Link from "next/link";
export default function StudentList() {
const students = ["Anil", "Sam", "Peter", "Burce"];
return (
Student List
{students.map((user) => {
return {{user}};
})}
);
}
You wrote nicely but instead of "string concatenation", use "temple literal".
@@praphullkumar4594but with temple why that's thing rendering
student
%2B%20usman%7D
Details
and the code is
{myArray.map((index, key) => {
return (
{index}
);
})}
@@mianusman-ah2165 Check href of , you are not written correctly. It should be like this
{index}
U used two unnecessary {}{}
thanks for this
bro jaise react mein state send krte hai navigation time vaise ee main next me kr raha hun but sahi se work ni kr rhi aap uspr v ek video bnaado smj aa jayega uska v fr achhhe se
i just wrote the code as u mentioned but somehow it's showing two console log in a console i don't know why it is happening!..
Thank bhaiya
params.student kyu kiye?
Anil ji I have one question why you have marked component as a use client inside [student] we can do that using server component
When i click "control + u " for source code dynamic path name is not displaying , kindly answer how can display dyanmic things in source code ?
Hi sir one point i don't understand as you create dynamic folder [student] so studentlist how it sense student please answer me thanks.
Sir isko hum backend mai v use kar sakte for extracting id also you haven't covered this
If you click on the student list, you can get the students' names in the path given in the link. How can I get the other details and separate details of the students?
I have make a website using next js and it contain dynamic routing which is working perfecting on localhost but I have uploaded on godaddy and vercel on both routes work but dynamic routes [id] like this not working on live server how to solve it. Is there any configrations for it??
agar mene studentlist se navigate krke link access kie he to student page se kese open hue he, wo clear nhi hua
sir why you are not making videos on app router from beginning as it is recommended by nextjs itself
if i want to make serverside rendering then we cant use use client then how i can get params data
Can I make multiple dynamic routes in the same folder ?
bhaiya agar mera link kise of component k under hai phir kasie route karu yeh toh page.js mai tha suppose page.js k under mai components hai uske under hai links toh kaise hoga routing dynamic useRouter next/nagavation mai hai yeh useRouter next/router mai hai
thx
So studebtLIst/1. this is following the folder name. but If I want to change the route name as dynamic name. like localhost:3000/anil/anil-portfolio or more localhost:3000/shubham/shubham-portfolio. just same like custom URL. then we can't follow the folder system because it will change everytime. how could we do that in nextJs
hello sir,
How can we make flipkart type search bar? In which the text of the search bar is changing automatically.
Confusion:: Anil sir mjhy ye ni smjhy aya apny link sy data studentlist ma rehty hoy studentlist/id ko hi send kiya but apny get usy student component per kiya? Why please reply
@codestepbystep please reply
Ye "Dynamic routing" ka concept he, Jo v data data send karoge link se wo ye [student] segment/folder me automatic catch kar lega, aur iske according data to render/display karwa dega.
@@praphullkumar4594 ok but ye bta skty bro ap k usi component main rehty hoy request usi per send hogi is concept main ?
params can be used without writing 'use client', useParams needs 'use client',
Correct
why name is coming as first letter as lower same as params.If I want to show same name that is there in StudentList how can we do it?
I got an error. Whenever I try to write Component inside a map function i got an error. It says that Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Can you explain this bro.
sir mery pas click karny py name show nhi horha?
1st doubt: can not we make that dynamic path customized, like "studentlist/details/id" ? ,
2nd doubt :If we will use use client to get the id then how we will use dynamic meta data.Dynamic meta data can only be used in Serverside component. So this is not beneficial for SEO.
One doubt sir, is there any way to use search params like "student/?name=' anil '& age= 19 "
You. Can split by ? Or & and can take even value .
Sir counter program bhi bnaiye
How to write each student's self information dynamically. The important question here is how do we make the dynamic page of each student. age, school etc.
need db
Bro nuxt js ke uper bhi video bana do please
sir how can i make 2 or more dashboard with authentication role based?
sir src /app nhi arhi to folder kha banuo
How can i server render dynamic routes data without use client
Is It complete or remaining?
Is It complete or remaining?
Is It complete or remaining?
Is It complete or remaining?
Is It complete or remaining?
Is It complete or remaining?
how you disable fast refresh here.
Is It complete or remaining?
🚔
Maine " use client" use nahi kiya ...fir bhi sahi chal raha ...aisa kyu
Upload the solution of task too
import Link from "next/link";
const EmployeeList = () => {
const employees = [
'nishant', 'nehal', 'nayan', 'naira', 'chetan'
]
return (
Hello EMployee list
{
employees.map((value) => {
return (
{value}
)
})
}
)
}
export default EmployeeList;
me ecommarse mern me bana raha ho product details me multipul image show karna chata hu but with and hight set nhi ho rahai 1st image ke niche 2 image ke niche 3rd image aa rahi hai
import Carousel from "react-material-ui-carousel";
{product.images &&
product.images.map((item, i) => (
))}
12 Dynamic Routing in next.js 13 YE video ka prhaya hua bhi nhi chal raha hy shayad version ki wjha sy esa ho rha hoo Kindly mjhy guide karen .
For the HW :
import Link from "next/link";
export default function StudentList() {
const student = ["anil", "peter", "shark", "sam"];
return (
Student List
{student.map((stud) => (
{stud}
))}
);
}
Why params.Student?
bhaiya ji ye to bataya nhi ki asal me ho kya rha --->
only taking "params" Not taking "param" why?
Reusable component in next.js
vai array to banan nehi atahe oto sikhado please
Is It complete or remaining?
Is It complete or remaining?
Is It complete or remaining?
Is It complete or remaining?
Is It complete or remaining?
Is It complete or remaining?
Is It complete or remaining?
confusion he confusion hy, solution to mila ni, solution jo mila to sala question kia tha pata ni.
Right
meaning about this
[folder_name]
Is It complete or remaining?
Is It complete or remaining?
Is It complete or remaining?
Is It complete or remaining?
Is It complete or remaining?
Bhai 70 se 80 lecture jayega ❤
this code is not working i mean to say that arrow function is not working why?
"use client"
const StudentDetails =({proms})=>{
console.log(proms)
return(
Student details
Name:{proms.student}
)
}
export default StudentDetails;
Use this code
"use client"
import { useRouter } from 'next/router';
import React from 'react'
export default function Slug() {
let router = useRouter()
console.log(router.query);
return (
Slug
)
}
@@piyushtale0001 thanx buddy
Please upload others videos
who is peter?
spider man peter parker :D
I don't see any value for Record for {params.Student}, but appears in console
same here. Can anyone resolve this issue ?
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.