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.
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
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
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.
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.
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
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 :))
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.
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).
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 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!
@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 🤩
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
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.
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
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 ?
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.
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?
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)
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
@@mr.existence6289 It would be good if you have some knowledge of JavaScript. You don't need to be really knowledgeable in JS if that's what you are asking
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 😊
getServerSideProps and getStaticProps are both different. I am still in the process of doing the tutorial. But as I understand it at the moment, getServerSideProps gets run every time the page is requested on the server side. getStaticProps gets run only once during the build process. Refer docs for better answer though.
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.😀
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_
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
Thank you so so much Alicia and all members of the team. This video was really helpful to kickstart my career in Next Js
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.
Extra bookmarks:
1:08:30 - getStaticProps
1:16:43 - getStaticPath
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
So with NextJs we are back to what we have been doing using laravel and other PHP framworks? Nice
Amazing course, i promise me finish this today.
Aguante Alicia!!!! Saludos de Chile!!
Saludos!
38:50 Nobody is doing thisbut just leave it like this.
This is the best words
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
best content/teacher ever
You and your explanation is so beautiful 😍😍
Thanks for the nice tutorial. Really got me started with Next!
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
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
Thanks for this nextjs tutorial!🤩
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.
Amazing Tutorial Alicia👏👏
Thanks Sid 🥰
Thank you for the nextjs video tutorial and also sass. I learned a lot from your tutorial.
Simply love it❤❤❤❤❤ Thank you so much ❤
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
amazing work lady, actually learned what i wanted, hope u have great holidays. With love from Ukraine!
I can't even blink.. I really love it s2
Thanks for making this beginner friendly
Can you do the same course for Next.js 13 or 14 version including app router?
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
OMG, what a coincidence, I'm looking for nextJs on FCC.THANKS
Cuttiest web developer ❤
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
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 :))
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.
best tutorial for next js
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).
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
Great job, thanks freecodecamp for your efforts
Thank you very much for this 😊❤
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!
Great video. Thank you for sharing.
thankyou for this course.Kindly cover a full next js 13 tutorial 😊
Been waiting for this 😁
@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
Thank you so much 👋👍👌
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
Great 👌 tutorial there.... Amazing depth and understanding of concepts
when creating the app it asks if I'd like to use Typescript. On your it didn't ask and you didn't say. Does it matter? also tailwind or eslint?
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.
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);
very nice :) thanks for teaching us so care and responsibly... 🥰🥰
New technologie New cool stuff let's get it.
If I knew that next js that beautifull I would learn it along time ago thanks for this amazing video
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 ?
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
Love next. Need to learn more tho
Hi Alicia, very nice tutorial. I wonder why you're putting empty space after opening the any tag like: _content of tag?
3:48:56 everything was going well untill you changed the color of the VSC 😫
Do I need to know node to make a fullstack project with Next?
nice video, thank yo so much
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.
Let's rock this tutorial
wow simpe easy tutorial thanks a lot i would love to watch more of your content
feel free to check them out :)
I like this 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!
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)
Why does it ask to use typescript? and does not take No for an answer?
Could you please do the same project using Nextjs 13 version? thank you
working on it! :)
How do you know that I am learning the "next js"?
Application demo at 4:40:13
Really good and educational teacher!
She is beautiful and intelligent what a deadly combination.
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!
The Best course
Hello! Are there any parts of this course that are obsolete after launch of Next.js 13?
Sadly not the new way how vercel wants us to use next in the future, as far i know
Awesome 👍
hey
did you watched whole video
i don't knoww javascript 100%
can i do this without Javascript
@@mr.existence6289 It would be good if you have some knowledge of JavaScript. You don't need to be really knowledgeable in JS if that's what you are asking
Sound music which start from 0:28 ?
Nice works
Why do we need to change our domain every year? 😢😢😢😢😢
Which version of nextjs are you teaching?is it nextjs 13 or 12
Next gen Codebabes
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?
looks great! i wish there were subtitles thought:(
lol --- you have to click on CC to see the subtitles 😀
Can we use nextjs just on client side replacing create react app with it?
yes obviously, it will provide you additional benefits in future!
Hi, what template did you use to start this?
Just created the project but my files have .tsx and not .js Will I still be able to follow the rest of the tutorial?
That's TypeScript which is on by default for NextJS. You could learn that first if you want
you can rename those files and change the extension
@@timetocode_with_ali thanks
Thanks
the data.json file is all on one line, how do I format it like yours?
Use prettier
NextJS has next/link. That makes your page load faster.
this is why i sometimes regret choosing to be a backend developer
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
I can guarantee that she has watched peaky blinders at least 5 times.
Her voice 🥶
Would like to see an upgrade for vue 3 with vite and pinia in composition api
Hi, someone could solve the problem with the email function?
Have any one found a solution to solve the problem in vercel ?
whay did she write getServerSideProps in index(pages) while she writes getStaticProps in index (events) both do the same thing
whats the difference
😪
getServerSideProps and getStaticProps are both different. I am still in the process of doing the tutorial. But as I understand it at the moment, getServerSideProps gets run every time the page is requested on the server side. getStaticProps gets run only once during the build process. Refer docs for better answer though.
@@Steel0079 thanx 👍🏼
@@rahilansari261 no problem
Thanks ❤
hey did you understand all the video
i dont know javascript
can i do this without Javascript
can i make prj for my self from this
This is next v12 for any of you wondering