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
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
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.
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?
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
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.
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??
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
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.
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?
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.
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) => (
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?
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(
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 ) }
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.
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
the method of explaining is very clear and perfect. just keep going.
wonderful explanation for each and every part .... just perfect
maja aa rha hai sir thank u for providing us best source of next js
Video title card starting awesome and your video content are starsome
Thank you so much 😀
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}
))}
);
}
Sir .. Plz upload more next js videos in a day if it is possible... 😇
Please Keep uploading and introduce more concepts in depth
no
"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 {}{}
You are great 😍😍😍😍
Brother increase interview questions and what a method of teaching going to be fan ❤🎉
Noted
params.student kyu kiye?
Thank you so much!!! God bless you
Great explanation
very nice sir
Thanks and welcome
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
Thanks for sharing 🙏
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
Can I make multiple dynamic routes in the same folder ?
Sir counter program bhi bnaiye
params can be used without writing 'use client', useParams needs 'use client',
Correct
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
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?
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;
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 ?
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 .
Bro nuxt js ke uper bhi video bana do please
thanks for this
Sir isko hum backend mai v use kar sakte for extracting id also you haven't covered this
if i want to make serverside rendering then we cant use use client then how i can get params data
Anil ji I have one question why you have marked component as a use client inside [student] we can do that using server component
Hi sir one point i don't understand as you create dynamic folder [student] so studentlist how it sense student please answer me thanks.
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??
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!..
When i click "control + u " for source code dynamic path name is not displaying , kindly answer how can display dyanmic things in source code ?
agar mene studentlist se navigate krke link access kie he to student page se kese open hue he, wo clear nhi hua
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
sir mery pas click karny py name show nhi horha?
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;
sir why you are not making videos on app router from beginning as it is recommended by nextjs itself
sir how can i make 2 or more dashboard with authentication role based?
sir src /app nhi arhi to folder kha banuo
Thank bhaiya
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.
How can i server render dynamic routes data without use client
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?
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.
Reusable component in next.js
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.
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 .
thx
Maine " use client" use nahi kiya ...fir bhi sahi chal raha ...aisa kyu
Is It complete or remaining?
🚔
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) => (
))}
Why params.Student?
vai array to banan nehi atahe oto sikhado please
meaning about this
[folder_name]
bhaiya ji ye to bataya nhi ki asal me ho kya rha --->
Please upload others videos
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
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
I don't see any value for Record for {params.Student}, but appears in console
same here. Can anyone resolve this issue ?
who is peter?
spider man peter parker :D
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 ❤
only taking "params" Not taking "param" why?
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.