Build and Deploy a Full Stack Next.js 14 Application | React, Next JS 14, TypeScript, Tailwind CSS
Вставка
- Опубліковано 14 тра 2024
- Ultimate Next 14 Course is now live: jsmastery.pro/next14
Next.js has the potential to revolutionize the industry and forever change the way we develop web applications. You’re still early in catching the trend and building your own Next.js 14 applications with TypeScript that leverage features such as server-side rendering and the app router.
Quick heads up: This tutorial covers Next.js 13, but don't let that number fool you. Next.js 14 is essentially a performance-focused update of version 13. That means every concept, technique, and feature we dive into here is just as applicable and relevant in Next.js 14
💼 Land your dream job with expert mentor guidance or get your money back. To find out more, apply here: jsmastery.pro/masterclass
⭐ Grafbase - grafbase.com
📚 Ultimate Next.js 14 eBook: resource.jsmastery.pro/nextjs...
🎥 React.js Crash Course: • React JS Full Course 2...
🎥 Next.js 14 Crash Course: • Next.js 14 Full Course...
🎥 Next.js 14 Car Showcase Project: • Build and Deploy a Mod...
📚 Materials/References:
GitHub Code (give it a star ⭐): github.com/adrianhajdin/proje...
Public folder (assets): drive.google.com/file/d/1l3_L...
GitHub Gist Code: gist.github.com/adrianhajdin/...
Create Secret - www.cryptool.org/en/cto/openssl
Alongside building this application, you'll also learn how to:
- Use Next.js 14 App Router and Server-side Rendering
- Implement Filtering Functionality
- Complete Pagination Capabilities
- Handle image uploads
- Understanding and writing proper TypeScript
- Learn Grafbase - a serverless GraphQL platform
💻 Join JSM on Discord - / discord
🐦 Follow JSM on Twitter - / jsmasterypro
🖼️ Follow JSM on Instagram - / javascriptmastery
💼 Business Inquiries: contact@jsmastery.pro
Time Stamps 👇
00:00:00 - Intro
00:12:54 - Homepage
00:18:12 - Navbar
00:26:23 - Footer
00:36:22 - Grafbase
00:46:33 - Authentication
01:46:49 - Create Project
03:04:22 - Displaying posts
04:27:31 - Deployment
🚨 *Important Updates*
Starting December 15th, 2023, Grafbase won't continue its database service. The good news is, that even though we used Grafbase in the video, not much is changing. Most of the video content stays the same.
If you're switching databases, check out these easy guides:
- MongoDB: ec2-100-20-220-134.us-west-2.compute.amazonaws.com/x/d?c=37737646&l=34910189-259b-4997-a3fa-e0bf49175f82&r=edc3cf5c-a556-4379-9f6f-8d229fc83170
- Postgres ec2-100-20-220-134.us-west-2.compute.amazonaws.com/x/d?c=37737646&l=99920287-2a46-4dcb-a073-3863c6158dcc&r=edc3cf5c-a556-4379-9f6f-8d229fc83170
Setting up both connectors is easy. Most of the GraphQL queries in the video stay the same. Just a few tweaks based on your new database, and you're good to go. No big issues to worry about.
This tutorial covers Next.js 13, but don't let that number fool you. Next.js 14 is essentially a performance update of v13. That means every concept, technique, and feature we dive into here is just as relevant in Next.js 14
Ultimate Next 14 Course is now live: jsmastery.pro/next14
yup got coming soon mail
Hi please can u make a small extension video or new video on how to integrate this with mongo instead of graph db... I am building mern apps using nextjs
I'm not getting :)
Hi one thing can u tell which Markdown editor is compatible with NextJs.
And thank you so much for this valuable project.
BTW the bug causing upload error is not about using serverComponentsExternalPackages, i found the issue is that you should use NextRequest (not Request) as the type of request params for the upload post function, this will fix that directly
Paused to take a moment to express my appreciation for your TypeScript videos - they are excellent!
ABSOLUTELY LOVED the debugging part at the end of the second hour. Very educative.
That was an awesome tutorial. Great teachings. Looking forward to more hours on different and exciting things! The workflow was brilliant and the pacing was fenomenal. The introduction of the gist files for easy copy-paste really is a god-send not to deal with boring CSS repetitions. Definitely will recommend your channel.
just finished the cars project today . was searching for more next +typescript stuff. you are just spot on
Enjoy! 😊
Hey Adrian, been a fan of your work for quite some time ! And you're super consistent!
yes, more Typescript project with nextjs💯💯💯 Thank you and your team!!
I appreciate your effort on this tutorial. Professional and punctual.
This project is a very slick way to showcase a lot of your other projects
Was literally thinking about searching a NextJS 13 Crash Course. Here we are!
So after 1 month I've finally deployed my project. Thanks, you're a great teacher, I've learned a lot.
I will be glad to see your typescript video too. Great explanation.
That ebook is the best. Thanks for all of this.
Very nice course, showing some great tips along the way, thanks!
I did it! Took me 3 days but its all worth it. Thank you ❤
Thank you for another amazing project video, Adrian!
Appreciate it!
Another masterpiece course for free, thanks for your contribution to the community
Much appreciated!
This is really amazing. I've been watching your videos ever since the Messenger tutorial snd I've really improved my frontend skills but realised i still lack in other more technical aspects. I was wondering if maybe you could do an advanced tutorial on something like a figma clone or miro clone(id really like to know how to build a web app tool) like codux how does drag and drop ui turn into code, things like that.
Great idea!
Thanks for contributing another masterstroke project for us. I think this project helps us for learning the Next.js 🙏🙏🙏🙏❤❤
I think that it would be helpful if you just show the docs of a tech (for example next auth docs). Many viewers don't know where you found a specific part of your code. Also, we will get better developers if you show us your way of learning things from the docs.
Thats exactly what I'm looking for.
but that's exactly what they sell, they sell ebook that doing just that. so it's fair point i think for them to not explaining every api from docs because it is rather against their main business@@RonyEfendy
keep it up man, we always following your tutorial to be next mastering javascript! very awesome !
Thank you!
The best mern stack projects are here 🎉
Thank you very much ❤
Adrian, thank you so much for making yet another easy to follow tutorial.
I'd be interested in seeing how to use Clerk + Firebase authentication, if that's okay.
Hey there, appreciated your dedication towards your channel!!
MAKE MORE TYPESCRIPT VIDEOS, SPECIALLY MIGRATED USERS FROM REACTJS TO NEXT TS.
LOVE FROM INDIA 🇮🇳🇮🇳
You're one of my hero's. Thank you to you and your team for the content that's put out. Hope you have a blessed day/night, depending on where you're at.
Thank you! ❤️
Awesome, as always! Thanks and keep it up. 😉
Thank you! 😊
Always bringing the best that’s out there, thanks!!
Appreciate it!
Awesome project as always 🔥
I greatly appreciate the effort you put into creating this tutorial. Thank you for providing the information I've been eagerly anticipating. Thumbs up for your valuable contribution!
bro how you finish this coure so fast
Thank you!
@@zzh315 consistency and focus shut down all social apps and 5 to 6 hour completed this course
Hey Adrian, been a fan of your work for quite some time ! And you're super consistent!
May I humbly request you do more advanced best practices to do with DDD/Clean architecture , with Typescript?
yes really we need this !
Hey Adrian, been a fan of your work for quite some time ! And you're super consistent!
May I humbly request you do more advanced best practices to do with DDD/Clean architecture , with Typescript?
Thanks for all your hard work!
I wouldn't recommended that at all
New project to grow my typescript skills 😊 thank you Adrian
You're so welcome!
For those who are having a hard time following:
-Include latest grafbase as dependency at package.json of (grafbase folder)
-Use connectors for postgres (neon) or mongodb.
-Explore the pathfinder to get the endpoints within grafbase.
-Also graphql variables issue (with after, last and others) within grafbase was fixed by cli version 0.71.2
yeah we would love to get more typescript videos from you
Awesome content! I'd appreciate more Typescript videos. I'm new to it.
Just what I needed mate, love love love you
Enjoy! 😊
Back with another awesome project..Adrian Sir Thanks a lot
Appreciate it!
Excellent Video. Keep up the good work👍🏼
Back to Back 100% grounded tutorials all for free........GOD BLESS u endlessly for making my web development journey so much easy....i am ever grateful to u. Cant wait to Join the JSM family.....much love from NIGERIA
Love to Nigeria! 😊
More typescript please :) your awesome!!
As usual, like, then watch... great stuff Adrian!
Great 👌
Thanks man that was so helpful ❤❤❤
hello Adrian, your content has been incredibly enlightening, and I've learned a lot from you. If feasible, chapter markers in the video would be fantastic. Thanks and best regards 🎉
come on guys, this video needs more like that it's get right now :( this video is amazing and teaches how to code nextjs, typescript properly even for a beginner like me. for me, it was easy to keep up and understand the materials taught inside it.
Thanks Adrian!
Great content! I like this one more than the one before. I started coding with you after 30 minutes you published this. I could finish it within 3 days and you created it in 5 hours. You're great!
I wonder if we can see a project which is deployed to hostinger?
Can you tell me about this project?
Great course! thank you
Hey Adrian! Greate tutorial! In order to update the page without reloading, I would recommend using Apollo Client with the update cache method
Thanks for the turorial, its such a masterpiece course for free. I hope you can make a tutorial about tRPC in NEXT js.
Iam waiting for your project my brother, Thank you so much, mark my words you're channel gonna hit 1 million under 1 month...
Thank you so much!
I am curryenty learning web3 but, I can use this masterpiece to hone my web2 skills as well. Thank you very much.
Exactly! 😊
Thanks a lot for everything Adrian!!!!!
Thank you!
a typescript pro course will be bliss
I wanted to see if I had missed a video and bam! there is a new video lmao
Keep it up i love your content !
Definitely not, here it is!
After finishing promptopia,car showcase and 3D portfolio i cant wait to start this!!!
Amazing!!
Hello, first of all thanks so much for your efforts. I’m learning so many things from these videos. I have one request. Is there a possibility to split these long videos into two or three sections? I find it is difficult to get back to the section I want easily. Thanks again for these wonderful efforts.
Your tutorials are amazing and unique. I love learning from your videos.
It would be great if you could do a tutorial on how to build a Shopify website with next js integration.
yes absolutely
More typescript please! thank you
Awesome! Thank you so much! 🙌
Glad you like it!
Enjoying the video. do a full typescript crash course. thank you
Phenomenal Build 🔥🔥 !! If possible could you integrate push notifications in your upcoming builds?
As always wonderful content, Thank you much.
Thanks!
Hi Adrian, I would like to see a build and deployment of a real estate project with the geo search/sort feature included. Combination of your real estate project+ Travel advisor+ admin dashboard and add in few features like An auction bidding feature for auction listed property. An admin dashboard to approve the client posted ad to go live only after screening. An option for the client to make a CRUD only for their profile. Image resize before saving to database; protect img from copying, screenshot or downloading by general viewers. A bit knowledge sharing on the SEO side using AI. Yeah, that's pretty much..!
Hi bro the problem you mention at the last part of video which is next js 13 do not show post immediately
It is due to caching in next js
It can be fixed by using
export const revalidate = 0;
in the layout.tsx and page.tsx inside of app directory
This statement means to cache nothing and fetch the latest data from server
Love your stuff can you do a video of best practices/architecture with node.js or react or Typescript
This is really amazing.thx.
Thankyou so much for such a masterPiece video
Thanks!
So blessed that I find your channel
You really save all broke students around the world 😂
Thank you for sharing ❤
So much excited to learn more from you.
Awesome!
Thanks for this. This with MUI would be the best project ever!!!
thank you for the video😁
Thanks Adrian. yes please, Use clerk in one of your next videos please.
😎 I am learning to create something similar to this as always an amazing tutorial Adrian 👍✅
Cool, thanks
@@javascriptmasteryplease can u post on discord how to use mongo for this
Great Project, as always
Appreciate it!
Great as always 🎉🎉🎉
🎉👋
Great tutorial, finally got it all working. Just one problem (at the minute).
When trying the Share Work on a mobile device I get the error 413: FUNCTION_PAYLOAD_TOO_LARGE.
Looking at the docs it suggests a fix is to bypass this by using cloudinary, but that is exactly what is being used.
Has anyone else seen this issue using an iPhone (or other mobile device). No idea why this works on a browser but not iPhone.
You are a GEM to this community.❤❤❤❤❤❤
Thank you so much! ❤️
Adrian! you are the best on UA-cam !!!
Hold on a little bit, Adrian, I did't complete prevous Next JS 13 projects yet :-) Btw, TS usage is the next steps her to build perfect apps. Outstanding content. Like by default)
Thank you! 😊
This one is special ❤Thanks
It is! ❤
amazing tutorial
Good work!
When are you releasing react native full stack app?
To resolve the problem of refreshing the page after create a project you can add a router.refresh() after the router.push('/'). I don't believe that is a best practise. But it works. A special tanks for the wonderful contents you are sharing. God bless you
Where exactly add it in a backend?
revalidateTag in nextjs
Your video is gold in this era
Thank you so much!
Awesome Project
Awesome video! Please upload a video tutorial on how to build an entire hospital management system with ambulence service, downloading patient report , contact with hospital authority these features in NEXT JS
Great idea!
Antonio and Adrian are top notch Croatian web devs
Definitely!
thanks for new lecture !! 🎉🎉
🎉👋
In 9 mins i can't even write great course.. But will be fun to do the whole course.. Very excited 🤩
Thank you!
Awsome 🎉. Thanks for sharing your knowledge !
Merci Beaucoup 👏🏻🦾
Merci!
Hi, Im Krish, Founder of Technolabdigitals from INDIA!!
Your tutorials are pure coding gold! 🌟 I have a suggestion. How about creating a full tutorial series on building a MENN Stack Subscription Platform? 🚀🔥
From User Management to Content Control, User Roles to Payment Integration, and Admin Controls to User Authentication, your expertise in these areas is unmatched. And adding a touch of genius by locking content for free users would make it even more exciting! 💡💪
I can already imagine how your step-by-step approach and knack for simplifying complex concepts will make this tutorial series a developer's dream. Your creativity and attention to detail will shine through as you guide us through the entire process, from start to finish.
Count me in as one of your eager subscribers eagerly waiting to dive into this MENN Stack masterpiece!
yet another great build🥰🥰😍😍
Appreciate it! 😊
Hi Adrian ! Love your tutorials. The deployed version of your app doesn't seem to be working. Is there any way that you can fix this issue as it will make learning easier. There are also three pending pull requests on the project, so maybe those can solve the issue. Once again Love and Appreciate the work you're doing.
Regards from India.
چراق طبثه ۱۶ با مهمان های مشتی اش همچنان روشنه ❤
مرسی 🙏
Hey Adrian, in 1:49 you used a site to check responsiveness in multiple devices, What was it?
Thank you so much for the video
Thank you!
Can't wait to try this one, hey bring back pleeeeease that live about finding job please
👌
ill love more typescript videos
Hey Adrian, as always this video was very useful and it was really awesome, but I've an error when I login with google I get the error in callback , While I have done all the settings according to your instruction
Thank you so much for your content. I learned a lot from your videos recently. I'm wondering what's your vs code theme and font?
I think the theme is Horizon italic and the font is Fira Code.
Exceptional!
Thank you!