Hi 👋 I am Alicia from the video. Thank you all for watching. Feel free to reach out to me with questions or suggestions for future videos and check out my other videos ☺️
Gracias Alicia por compartir tu experiencia de una manera tan didáctica, hasta un novato como yo pude seguirlo sin problema. Muy bien estructurado el video. Noté que tienes experiencia en UI/UX y aunque ya hay otro video en FC me gustaría ver un vídeo al respecto con la didáctica que tienes para explicar. 🥰
Amazing tutorial! Just one thought, instead of wrapping the tag with tag provided by nextJS, we could also replace by it would give the same result and cleaner code.😀
3:02:00 i recommend using a div instead of a tag as this will give you legacy error later and tell you that "hydration failed ...", took me a while, btw expect a sudden cut in the tutorial minutes later without giving any explanation of whats going on or happened
for a latest Next.js version, i think no need to include tag inside component, since Link component generates tag. i got error when includes a tag inside Link.
Hi Alicia, Hi All. That is really perfect source if you have not worked with Next.js. However, have two comments. 1. This course would be even better if you do not deal with CSS ( I mean it consumes time and distracts attention; If you just add pre-prepared classes it would be just fine). The second would be more serious - you left with app not working in production environment (or not fully working). In fact, the solution in that case is neither simple nor obvious and you gave no hint as per subject. As far as I have seen ( please correct me if I am wrong - I am new to back-end) one can not make persistent changes to files the way it is shown. Things change if you host the app by yourself - but not on Vercel (or at least, not on Vercel free account).
very interesting is what you know, when you want to learn for example FastAPI, Flask, React, Next or anything it doesn't matter all says that Netflix is using this framework :))
would be nice if there would be starting Git branch with say CSS and Html code when you started this course , starter repos do change CSS styles and HTML code many time , it would allow anyone who starts do have experience rather than fumble around why my output looks different
can you help me with an error enoent ENOENT: no such file or directory, open 'C:\Users\Riya Jain\Fintract\package.json' npm ERR! enoent This is related to npm not being able to find a file. tried everything
Hello great tutorial! When building out your component, for a start you can use the rafce shortcut which will provide you with a template. Makes things alittle easier!
indeed she is so pretty and also has taught in a preety way, i loved it and the way she de-bugg and explains is also amazing it feels like you are right there.
11:30 I attempted to follow this tutorial and met some challenges at the beginning. My file structure required that I create a folder inside of "app" like "events" and add page.tsx or page.js inside the folder. Put the code into that page.tsx file and when I navigate localhost/events and it will show whatever I put into that page.tsx file within the events folder.
Alicia, thanks fot the video. One note: When I opened data.json in your repo, I saw that "city" in all events for London is has value with capital "L" so ev.city wont be equal to cat, that can create a confusion
Are you from Argentina ?? You have such a lovely accent and you're a great instructor.Really concise explain skills plus having a deep understanding of the technology you're teaching.Congrats Ali 💗
i was enjoying the course until you changed the theme😭, Good stuff tho its surprisingly hard to find a good next tutorial . When can we get more or an intermediate course ? And thank you for work.
thanks for the course. i've been a long time vuejs user, but now I'm planning to work on nextjs more on my upcoming projects.. this video is very helpful
Ive been create-react-app. It's frustrating how simple yet different they all are. Especially when you don't necessarily want to know them all, but you need to.
@@mvmclx5622 actually I tried create-react-app in some small projects but I'm planning on building a bigger project and I think nextjs is more appropriate with bigger ones
@@coderizer I like it more than I don't so far. It is likely due to the experience over time, but I feel like I can get thru bugs much faster than I am or was able to when starting react. Everything is so picky and even when it's right, it's still wrong is about the way a lot of coding goes it seems. lol, enjoy
The about-us page displayed a repeated gradient (when I first opened it) which looked like a background image on repeat for the whole length of the page. It turned out to be an RGB gradient in the global.css file. It was distracting so I commented it out for now and I am getting a clean page with an h1 title like in your video. ( /* --background-start-rgb: 214, 219, 220; --background-end-rgb: 255, 255, 255; */) - My nav appears on the home page (footer too) right-aligned so I added: nav { text-align: center; } to globals.css file and now it's centered. I am also not sure why you removed the div's at 32:11 ? At 41:48 your events (Event1, Event2 etc.) list has been styled to display as a column and with h3's? These are not criticisms, so I will close this comment now but I agree with @snoweel, a beginner would not get the same end result and would be totally lost.
Hello, thank you for your comment! This is my first tutorial so I appreciate the feedback. In minute 32:11 I removed the div because I replaced it with an anchor tag. "At 41:48 your events (Event1, Event2 etc.)" I think at this point I am only displaying a list of items, which by default the lists (ul > li) are displayed as columns.
@timetocode_with_ali, thanks for the wonderful tutorial. Had a couple of question: At 41:48, when you navigate to route /events/san - it shows the Events in London Page with 6 Sub Heading(h2 probably) elements, when the same route /events/{something} was navigating to the same Events in London Page with 6 anchor tags being displayed side by side. So I'm a bit confused if I missed something. Seems like a glitch in editing the video but just wanted to be sure? Also, are the routes in the [id].js file supposed to be /events/london/event{n} instead of /events/event{n}? Thanks again for the amazing tutorial 🤩
Hey I know html css js and I don’t know anything about react should I watch react beginner course 1st and then get to this one or I can start directly with this one only ?
Is the whole using node 8 thing a part of the show? Is there a reason to ever be using something that old? I could see some reasons as node and all its blessings are just that and equally opposite, but the lowest I have had to experience going is 16 for hardhat. I am under the impression that it is more vulnerable the further from LTS that you get. Maybe there is more than one LTS version of some things? Thanks
Hi I got Error: Error serializing `.data` returned from `getServerSideProps` in "/". Reason: `undefined` cannot be serialized as JSON. Please use `null` or omit this value. when I did const {event_categories} = await import('/data/data.json'); I have pass the data in the Home function... I have searched online for solution and can't seem to find any
In api.js file can we use the other name or we have to use the handle name ? I mean can I change export default function handle(req, res) to export default function getList(req, res)
how can we access the json message ({message: "email already registered"}) sent from backend , since this error is 409 and the custom message is attatched with it, this e in catch block. when i do error.message in catch block it show "error 409" instead of custom message which is "email already registered" that is sent as json response from server.
hablas ingles nativo? me da la impresión de que no.. pero no es una critica!😵 es solo curiosidad, porque yo pronuncio así cuando leo algo en ingles! xD Gracias por compartir conocimiento!😊
Hi. Trying to access an image after destructuring the object in the same method as you did resulted in a next error... 'Error: Failed to parse src "musk_8YBKNNAjH9.jpg" on `next/image`, if using relative image it must start with a leading slash "/" or be an absolute URL ( or )'. How can I solve it?
I've a question. Recently my nextjs start commands automatically generated the build files but now it asks for manual creation of the build files. Please reply me.
Hello! Don’t feel like is a waste of time. All concepts are still relevant. it is important to learn how Next.js work first to understand why they have introduced new features/ change some components in their version 13 😊
Hi 👋 I am Alicia from the video.
Thank you all for watching. Feel free to reach out to me with questions or suggestions for future videos and check out my other videos ☺️
Gracias Alicia por compartir tu experiencia de una manera tan didáctica, hasta un novato como yo pude seguirlo sin problema. Muy bien estructurado el video. Noté que tienes experiencia en UI/UX y aunque ya hay otro video en FC me gustaría ver un vídeo al respecto con la didáctica que tienes para explicar. 🥰
@timetocode_with_ali is this the latest next and react version?
Love your accent 🥰
@private-comment tnx man
Thankyou time to code i just finished you earn new subscriber congrats i will waiting new video with next js 13 hugs
Amazing tutorial! Just one thought, instead of wrapping the tag with tag provided by nextJS, we could also replace by it would give the same result and cleaner code.😀
3:02:00 i recommend using a div instead of a tag as this will give you legacy error later and tell you that "hydration failed ...", took me a while, btw expect a sudden cut in the tutorial minutes later without giving any explanation of whats going on or happened
Oh my God, this is EXACTLY what I have been looking for today! This channel reads its subscribers minds!
that made two of us
@@alejandroblanco2154 that made three of us
I feel like I'm in the matrix and saw this video the same time last year on a different Nextjs version.
@@jakescript_
So with NextJs we are back to what we have been doing using laravel and other PHP framworks? Nice
for a latest Next.js version, i think no need to include tag inside component, since Link component generates tag. i got error when includes a tag inside Link.
thanks a lot for great tutorial. for dummy ipsum text just use lorem(amount of words you wish as a number) + tab key, in your editor
Extra bookmarks:
1:08:30 - getStaticProps
1:16:43 - getStaticPath
Hi Alicia, Hi All. That is really perfect source if you have not worked with Next.js. However, have two comments. 1. This course would be even better if you do not deal with CSS ( I mean it consumes time and distracts attention; If you just add pre-prepared classes it would be just fine). The second would be more serious - you left with app not working in production environment (or not fully working). In fact, the solution in that case is neither simple nor obvious and you gave no hint as per subject. As far as I have seen ( please correct me if I am wrong - I am new to back-end) one can not make persistent changes to files the way it is shown. Things change if you host the app by yourself - but not on Vercel (or at least, not on Vercel free account).
very interesting is what you know, when you want to learn for example FastAPI, Flask, React, Next or anything it doesn't matter all says that Netflix is using this framework :))
Amazing course, i promise me finish this today.
Thank you so so much Alicia and all members of the team. This video was really helpful to kickstart my career in Next Js
would be nice if there would be starting Git branch with say CSS and Html code when you started this course , starter repos do change CSS styles and HTML code many time , it would allow anyone who starts do have experience rather than fumble around why my output looks different
Great input! I’ll take it into account for the next time!
@@timetocode_with_ali did you mean for the next.js time lol
Wow just begin this course and realize how good it is written.
Best!
can you help me with an error
enoent ENOENT: no such file or directory, open 'C:\Users\Riya Jain\Fintract\package.json'
npm ERR! enoent This is related to npm not being able to find a file.
tried everything
Hello great tutorial! When building out your component, for a start you can use the rafce shortcut which will provide you with a template. Makes things alittle easier!
I would never learn anything from such a beautiful instructor. I need an ugly one.
indeed she is so pretty and also has taught in a preety way, i loved it and the way she de-bugg and explains is also amazing it feels like you are right there.
11:30 I attempted to follow this tutorial and met some challenges at the beginning. My file structure required that I create a folder inside of "app" like "events" and add page.tsx or page.js inside the folder. Put the code into that page.tsx file and when I navigate localhost/events and it will show whatever I put into that page.tsx file within the events folder.
Awesome! Try to create a Django tutorial in 2023❤️
Django is worst to begin with. How things pop up is still a mystery for me. Love Nodejs and Java backend
Please create a Django project tutoria
Please create a Django tourism website project
Please create a Django tourism website project
Please create a Django tourism website project
38:50 Nobody is doing thisbut just leave it like this.
This is the best words
thankyou for this course.Kindly cover a full next js 13 tutorial 😊
Aguante Alicia!!!! Saludos de Chile!!
Saludos!
Alicia, thanks fot the video.
One note: When I opened data.json in your repo, I saw that "city" in all events for London is has value with capital "L"
so ev.city wont be equal to cat, that can create a confusion
const data = allEvents.filter((ev) => ev.city.toLowerCase() === id);
OMG, what a coincidence, I'm looking for nextJs on FCC.THANKS
Thanks for making this beginner friendly
best content/teacher ever
Can you do the same course for Next.js 13 or 14 version including app router?
You and your explanation is so beautiful 😍😍
Are you from Argentina ?? You have such a lovely accent and you're a great instructor.Really concise explain skills plus having a deep understanding of the technology you're teaching.Congrats Ali 💗
Hello Leandro! I am from Spain, thank you 😀 I am glad you like it
Thanks for the nice tutorial. Really got me started with Next!
i was enjoying the course until you changed the theme😭, Good stuff tho its surprisingly hard to find a good next tutorial .
When can we get more or an intermediate course ? And thank you for work.
Simply love it❤❤❤❤❤ Thank you so much ❤
Thank you for the nextjs video tutorial and also sass. I learned a lot from your tutorial.
Thanks for this nextjs tutorial!🤩
thanks for the course. i've been a long time vuejs user, but now I'm planning to work on nextjs more on my upcoming projects.. this video is very helpful
Ive been create-react-app. It's frustrating how simple yet different they all are. Especially when you don't necessarily want to know them all, but you need to.
@@mvmclx5622 actually I tried create-react-app in some small projects but I'm planning on building a bigger project and I think nextjs is more appropriate with bigger ones
@@coderizer I like it more than I don't so far. It is likely due to the experience over time, but I feel like I can get thru bugs much faster than I am or was able to when starting react. Everything is so picky and even when it's right, it's still wrong is about the way a lot of coding goes it seems. lol, enjoy
The about-us page displayed a repeated gradient (when I first opened it) which looked like a background image on repeat for the whole length of the page. It turned out to be an RGB gradient in the global.css file. It was distracting so I commented it out for now and I am getting a clean page with an h1 title like in your video. ( /* --background-start-rgb: 214, 219, 220;
--background-end-rgb: 255, 255, 255; */) - My nav appears on the home page (footer too) right-aligned so I added: nav {
text-align: center; } to globals.css file and now it's centered. I am also not sure why you removed the div's at 32:11 ? At 41:48 your events (Event1, Event2 etc.) list has been styled to display as a column and with h3's? These are not criticisms, so I will close this comment now but I agree with @snoweel, a beginner would not get the same end result and would be totally lost.
Hello, thank you for your comment! This is my first tutorial so I appreciate the feedback. In minute 32:11 I removed the div because I replaced it with an anchor tag. "At 41:48 your events (Event1, Event2 etc.)" I think at this point I am only displaying a list of items, which by default the lists (ul > li) are displayed as columns.
@@timetocode_with_ali 😃👍Thank you for your reply, I will continue using your tips and try to finish this project.
@@timetocode_with_ali please reply I don’t get your setup it seems next has changed since just 5 months ago
best tutorial for next js
Hi Alicia, very nice tutorial. I wonder why you're putting empty space after opening the any tag like: _content of tag?
@timetocode_with_ali, thanks for the wonderful tutorial. Had a couple of question:
At 41:48, when you navigate to route /events/san - it shows the Events in London Page with 6 Sub Heading(h2 probably) elements, when the same route /events/{something} was navigating to the same Events in London Page with 6 anchor tags being displayed side by side. So I'm a bit confused if I missed something. Seems like a glitch in editing the video but just wanted to be sure?
Also, are the routes in the [id].js file supposed to be /events/london/event{n} instead of /events/event{n}?
Thanks again for the amazing tutorial 🤩
Watch the whole video your doubts will get cleared automatically
I can't even blink.. I really love it s2
Amazing Tutorial Alicia👏👏
Thanks Sid 🥰
Thank you very much for this 😊❤
Great video. Thank you for sharing.
Which version of nextjs are you teaching?is it nextjs 13 or 12
NextJS has next/link. That makes your page load faster.
Application demo at 4:40:13
Great job, thanks freecodecamp for your efforts
I like this teacher
W as always thanks for the hard work 💕
Was waiting for this video
hey
did you watched whole video
i don't know javascript can i learn this
can i do this without knowing 100% javascript
@@mr.existence6289 yes u don't need to be good in JavaScript just understand how it's work
@@mr.existence6289 there is allot of videos in this channel u can watch one and uu ready
Great 👌 tutorial there.... Amazing depth and understanding of concepts
Could you please do the same project using Nextjs 13 version? thank you
working on it! :)
Thank you. You provide the best ways to learn programming. You are the best educational content. I hope you add Arabic translation to your courses.
I hope you like the video
Sadly not the new way how vercel wants us to use next in the future, as far i know
Cuttiest web developer ❤
New technologie New cool stuff let's get it.
Love next. Need to learn more tho
This is next v12 for any of you wondering
very nice :) thanks for teaching us so care and responsibly... 🥰🥰
Hey I know html css js and I don’t know anything about react should I watch react beginner course 1st and then get to this one or I can start directly with this one only ?
looks great! i wish there were subtitles thought:(
lol --- you have to click on CC to see the subtitles 😀
How do you know that I am learning the "next js"?
Let's rock this tutorial
Do I need to know node to make a fullstack project with Next?
nice video, thank yo so much
Is the whole using node 8 thing a part of the show? Is there a reason to ever be using something that old? I could see some reasons as node and all its blessings are just that and equally opposite, but the lowest I have had to experience going is 16 for hardhat. I am under the impression that it is more vulnerable the further from LTS that you get. Maybe there is more than one LTS version of some things? Thanks
maybe her company still uses and maintains node 8 ?? There is no reason other than that!
Thank you.
Hi I got Error:
Error serializing `.data` returned from `getServerSideProps` in "/".
Reason: `undefined` cannot be serialized as JSON. Please use `null` or omit this value.
when I did const {event_categories} = await import('/data/data.json');
I have pass the data in the Home function... I have searched online for solution and can't seem to find any
Hello! Are there any parts of this course that are obsolete after launch of Next.js 13?
In api.js file can we use the other name or we have to use the handle name ? I mean can I change export default function handle(req, res) to export default function getList(req, res)
If I knew that next js that beautifull I would learn it along time ago thanks for this amazing video
wow simpe easy tutorial thanks a lot i would love to watch more of your content
feel free to check them out :)
Would like to see an upgrade for vue 3 with vite and pinia in composition api
Been waiting for this 😁
The Best course
In 3:43:51, you shouldn't use useRef. You should use useState to make the form controlled, as suggested by React
How were you able to workaround the file structure
Hi in 4:10:30 ...ev, email_registered: [...ev.email_registered, email] - isn't the email_registered property declared 2 times in the same object?
how can we access the json message ({message: "email already registered"}) sent from backend , since this error is 409 and the custom message is attatched with it, this e in catch block. when i do error.message in catch block it show "error 409" instead of custom message which is "email already registered" that is sent as json response from server.
hablas ingles nativo?
me da la impresión de que no..
pero no es una critica!😵
es solo curiosidad, porque yo pronuncio así cuando leo algo en ingles! xD
Gracias por compartir conocimiento!😊
Hola Jaime! No, no hable ingles nativo, de ahi a que seguramente pronuncie algunas palabras erróneamente 😆
Just realised the channel name is in camelCase
😅
She is beautiful and intelligent what a deadly combination.
Hi, what template did you use to start this?
I wish it were next.js 13
thank you
Nice works
Why does it ask to use typescript? and does not take No for an answer?
this is why i sometimes regret choosing to be a backend developer
amazing work lady, actually learned what i wanted, hope u have great holidays. With love from Ukraine!
Next gen Codebabes
3:48:56 everything was going well untill you changed the color of the VSC 😫
please include typescript
We need a course on Nextjs13 please....c
Coming soon 😊
Do you need to know nodejs for you to start learning next js??
I don’t think so. If you know node you may learn the syntax/concepts faster
Why do we need to change our domain every year? 😢😢😢😢😢
Really good and educational teacher!
Hi. Trying to access an image after destructuring the object in the same method as you did resulted in a next error... 'Error: Failed to parse src "musk_8YBKNNAjH9.jpg" on `next/image`, if using relative image it must start with a leading slash "/" or be an absolute URL ( or )'. How can I solve it?
Put your musk_8YBKNNAjH9.jpg inside public/images folder and write img src='/images/musk_8YBKNNAjH9.jpg .It will work!
Awesome
Would’ve great if it was in next 13 ?
I've a question. Recently my nextjs start commands automatically generated the build files but now it asks for manual creation of the build files. Please reply me.
What is the error exactly?
Why next version 12?
Hello! Don’t feel like is a waste of time. All concepts are still relevant. it is important to learn how Next.js work first to understand why they have introduced new features/ change some components in their version 13 😊
Because most of 13's new features are still in beta
@@kakun7238 no only the app directory is.
13 is a bad number
What this created with Next.13 ?