Next JS tutorial in Hindi #12 Dynamic Routing in next.js 13

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/anil-sidhu/next.js...
React js Latest Playlist in Hindi: • React tutorial for beg...
inst id: @code.steps

[@jayashreedas5931]

"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}}; })} ); }

[@praphullkumar4594]

You wrote nicely but instead of "string concatenation", use "temple literal".

[@mianusman-ah2165]

@@praphullkumar4594but with temple why that's thing rendering student %2B%20usman%7D Details and the code is {myArray.map((index, key) => { return ( {index} ); })}

[@praphullkumar4594]

@@mianusman-ah2165 Check href of , you are not written correctly. It should be like this {index}

[@AkSingh-hd9vg]

U used two unnecessary {}{}

[@pradnyamohite2096]

Task ka solution ka videos bhi banao plz. Kyunki after completing task we can compair.. nice explanation

[@user-dr6qw4mz5v]

the method of explaining is very clear and perfect. just keep going.

[@madhavbiradar2029]

wonderful explanation for each and every part .... just perfect

[@joeldavidmauriciohdez3470]

Thank you so much!!! God bless you

[@DeepakKumar-oz5ky]

maja aa rha hai sir thank u for providing us best source of next js

[@web-dev.ashishk]

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

[@codestepbystep]

Happy to help

[@Codstom]

You are great 😍😍😍😍

[@TechieDoctor]

Sir .. Plz upload more next js videos in a day if it is possible... 😇

[@BeymOsman_edits]

Thanks for sharing 🙏

[@abhitripathi]

Please Keep uploading and introduce more concepts in depth

[@rajantala]

no

[@royvivek5098]

Great explanation

[@ajithraj8441]

Video title card starting awesome and your video content are starsome

[@codestepbystep]

Thank you so much 😀

[@affankhan3563]

Brother increase interview questions and what a method of teaching going to be fan ❤🎉

[@codestepbystep]

Noted

[@whatgadget49]

thanks for this

[@gunx-men8576]

Thank bhaiya

[@weforyouweb1165]

Anil ji I have one question why you have marked component as a use client inside [student] we can do that using server component

[@myselfkartikey]

params can be used without writing 'use client', useParams needs 'use client',

[@AkSingh-hd9vg]

Correct

[@codeozz]

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.

[@brogamer3397]

need db

[@thetraveltribes]

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

[@user-lp5wm3zs8n]

Can I make multiple dynamic routes in the same folder ?

[@user-wv3nl8yr7h]

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??

[@malikbhai2285]

very nice sir

[@codestepbystep]

Thanks and welcome

[@Malik-Muhammad-Ali]

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.

[@jitendrakumar-yz2yz]

hello sir, How can we make flipkart type search bar? In which the text of the search bar is changing automatically.

[@syedabdulsamadahsan2774]

Reusable component in next.js

[@vintagemedi]

Sir counter program bhi bnaiye

[@dilpavittarpalsingh9088]

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

[@PlanetSachin]

Sir isko hum backend mai v use kar sakte for extracting id also you haven't covered this

[@doctoronline461]

sir why you are not making videos on app router from beginning as it is recommended by nextjs itself

[@AamiTomakeBhaloBasi]

if i want to make serverside rendering then we cant use use client then how i can get params data

[@codinghub73]

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?

[@faizanetaajushshariah7531]

When i click "control + u " for source code dynamic path name is not displaying , kindly answer how can display dyanmic things in source code ?

[@funnycoder_op_7812]

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

[@souvikkumarbarua5557]

Bro nuxt js ke uper bhi video bana do please

[@user-qk9cq8sx2v]

sir how can i make 2 or more dashboard with authentication role based?

[@developerjk]

How can i server render dynamic routes data without use client

[@DSA_Javascript]

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?

[@mrluffy2212]

Upload the solution of task too

[@629_nishantghadigaonkar3]

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;

[@user-xz8kn8gk5i]

Hi sir one point i don't understand as you create dynamic folder [student] so studentlist how it sense student please answer me thanks.

[@shoaibkhan-mw3pw]

One doubt sir, is there any way to use search params like "student/?name=' anil '& age= 19 "

[@rmt0858]

You. Can split by ? Or & and can take even value .

[@dishantsingh8766]

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!..

[@uttammarakana2706]

meaning about this [folder_name]

[@buntyswain]

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.

[@074_jayparkhiya5]

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?

[@AKvLogs-gb3cu]

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

[@AKvLogs-gb3cu]

@codestepbystep please reply

[@praphullkumar4594]

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.

[@AKvLogs-gb3cu]

@@praphullkumar4594 ok but ye bta skty bro ap k usi component main rehty hoy request usi per send hogi is concept main ?

[@garimasharma8890]

agar mene studentlist se navigate krke link access kie he to student page se kese open hue he, wo clear nhi hua

[@074_jayparkhiya5]

Is It complete or remaining? 🚔

[@sourabhlodhi1675]

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) => ( ))}

[@rikki7663]

how you disable fast refresh here.

[@user-qb8ny8qt1d]

Please upload others videos

[@mubashiribrahim6171]

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 .

[@React1007]

params.student kyu kiye?

[@AkSingh-hd9vg]

Maine " use client" use nahi kiya ...fir bhi sahi chal raha ...aisa kyu

[@krishnchoudhari]

only taking "params" Not taking "param" why?

[@user-ul8sv2ud8q]

vai array to banan nehi atahe oto sikhado please

[@Nilankar_labs]

bhaiya ji ye to bataya nhi ki asal me ho kya rha --->

[@kashif2niazi]

who is peter?

[@codestepbystep]

spider man peter parker :D

[@AfzaalKhalid-ox3pw]

confusion he confusion hy, solution to mila ni, solution jo mila to sala question kia tha pata ni.

[@yogita868]

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.

[@yogeshbadoni9918]

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;

[@piyushtale0001]

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 ) }

[@yogeshbadoni9918]

@@piyushtale0001 thanx buddy

[@rababportfolio3022]

I don't see any value for Record for {params.Student}, but appears in console

[@amitprakash1792]

same here. Can anyone resolve this issue ?

[@074_jayparkhiya5]

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?

[@074_jayparkhiya5]

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?

[@atozentertainment4670]

Bhai 70 se 80 lecture jayega ❤