I was going to start Next JS but almost all the courses are outdated after the release of Next JS 13 (according to some Next JS Devs). So I was searching for an updated course and here you are. Thanks for bringing the updated Next JS series that too for free on RUclips. Just a request, if you can upload a video daily, this will help us to learn it faster.
This is incredible. I was trying some other full projects tutorials, but couldnt understand what was happening, I was just copying the code. Now I'm understanding what is happening
Thank you for this tutorial series! It is exactly what I was looking for (building upon existing React knowledge and slowly introducing the new Next.js concepts).
You can search RUclips for "Dave Gray useMemo" or any other topic you want that I may have a tutorial for. Here is my useMemo: ruclips.net/video/oR8gUi1LfWY/видео.html Here is my useCallback: ruclips.net/video/FB_kOSHk1DM/видео.html
I was really looking for nextjs 13 series and I find your series which is really great and waiting for advance topics such as server side components thank you, Keep it up
Really enjoyed this video, new subscriber... I'm having an issue implementing the error handling and noticed the docs mentioned that "error.js boundaries do not currently work in next dev development environment"... could that be the reason my error.js file is throwing an '"undefined" is not valid json' error? Thanks!
If you just created your project, you are using version 13.3 which is buggy. Type npm i next@13.2.4 in the terminal to install that version and see which problems (if any) still persist.
Welcome! I haven't covered it yet, but you could use the usePathname hook to determine which page you are on and then logically show or hide it: beta.nextjs.org/docs/api-reference/use-pathname
Hi I want to use external css link from cdsn like animate.min.css.. But it's not loading in next js project. Where should I put the link. Currently it's in Head Tag from next/head
Not sure what you are saying here, but I recommend you follow my free Web Dev Roadmap if you are wondering which order I recommend you learn in: bit.ly/DaveGrayWebDevRoadmap
Hey Dave, this is a great tutorial series and is of the same quality I'd typically see on sites like Udemy, if not better! Quick question, with layouts we can include content to all children of a given directory. But what if we wanted to remove content? For example if I wanted to have the "My Navbar" on all pages except those in the "about" directory, instead using the "About Navbar" for those pages. Is this fairly simple to accomplish? Thanks, and sorry if this is already answered in a later video!
i'm actually getting confused, how can i manage the _app and document file stuff, like i use material-ui before the nextjs13 in _app.tsx file i use to initialize ThemeProvider and many more stuff and in document.tsx i initialized the @emotion/server and many more, how can i handel this right now?
Hey Dave, I'm now learning NextJS. I was struggling at the beginning because there's two different docs. The pages directory docs and the app docs. Most youTube tutorials suggest starting out with app directory but it's not in stable mode and not ready for production. Makes me wonder why you're tutoring us a version that we cannot deploy to production.
Hi Dave data pre fetching not working in current version next js 14.1.3 and even tried with production mode is not pre-fetching. I refer lots of article still i cant find the solution, here can anyone help me to know the issue when mouse hover to components then the data will pre-fetching in this video but current version not working. please tell me then how to archive the pre-fetching data in current version 14.1.3
Consider two parent paths instead of putting it in the root layout. One path for your login and anything else that should not have the navbar. Another parent path for anything that should have it. Another possible solution: look at the URL string value and conditionally include the navbar if it is not the /login URL. Just a couple of quick ideas.
@@DaveGrayTeachesCode the first idea didn't quite worked, as my main page which is the root url `/` uses the RootLayout so even though I set a layout for the login page it is still uses the rootLayout. The other idea of looking at the url string didn't quite worked as couldn't use the router function inside the rootLayout.
Please create a video in Dynamics Routes, Also I saw some people crate file using brackets For example, [id], (example), {anotherExample} like this Would you please explain this for us! ❤ Thank you ❤️🔥
Hello dev how to overcome to this situation in this app will be many error same name components can i use custom name of error and layout components.?@@DaveGrayTeachesCode
As I answer your question, Next.js 13 with the new app directory is still in beta as the docs show: beta.nextjs.org/docs ...this may not be the case if others read this in the future. Next.js has lots of benefits that I cover in the first video of this series.
As mentioned in the video, Next.js is changing rapidly and we are learning as things change. They just released 13.2 last Thursday (Feb 23): nextjs.org/blog ..I will cover changes as this series progresses.
If you are linking to another page, you should go to the page you are linking to. That would render the new page, but it is not the same as a "refresh". In a later chapter, I discuss the differences of hard & soft navigation in Next.js. You might look those up in the docs if you are having issues now.
@@DaveGrayTeachesCode within that project if you add authentication with next auth credentials provider can you also add the ability to do email verification without using the magic Link only credentials provider 🤔
@DaveGrayTeachesCode I keep getting linting errors in the beginning of this video. "cannot find h1". I have the file type set to TSX and tried a couple other things. I'm assuming it's an ESlint issue. I always have probelms with it. Would be great to see a "poduction project" vid where you go through all the set up of scripts, prettier, ESlint, Git ignore and so on. Your vids are the shit as usual!!! Keep it up brother.
@@DaveGrayTeachesCode Really weird but VS Code decided stop recoginzing my TSX/JSX files so I associaed them properly and had to completly restart VS code twice and it started working properly. Really looking forward to the projects. I have done a lot of tutorials and practice projecst. I struggle with what actually needs to be done to goto production. Thanks so much for the content and the quick reply!!!!!
If anyone else runs into this issue, my exact fix was to add this to the VS Code settings.json "files.associations": { "*.tsx": "typescriptreact", "*.jsx": "javascriptreact" }
I've tried to install next with the docs explanation, but when i run npm run dev i get the following message: SyntaxError: Unexpected token '??=' and the app doenst run. Anyone having the same problem?
Next 13.3 was just released and has some bugs. Check your package.json file to see the release you have. At the command prompt, type: npm install next@13.2.4 to go back to a more functional version for now.
I was going to start Next JS but almost all the courses are outdated after the release of Next JS 13 (according to some Next JS Devs). So I was searching for an updated course and here you are. Thanks for bringing the updated Next JS series that too for free on RUclips. Just a request, if you can upload a video daily, this will help us to learn it faster.
I cannot upload daily because this is not my full-time job. Maybe one day.
@@DaveGrayTeachesCode Oh I understand. No issue. I'll wait
This is incredible. I was trying some other full projects tutorials, but couldnt understand what was happening, I was just copying the code. Now I'm understanding what is happening
Love this NextJs series Dave. Definitely going to follow this till end. Really appreciate your work ❤❤❤
Great to hear! 💯
Your channel is just gem
I can't wait till Friday's Dave 😭
Thanks Dave, another intuitive and well-explained video. I am building my own website in Next and this tutorial dropped at the perfect time!
Glad it was helpful!
I definitely sure these series will be awesome like others.keep going on
❤
Thank you, I will 🚀
yessss!! can't wait for the next video about Nextjs 13!!!
Glad to hear it! Scheduled for Fridays. 🚀
Thank you for this tutorial series! It is exactly what I was looking for (building upon existing React knowledge and slowly introducing the new Next.js concepts).
I genuinely cannot wait for this to series videos. Waiting very patiently for each video Dave. 🙏
Thank you!
Hi Dave, thank you so much for all the effort and dedication you put on this awesome tutorials.
You're welcome!
This Video dispelled a lot of confusion for me is brilliant. Thank you💪
You're welcome!
best teacher ever thank you dave
You're welcome!
Thank you Dave
You're welcome!
Thx Dave. Can't wait for the third lesson
Welcome!
please include testing stuff in this series, there aren't too much about testing with nextjs 13 now.
Good request!
Really love this new series, i've already read the new oficcial documentation but see your videos is a must
Glad to hear that!
Thanks a lot! A special thanks for your English )) It is clear and easy to understand!
Thank you very much Dave! You are the best teacher in the web!
You're very welcome!
This video is very helpful at a very early stage. 🍻
Glad to hear that!
Useful and clean content like always !
Thank you!
patiently wating for the full series, btw can you make a video on useMemo and useCallback?
You can search RUclips for "Dave Gray useMemo" or any other topic you want that I may have a tutorial for.
Here is my useMemo: ruclips.net/video/oR8gUi1LfWY/видео.html
Here is my useCallback: ruclips.net/video/FB_kOSHk1DM/видео.html
That will be a very useful series, next js with ts, appreciate your work
You're welcome!
I was really looking for nextjs 13 series and I find your series which is really great and waiting for advance topics such as server side components thank you, Keep it up
Keep going in this series. Server components are covered.
Wonderful Dave!!
Thank you for this clear & useful tutorial
You're welcome!
Thank you so much Dave! You are making a positive impact to many people 🙏💯
You're welcome!
The current version is 13.2.3 , and I can add the metadata to the layout and don’t need to define its type. ❤
Right - I cover this in today's video, too.
@@DaveGrayTeachesCode I saw the today’s video. I will def visit it .
Pls make a video on parallel routes and intercepting routes
Absolutely amazing! thanks, the best on youtube!
Wow, thanks!
Thanks Dave!! awesome as always
Glad it helped!
thanks you, dave
Welcome!
Wow! Your explanations are amazing!
Thank you!
Superb Tutorial i love to watch this playlist awesome man
Thank you!
woah, this kinda looks like the routing for sveltekit. I didn't know 13 introduced these features.
Thanks for this NextJS series Dave. Do you plan to talk about api folder in NextJS ?
You're welcome! Eventually - but no rush. It provides the place for an api (if you want to provide one) and they just moved it in 13.2
@@DaveGrayTeachesCode within this folder api we can safely put our models, controller, routes ?
Hi Dave, do you know how to trigger Loading page when value of query parameter ? Currently Next.js only trigger when path change.
Thank you Dave for your content! It's awesome
Glad you enjoy it!
Thank you so much Sir for this series.
You are most welcome
loading doesn't seem to appear(path change) when i deploy the app but if make it client it will, btw great tutorial dave.
Thank you so much for the explanation!!!
You're very welcome!
Really enjoyed this video, new subscriber... I'm having an issue implementing the error handling and noticed the docs mentioned that "error.js boundaries do not currently work in next dev development environment"... could that be the reason my error.js file is throwing an '"undefined" is not valid json' error? Thanks!
If you just created your project, you are using version 13.3 which is buggy. Type npm i next@13.2.4 in the terminal to install that version and see which problems (if any) still persist.
I had the same problem using next 13.3 and downgrade it to 13.2.4 fixed it. Thank you.
Great teaching! 🤘🤘🤘
Thank you for ur great courses dave. May I ask how many parts of videos will it be for Next.js13?
I am not sure. Next is moving fast. 🚀
Amazing tutorial here❤. I have a question regarding routes protection when using next 13 routing. Any resource where I can get this?
Yes, later lessons in this series covers routes & middleware to protect them.
Thank you for this good lecture!!
You are welcome!
Thank you Dave, In this example during the video, what if I need to hide main nav from about page only , how can I do it in next 13.
Welcome! I haven't covered it yet, but you could use the usePathname hook to determine which page you are on and then logically show or hide it: beta.nextjs.org/docs/api-reference/use-pathname
@@DaveGrayTeachesCode Thank you it works fine with usePathname 🤗
very helpfull 🌟🌟. waiting for next video.
Glad to here that!
thank you for the course
Welcome!
Great videos! But can you make the series of some system design like Chakra UI or Material UI please!
Great requests!
Hi I want to use external css link from cdsn like animate.min.css.. But it's not loading in next js project. Where should I put the link. Currently it's in Head Tag from next/head
sir can use nextjs, nodejs, mongodb, for learn in depth and more from their official documentation
Not sure what you are saying here, but I recommend you follow my free Web Dev Roadmap if you are wondering which order I recommend you learn in: bit.ly/DaveGrayWebDevRoadmap
dave dave the great dave ✨♥️
This _may_ be a viking song! 😆
I want to know how did you make vs code so beautiful....which extensions are you using
Here you go: ruclips.net/user/shortsdp4u1NNFhtE
Hey Dave, this is a great tutorial series and is of the same quality I'd typically see on sites like Udemy, if not better! Quick question, with layouts we can include content to all children of a given directory. But what if we wanted to remove content? For example if I wanted to have the "My Navbar" on all pages except those in the "about" directory, instead using the "About Navbar" for those pages. Is this fairly simple to accomplish? Thanks, and sorry if this is already answered in a later video!
You can provide layout files for each path / directory. Instead of using one at the root level, structure your directories to provide what you need.
thanks sir Dave
You're welcome!
is this still good when I learn next14
i'm actually getting confused, how can i manage the _app and document file stuff, like i use material-ui before the nextjs13 in _app.tsx file i use to initialize ThemeProvider and many more stuff and in document.tsx i initialized the @emotion/server and many more, how can i handel this right now?
Thank you 💕!
Welcome!
What VS theme are you using? I really like it
My theme choices: ruclips.net/user/shortsdp4u1NNFhtE
Hey Dave, I'm now learning NextJS. I was struggling at the beginning because there's two different docs. The pages directory docs and the app docs. Most youTube tutorials suggest starting out with app directory but it's not in stable mode and not ready for production. Makes me wonder why you're tutoring us a version that we cannot deploy to production.
I believe I mentioned in the video, this is the way Next.js is headed. Why teach the old way and have a useless tutorial in months?
if I have a nav bar in my RootLayout, it still shows up in my signin page with a different layout file.
Thankssss a lot, what if I want to set a global loading.js ?
Did you try it? Best way to find out. 🚀 Reference docs: beta.nextjs.org/docs/routing/loading-ui
Hi Dave data pre fetching not working in current version next js 14.1.3 and even tried with production mode is not pre-fetching. I refer lots of article still i cant find the solution, here can anyone help me to know the issue when mouse hover to components then the data will pre-fetching in this video but current version not working. please tell me then how to archive the pre-fetching data in current version 14.1.3
how would you remove the main navbar on a login page for example? Since the Rootlayout is shared throughout the application...
Consider two parent paths instead of putting it in the root layout. One path for your login and anything else that should not have the navbar. Another parent path for anything that should have it. Another possible solution: look at the URL string value and conditionally include the navbar if it is not the /login URL. Just a couple of quick ideas.
@@DaveGrayTeachesCode the first idea didn't quite worked, as my main page which is the root url `/` uses the RootLayout so even though I set a layout for the login page it is still uses the rootLayout.
The other idea of looking at the url string didn't quite worked as couldn't use the router function inside the rootLayout.
@@danilocecilia7831 either could work if you stop using the root layout. Use layouts in the appropriate parent path. I think you'll figure it out.
Please create a video in Dynamics Routes,
Also I saw some people crate file using brackets
For example, [id], (example), {anotherExample} like this
Would you please explain this for us! ❤
Thank you ❤️🔥
Keep going in this series of videos. I do explain it.
@DaveGrayTeachesCode Thank You, I'm gonna complete this playlist
It’s really beginner Friendly and Awesome tutorial Videos ❤️
Hello dev how to overcome to this situation in this app will be many error same name components can i use custom name of error and layout components.?@@DaveGrayTeachesCode
NextJS isn't still in beta phase?
and after react-server-component what's the purpse of NextJS?
As I answer your question, Next.js 13 with the new app directory is still in beta as the docs show: beta.nextjs.org/docs ...this may not be the case if others read this in the future. Next.js has lots of benefits that I cover in the first video of this series.
next part wating
Coming soon
Dear sir, why you not tailwind css in next js videos
Patience. I mentioned in the first video that this series will eventually use Tailwind. 👀
can you make next 13 tailwind typescript project?
Did you watch the first video in this series? I may have mentioned those technologies for this series and there will be a project.
Hi dave can you please make a tuorial authentication in next js
I want to do this. It will be sometime after completing this series of fundamentals as it is more of an advanced topic.
Dave did they removed page folder in the new version? i can see the api folder inside app directory now
As mentioned in the video, Next.js is changing rapidly and we are learning as things change. They just released 13.2 last Thursday (Feb 23): nextjs.org/blog ..I will cover changes as this series progresses.
@@DaveGrayTeachesCode alright I'm following the docs along with your videos
How do we put the links on layout.tsx. They dont work there.
Hello Dave. I am building an app. When I am using next/link my page is refreshing. Is this normal or am I missing something?
If you are linking to another page, you should go to the page you are linking to. That would render the new page, but it is not the same as a "refresh". In a later chapter, I discuss the differences of hard & soft navigation in Next.js. You might look those up in the docs if you are having issues now.
I can not get any client component working, even the ones from next docs. does anyone faces this issue and how to fix ?
Hey, Can we use Vite with nextJS ?
Create-next-app is slow for me
Here you go: www.google.com/search?q=can+you+use+vite+with+nextjs
@@DaveGrayTeachesCode Thank you
The layout.tsx it seems the same like _document.tsx in Next.js 12
Cheers 🥂🍾
what if i dont want a directory to have root layout and have differeny layout for example user has different layout and admin has different layout
That's fine
@@DaveGrayTeachesCode how to do it nextjs 13 so that nested layout doesnt use parent layout .?
@@NoumanKhan-ug7ks Don't use a parent layout.
I don't have pages directory on installation - why is that? If you could clear up this confusion. My api dir is inside app.
Next.js is changing fast. You will see why in the 3rd video of the series.
@@DaveGrayTeachesCode Thank you for the swift response, loving the series 👍👍👍
Are you going to build a full project at the end to put everything together??
Yes, there will be definitely be a project.
@@DaveGrayTeachesCode within that project if you add authentication with next auth credentials provider can you also add the ability to do email verification without using the magic Link only credentials provider 🤔
@DaveGrayTeachesCode I keep getting linting errors in the beginning of this video. "cannot find h1". I have the file type set to TSX and tried a couple other things. I'm assuming it's an ESlint issue. I always have probelms with it. Would be great to see a "poduction project" vid where you go through all the set up of scripts, prettier, ESlint, Git ignore and so on. Your vids are the shit as usual!!! Keep it up brother.
Thank you! I did nothing special with ESLint here. Did you add an h1 that it is looking for? Small project(s) coming soon!
@@DaveGrayTeachesCode Really weird but VS Code decided stop recoginzing my TSX/JSX files so I associaed them properly and had to completly restart VS code twice and it started working properly. Really looking forward to the projects. I have done a lot of tutorials and practice projecst. I struggle with what actually needs to be done to goto production. Thanks so much for the content and the quick reply!!!!!
If anyone else runs into this issue, my exact fix was to add this to the VS Code settings.json
"files.associations": {
"*.tsx": "typescriptreact",
"*.jsx": "javascriptreact"
}
You need to specify this is App router and not pages router
I've tried to install next with the docs explanation, but when i run npm run dev i get the following message: SyntaxError: Unexpected token '??=' and the app doenst run. Anyone having the same problem?
The error should also tell you which file that is in. I do not remember that syntax in my examples.
@@DaveGrayTeachesCode The error occurred because of my version of nodejs. When i updated it the error got away.
hope you do a super advanced next js appp super advanced not just advanced so we see real word
Starting with the fundamentals for all, but projects will come.
@@DaveGrayTeachesCode yup but please do somthing super advanced bcause you dont find here in youtube
What about express js ?
Unrelated to Next.js, but my Express.js series playlist is here: ruclips.net/p/PL0Zuz27SZ-6P4vnjQ_PJ5iRYsqJkQhtUu
respect
When I am trying to add error.tsx it is giving error JSON.parse error , Help me to resolve this.
Having the same problem rn.
Next 13.3 was just released and has some bugs. Check your package.json file to see the release you have. At the command prompt, type: npm install next@13.2.4 to go back to a more functional version for now.
See my reply to the above.
Let's gooo!
🚀🚀🚀
♥
They have already deprecated head.tsx
Correct, and I note that in the very next video because it happened between this video and the next one. Just keep going and I provide updates.
@@DaveGrayTeachesCode I'm on the next video already
Heritier here from the future, the head file is officially gone
Yes, I cover that as it happened in the next video in this series.
NextJS needs more practical examples to explain its mechanics , it becomes more complicated at the first sign.
Keep going. I provide example apps in this series.
Thanks you Dave
You're welcome!