This is the one that I've been waited for long!!! Tech Stacks all together for a real world project like this. So excited!! I'm still watching and thank you Dave.
I love this course!, and simply because you don't hide all the issues and solutions for every step... Thanks a lot for this invaluable resource, I will be one of your must dedicated students!
Ever since I got a job as a software engineer at a major company I've been thinking how none of the guides or even really my school taught me error handling in-depth and what to do other than console logging / erroring. I had to learn the hard way about tools like Sentry so it's very refreshing to see this included in your guide. Teaching production level processes and practices is much needed!
Boy! This project is very rich in technology! I've been following you for a while and recently subscribed to your channel, your content is extraordinary! I could rise from my junior level to full-fledged just with your videos. My thanks from Brazil!
Dave! Thank you SO much for this project - I recently graduated from a webdev bootcamp and have been building _everything_ from scratch using vanilla React. That was a good learning experience, but oh my gosh the developer experience with Next, TS and Tailwind is orders of magnitude better. I'm so excited to keep building and hopefully land a career role before too long; this breathed some much-needed fresh air into the whole experience. Wow, what a difference. You rock - again, _thank you_ !!!
Thanks Dave !! Appreciate and thankful enough for the huge effort you putting to deliver us a real world Application with full-stack base. Helps me a lot in visualizing and approaching . Thank you once again !!
Thanks! You will see some similarities to the MERN Stack series I created, but this is a very different approach and end result. Glad you are looking forward to it!
thank you so much for your work dave, despite of english is not my native language and i struggle with it, i could understand you, i will continue watching the next videos and finish this application,, thanks.
Hello Dave, I don't comment on anything but this is my first time commenting on any TH-cam video. I discovered your channel several months ago, and I learnt web development through your free tutorials. They were of much help! Thanks, man! But I want to maybe request or ask if you plan to teach Angular JS in the future. You already have completed the MERN stack, but I think those who want to do the MEAN stack for some reason should also get a tutor like you! Thanks btw for such amazing and free tutorials!
Hey Dave, great content as usual, master!! I would loovee if you could do some videos (perhaps even some projects) using both Nextjs in the frontend and Django Rest Framework in the backend and showing how to integrate them, jwt authentications, csrfs, forgot password, sending emails etc. Keep rollin' ! 🤘🏻
Hi from Brazil Dave! i just watched this first video and i have a question. I didn't find about SEO in titles of the rest of videos in that playlist. Do you will explain about SEO config in next? I'm a begginer in nextjs and i want to study how create a project from 0 and configure to be able to search at google easily
It would be cool if they don’t already give content creators early access to patches in order to make educational video. Similar to giving early access to content creators in the video game space: for hype and feedback from power users.
Thank you so much for this video! Will you continue building the project here in TH-cam or you have a platform where you show the complete build ? Thanks
It's been all a great tutorial and i followed almost all, and learned a lot, my question is what version of node.js installed for this to work perfectly? and should the node.js installed in the same project folder?, thank you so much in advance and keep up the good work!
I install Node.js globally for dev. If using a Docker container I would have a specific version. I'm using Node.js 22, but the Next.js docs list Node.js 18.18 currently as the minimum for compatibility.
Incredible content as always! I just would like to mention that if you are using the stable Next.js 15 version and used the Sentry wizard command to set it up, you will not get to see the `error.tsx` or `global-error.tsx` page. This is because Sentry's `sentry-example-app` (not Dave's) throws the error from inside an onClick Event Handler. This makes the error an `Event Error` and not a `Rendering Error`, simply put React believes that this type of error can be handled by the Dev so does not treat as a critical error. In contrast, a `Rendering Error` is treated as a critical error by React because Devs cannot do much for them, therefore displays the defined `error.tsx` (this is a Next.js feature, but you get me :). I hope this helps.
Your explanation style and manner of speaking are very pleasant to watch and listen to. I'm sure it would make for a great course. Would this project to learn PostgreSQL and Drizzle a good approach, or would it be better to dive in after some hands-on practice?"
@@GelaDzia20 thanks for the kind words. You will learn some of Postgres and Drizzle, but only what is needed for this project. It might be a good intro to them before you dive deeper.
Thanks Dave I 've seen some github project where there use next node and postgresql as backend. I thought next was build on top of node so why using node ? I wonder if you can make a video on how a backend with next node and the database interact with each other ?
it looks like an interesting tutorial BUT do u have a link for us so we can see the result? at the end of this video the project has only a navigation bar 🤔 i wonder...
Did you listen to the beginning of the video? We start with a user stories list and build from there like a real world project. This isn't like the tutorials that show you the end result first. When a client hires you, you can't show them the end result before you build it. This is a video series. You're not going to see the complete project at the end of the first video.
Hi Dave, I just wanted to let you know that I tried your promo code, but an error popped up, saying the code had expired. Still loving the course and will certainly continue following along.
@@DaveGrayTeachesCode Hey Dave, Sentry did give me a 14 day trial period and I expect it will revert to the the single developer (free) tier at the end of the trial period. This will work fine for me, as I am the only dev in my office. I assume most of what you will cover using Sentry will be available under the single user - free tier.
@@nickwoodward819 not that I know of. There will be nothing out of the ordinary here. That said, I have not used those deployment options. Vercel just shared about a dozen templates for different deployment support.
Hi Dave ❤ you didn’t have to go and install the every component like that … you could have used the same command -legacy ………… that’s how I did it in my last project with the rc version
hey can you suggest me what should I learn to grow my skill . should I learn flutter with dart or c# with .Net for app dev. so, my goal is cross + great ui + multicore + best performance . so confused at this moment .
Flutter and React Native are usually the cross platform choices for Native Mobile App development. I have a React Native series underway on my channel now.
Hi Dave, As of now i am using nextjs 15 ,react 19 stable release. But if add shadecn into the environment then "npm run dev" keeps compiling. even for small changes it is keeps compiling for very long time. is this something i am doing wrong or this is an shadcn issue. still do you have any word how to fix this issue
Strange. Dev mode should render on demand, so the first time you visit a table page it will take longer. Same for a form page or any others. However, after the first time, it should not need to render on demand unless you have stopped the dev server and restart it. If you are experiencing something beyond this, I have not experienced the issue.
I started today with create-next-app 15.1.1 and it asks if I want to use Turbopack. Yes or no? Edit: After seeing your package.json and mine I would say: No
This is excellent. However, I don't agree with not showing the final outcome. The reason being you probably have a mental picture of what you are planning to build, but we don't, so the coding is confusing to follow without the context. I understand it's more real world. But real world would usually do design mock-ups first.
Im not sure but I dont see auth token config in next config anywhere but it did say auth token added. I used the terminal command to initiate setup ( since I believe nextjs 15 is released now and so is react 19 ), there were options I wasnt sure of what they were. Here are those config question Do you want to route Sentry requests in the browser through your Next.js server to avoid ad blockers? │ Yes │ ◇ Do you want to enable React component annotations to make breadcrumbs and session replays more readable? │ Yes │ ◇ Do you want to enable Tracing to track the performance of your application? │ Yes │ ◇ Do you want to enable Sentry Session Replay to get a video-like reproduction of errors during a user session? │ No ◇ Do you want to create an example page ("/sentry-example-page") to test your Sentry setup? │ Yes │ ◆ Created src/app/sentry-example-page/page.tsx. │ ◆ Created src/app/api/sentry-example-api/route.ts. │ ◆ Created .env.sentry-build-plugin with auth token for you to test source map uploading locally. │ ◆ Added .env.sentry-build-plugin to .gitignore. │ ◇ Are you using a CI/CD tool to build and deploy your application? │ No
Likely added an auth token in your .env.local file. I suggest enabling Sentry Session Replay. It's a great feature. You can visually see what your users did when an error happened. (All data entry is kept confidential)
Hey dave I enjoy your content and your videos it has helped me a lot but I need your help can you help me with a video of next js 15 and typescript together I've been trying to fix a particular bug but I keep on getting issues please help me out
@@codernerd7076 I haven't had that experience. Do you mean when you first start with npm run dev or are you referring to response times in the browser? Might need to free up some RAM if you have a lot running.
Dave, I follow you from a certain time now and I love your ways - I respect you..but, before to make a Next.js video, you should refresh the React course, it's been a while from when you published it and the library ad its ecosystem changed a lot..and learning at first the best practice for modern React would be basic and crucial to make things in Next.js from now on. My 2 cents.
@@riccardoguitar I'm looking at a refresh for that in the coming year. I would like to see React 19 released as stable first. I do appreciate your feedback! Thank you! 🙌
Use the code "davegray" for 3 months free on the Team plan of Sentry for any new accounts: bit.ly/try-sentry-dg
Can you please help us with your vs code setup, theme , icon fonts and so on
This is the one that I've been waited for long!!!
Tech Stacks all together for a real world project like this. So excited!!
I'm still watching and thank you Dave.
Glad to hear that!
I discovered your channel 2-3 days ago and I am already getting addicted to your content. Your content is so nice. Thx for making these videos!
Welcome aboard!
These types of real world projects >>> Any tutorial, great work dave and thank you for teaching and contributing soo much to the dev community
I have to appreciate your efforts for showing us a realistic world view along with your amazing content.
Thank you!
This is like a miracle for me.
Last week I searched for this on your channel.
Thank you so much
Good timing!
I love this course!, and simply because you don't hide all the issues and solutions for every step... Thanks a lot for this invaluable resource, I will be one of your must dedicated students!
You're very welcome!
Ever since I got a job as a software engineer at a major company I've been thinking how none of the guides or even really my school taught me error handling in-depth and what to do other than console logging / erroring. I had to learn the hard way about tools like Sentry so it's very refreshing to see this included in your guide. Teaching production level processes and practices is much needed!
@@klhmia Agree! Thank you!
Boy! This project is very rich in technology! I've been following you for a while and recently subscribed to your channel, your content is extraordinary! I could rise from my junior level to full-fledged just with your videos. My thanks from Brazil!
Dave! Thank you SO much for this project - I recently graduated from a webdev bootcamp and have been building _everything_ from scratch using vanilla React. That was a good learning experience, but oh my gosh the developer experience with Next, TS and Tailwind is orders of magnitude better. I'm so excited to keep building and hopefully land a career role before too long; this breathed some much-needed fresh air into the whole experience. Wow, what a difference. You rock - again, _thank you_ !!!
You're very welcome!
Thanks Dave !! Appreciate and thankful enough for the huge effort you putting to deliver us a real world Application with full-stack base. Helps me a lot in visualizing and approaching . Thank you once again !!
You're very welcome!
Thanks Dave. Your channel has taken me to unimaginable heights since i started coding. Love your work ❤❤
"I'm excited for this project 😀! Having already completed your MERN project, I believe this will be one of the best Next.js projects out there.
Thanks! You will see some similarities to the MERN Stack series I created, but this is a very different approach and end result. Glad you are looking forward to it!
I've been waiting for this one, thank you for all your hard work!
wow, as always excellent project, we appreciate material like this.
thank you so much for your work dave, despite of english is not my native language and i struggle with it, i could understand you, i will continue watching the next videos and finish this application,, thanks.
You're welcome! I'm glad you were able to follow along!
Oh! Next 15 seems awesome! I completely skipped next 14 now I fill follow this tutorial!
Thank so much Dave. Hope next series will come soon.
Another series is coming up. Thanks Dave!
You're welcome!
Incredible video, Dave, as always. I'll watch it later today
Glad to hear it!
you earned a subscriber DAVE !
Very detailed
Waiting for the continuatin videos
Thanks
This format is awesome
Thank you!
Thank you Dave, see you in the next one.
You're welcome! The next one just published this morning.
Dav, this is awesome ❤
Glad to hear it!
Hello Dave, I don't comment on anything but this is my first time commenting on any TH-cam video. I discovered your channel several months ago, and I learnt web development through your free tutorials. They were of much help! Thanks, man! But I want to maybe request or ask if you plan to teach Angular JS in the future. You already have completed the MERN stack, but I think those who want to do the MEAN stack for some reason should also get a tutor like you! Thanks btw for such amazing and free tutorials!
@@DevAmmarSaqib thanks for the comment! I may get to cover Angular at some point. This Next.js series will take me to years end.
AngularJS? Please, no.
Rather, Angular v18 and up.
AngularJS is a whole different thing.
Please look that up, haha.
Hey Dave, great content as usual, master!! I would loovee if you could do some videos (perhaps even some projects) using both Nextjs in the frontend and Django Rest Framework in the backend and showing how to integrate them, jwt authentications, csrfs, forgot password, sending emails etc. Keep rollin' ! 🤘🏻
Thank you!
Thanks a lot. Waiting for the other lessons
You're welcome! At least one per week and maybe more as it progresses.
Thanks Dave 💪...is the 2nd series out? Share the link if it's out...i can't find it.
Currently still working on this series, one new video each week. Link to the full playlist in the video description. Has all released videos so far.
Looks like this is the Next.js version of MERN stack techNotes applcation. Appreciate the video.
@@PranavRPise Indeed! There will be many differences along the way 🙌
@@DaveGrayTeachesCode Excited for new episodes!
is the series about react native stopped or will it continue?
It will continue on Fridays
@@DaveGrayTeachesCode oh amazing, thank you!
Its drizzle time finally
Yes, Drizzle is great to work with 🙌
Thanks a bunch, Dave !
You're welcome!
Could not have been better timing. I need to learn how to make webapps!
Hi from Brazil Dave! i just watched this first video and i have a question. I didn't find about SEO in titles of the rest of videos in that playlist. Do you will explain about SEO config in next? I'm a begginer in nextjs and i want to study how create a project from 0 and configure to be able to search at google easily
Begging your pardon, NextJS 15? Didn't they launch version 13, like, half an hour ago?
It seems like it 😆.. but 15 is here.
Welcome to the JavaScript ecosystem. 😅
It would be cool if they don’t already give content creators early access to patches in order to make educational video. Similar to giving early access to content creators in the video game space: for hype and feedback from power users.
Well done sir.
@@oladapooluwadurotimi2865 thank you!
Thank you so much for this video! Will you continue building the project here in TH-cam or you have a platform where you show the complete build ? Thanks
It will continue on TH-cam.
It's been all a great tutorial and i followed almost all, and learned a lot, my question is what version of node.js installed for this to work perfectly? and should the node.js installed in the same project folder?, thank you so much in advance and keep up the good work!
I install Node.js globally for dev. If using a Docker container I would have a specific version. I'm using Node.js 22, but the Next.js docs list Node.js 18.18 currently as the minimum for compatibility.
Incredible content as always! I just would like to mention that if you are using the stable Next.js 15 version and used the Sentry wizard command to set it up, you will not get to see the `error.tsx` or `global-error.tsx` page. This is because Sentry's `sentry-example-app` (not Dave's) throws the error from inside an onClick Event Handler. This makes the error an `Event Error` and not a `Rendering Error`, simply put React believes that this type of error can be handled by the Dev so does not treat as a critical error. In contrast, a `Rendering Error` is treated as a critical error by React because Devs cannot do much for them, therefore displays the defined `error.tsx` (this is a Next.js feature, but you get me :). I hope this helps.
Your explanation style and manner of speaking are very pleasant to watch and listen to. I'm sure it would make for a great course. Would this project to learn PostgreSQL and Drizzle a good approach, or would it be better to dive in after some hands-on practice?"
@@GelaDzia20 thanks for the kind words. You will learn some of Postgres and Drizzle, but only what is needed for this project. It might be a good intro to them before you dive deeper.
@@DaveGrayTeachesCode Just as I suspected, this is great course. I really appreciate it! Thank you!
Full project, with all the needed contents, onnnnly with 1:30 hs
Great
This is a series, so chapter 1 is 1:30.. but there will be more videos to come.
@@DaveGrayTeachesCode that's bery satisfying to hear but, won't you be focusing on reaxt native?
Does this playlist include server side rendering?
thank you for using drizzle orm
Welcome! Very nice to work with 🙌
I haven't yet watch it but i know it's good already
Thanks!
why not next-auth? does kinde auth presents some advantages?
I do prefer Kinde and this project series is about what I use daily. The 2nd video in the series dives into Kinde so you can compare.
Appreciate if you can show how to do micro services and a micro front end using this project
I already called u grandpaa 🤟
Amazing sir❤
Thank you!
Wow! Damn❤🎉
Right on!
Love you,Sir
Thank you!
What are the prerequisites ok watching this tutorial? Can i watch and learn this tutorial as a total beginner?
I list the prerequisites near the beginning of the video. This video series is not for absolute beginners.
wow just when i thought my life was messed up there is javascript with with million of libraries packages and frameworks keep them coming...
What is your vs code theme sir ❤ nice video to interns sir thank you❤
How many parts are there?
I never know for sure and just follow the content. I estimate around 12.
wow , i like and sub , this super interesting, thanks
Welcome aboard!
Thanks Dave
I 've seen some github project where there use next node and postgresql as backend.
I thought next was build on top of node so why using node ?
I wonder if you can make a video on how a backend with next node and the database interact with each other ?
You will see that in this series as we connect to Neon postgres with Drizzle ORM. You are correct that the back end of next.js is node.
it looks like an interesting tutorial BUT do u have a link for us so we can see the result? at the end of this video the project has only a navigation bar 🤔 i wonder...
Did you listen to the beginning of the video? We start with a user stories list and build from there like a real world project. This isn't like the tutorials that show you the end result first. When a client hires you, you can't show them the end result before you build it. This is a video series. You're not going to see the complete project at the end of the first video.
Thank you Dave, i watched the start but .
.missed the part that it is a part of a series
Hi Dave, I just wanted to let you know that I tried your promo code, but an error popped up, saying the code had expired. Still loving the course and will certainly continue following along.
@@BooleanOperator Thanks for the note! I will let them know 🙌
@@DaveGrayTeachesCode Hey Dave, Sentry did give me a 14 day trial period and I expect it will revert to the the single developer (free) tier at the end of the trial period. This will work fine for me, as I am the only dev in my office. I assume most of what you will cover using Sentry will be available under the single user - free tier.
are there any features here that wouldn't work when deployed to say cloudflare or locally?
@@nickwoodward819 not that I know of. There will be nothing out of the ordinary here. That said, I have not used those deployment options. Vercel just shared about a dozen templates for different deployment support.
9:24 I feel seen
Hi Dave ❤ you didn’t have to go and install the every component like that … you could have used the same command -legacy ………… that’s how I did it in my last project with the rc version
Awesome 🎉
Thank you! Cheers!
Sir will you please make the single video of the whole video
@@Moddingmonster11 Yes, that is the plan. 🙌
@DaveGrayTeachesCode waiting sir
@Moddingmonster11 It always takes 1 to 2 weeks after I complete a series.
@@DaveGrayTeachesCode ok sir
Setting experimental.instrumentationHook to true in next.config.js is currently not necessary in Sentry manual set up.
That is correct. This video was made prior to the stable version making that change. I note this and make the change in video # 4 of the series.
you are the goat
Amazing
Please update your React js course.
hey can you suggest me what should I learn to grow my skill . should I learn flutter with dart or c# with .Net for app dev. so, my goal is cross + great ui + multicore + best performance . so confused at this moment .
Flutter and React Native are usually the cross platform choices for Native Mobile App development. I have a React Native series underway on my channel now.
Hi Dave,
As of now i am using nextjs 15 ,react 19 stable release. But if add shadecn into the environment then "npm run dev" keeps compiling. even for small changes it is keeps compiling for very long time. is this something i am doing wrong or this is an shadcn issue. still do you have any word how to fix this issue
Strange. Dev mode should render on demand, so the first time you visit a table page it will take longer. Same for a form page or any others. However, after the first time, it should not need to render on demand unless you have stopped the dev server and restart it. If you are experiencing something beyond this, I have not experienced the issue.
Is it for beginners in nextjs
It can be. Near the beginning of the video I say you should have experience with React, but I'm not requiring Next.js experience as a prerequisite.
npm install next-themes --legacy-peer-deps
can't install the package without the tag even after i've got nextJS 15.X.X
Right. It will take packages some time to catch up. They don't immediately update with a new release.
Dear Respected Sir i am a mernstack developer can i take this course
Yes, you will learn about nexjs and some about PostgreSQL.
I started today with create-next-app 15.1.1 and it asks if I want to use Turbopack. Yes or no?
Edit: After seeing your package.json and mine I would say: No
Correct - I really like Turbo, but currently, it doesn't allow full Sentry functionality. This only applies to dev mode
Why use src directory?
Preference. I like it. You don't have to.
@@DaveGrayTeachesCode Thank you for replying. You are one of the best coding teachers on TH-cam, if not the best.
This is excellent. However, I don't agree with not showing the final outcome. The reason being you probably have a mental picture of what you are planning to build, but we don't, so the coding is confusing to follow without the context.
I understand it's more real world. But real world would usually do design mock-ups first.
Im not sure but I dont see auth token config in next config anywhere but it did say auth token added. I used the terminal command to initiate setup ( since I believe nextjs 15 is released now and so is react 19 ), there were options I wasnt sure of what they were.
Here are those config question
Do you want to route Sentry requests in the browser through your Next.js server to avoid ad blockers?
│ Yes
│
◇ Do you want to enable React component annotations to make breadcrumbs and session replays more readable?
│ Yes
│
◇ Do you want to enable Tracing to track the performance of your application?
│ Yes
│
◇ Do you want to enable Sentry Session Replay to get a video-like reproduction of errors during a user session?
│ No
◇ Do you want to create an example page ("/sentry-example-page") to test your Sentry setup?
│ Yes
│
◆ Created src/app/sentry-example-page/page.tsx.
│
◆ Created src/app/api/sentry-example-api/route.ts.
│
◆ Created .env.sentry-build-plugin with auth token for you to test source map uploading locally.
│
◆ Added .env.sentry-build-plugin to .gitignore.
│
◇ Are you using a CI/CD tool to build and deploy your application?
│ No
Likely added an auth token in your .env.local file. I suggest enabling Sentry Session Replay. It's a great feature. You can visually see what your users did when an error happened. (All data entry is kept confidential)
@@DaveGrayTeachesCode Sure I'll check that out, thanks for the reply
Can i request for Remix series sir?
Great request! Maybe early next year 🙌
@@DaveGrayTeachesCode Thanks a lot Sir.
Hey dave
I enjoy your content and your videos it has helped me a lot but I need your help can you help me with a video of next js 15 and typescript together
I've been trying to fix a particular bug but I keep on getting issues please help me out
This video series uses TypeScript with Next.js 15
Bro what's your theme name
Here you go: th-cam.com/users/shortsdp4u1NNFhtE
Am i the only one who getting hydration error after adding Sentry?
Mern fullstack typescript with mysql db, please😢
The MERN acronym usually means the M stands for MongoDB. MySQL and Postgres (PostgreSQL) are very similar. There's a lot to learn from this series.
wow Sentry slows down the dev client by a lot!
@@codernerd7076 I haven't had that experience. Do you mean when you first start with npm run dev or are you referring to response times in the browser? Might need to free up some RAM if you have a lot running.
Dave, I follow you from a certain time now and I love your ways - I respect you..but, before to make a Next.js video, you should refresh the React course, it's been a while from when you published it and the library ad its ecosystem changed a lot..and learning at first the best practice for modern React would be basic and crucial to make things in Next.js from now on. My 2 cents.
@@riccardoguitar I'm looking at a refresh for that in the coming year. I would like to see React 19 released as stable first. I do appreciate your feedback! Thank you! 🙌
@@DaveGrayTeachesCode You are huge! ❤️
Yes I was thinking about that react tutorial that I learned from you dave thanks ❤ 😊@@DaveGrayTeachesCode