Build and Deploy a Full Stack Next.js 14 Application | React, Next JS 14, TypeScript, Tailwind CSS
HTML-код
- Опубликовано: 31 май 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
![DRAGON BALL: Sparking! ZERO - Fused Warriors Trailer [BUDOKAI TENKAICHI Series]](http://i.ytimg.com/vi/84p4Lvyfyes/mqdefault.jpg)
🚨 *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!
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.
ABSOLUTELY LOVED the debugging part at the end of the second hour. Very educative.
So after 1 month I've finally deployed my project. Thanks, you're a great teacher, I've learned a lot.
Hey Adrian, been a fan of your work for quite some time ! And you're super consistent!
just finished the cars project today . was searching for more next +typescript stuff. you are just spot on
Enjoy! 😊
Another masterpiece course for free, thanks for your contribution to the community
Much appreciated!
I appreciate your effort on this tutorial. Professional and punctual.
Very nice course, showing some great tips along the way, thanks!
This project is a very slick way to showcase a lot of your other projects
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
I did it! Took me 3 days but its all worth it. Thank you ❤
yes, more Typescript project with nextjs💯💯💯 Thank you and your team!!
Thank you for another amazing project video, Adrian!
Appreciate it!
Thanks for contributing another masterstroke project for us. I think this project helps us for learning the Next.js 🙏🙏🙏🙏❤❤
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!
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
Always bringing the best that’s out there, thanks!!
Appreciate it!
Hey there, appreciated your dedication towards your channel!!
MAKE MORE TYPESCRIPT VIDEOS, SPECIALLY MIGRATED USERS FROM REACTJS TO NEXT TS.
LOVE FROM INDIA 🇮🇳🇮🇳
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!
keep it up man, we always following your tutorial to be next mastering javascript! very awesome !
Thank you!
That ebook is the best. Thanks for all of this.
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! 😊
I will be glad to see your typescript video too. Great explanation.
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 !
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
Was literally thinking about searching a NextJS 13 Crash Course. Here we are!
Awesome content! I'd appreciate more Typescript videos. I'm new to it.
Back with another awesome project..Adrian Sir Thanks a lot
Appreciate it!
Excellent Video. Keep up the good work👍🏼
Great course! thank you
Awesome project as always 🔥
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! ❤️
As usual, like, then watch... great stuff Adrian!
Great 👌
New project to grow my typescript skills 😊 thank you Adrian
You're so welcome!
Awesome, as always! Thanks and keep it up. 😉
Thank you! 😊
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.
The best mern stack projects are here 🎉
Thank you very much ❤
More typescript please :) your awesome!!
I am curryenty learning web3 but, I can use this masterpiece to hone my web2 skills as well. Thank you very much.
Exactly! 😊
Just what I needed mate, love love love you
Enjoy! 😊
Thanks for this. This with MUI would be the best project ever!!!
yeah we would love to get more typescript videos from you
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 🎉
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!
Thanks man that was so helpful ❤❤❤
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?
Hey Adrian! Greate tutorial! In order to update the page without reloading, I would recommend using Apollo Client with the update cache method
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
As always wonderful content, Thank you much.
Thanks!
Thanks a lot for everything Adrian!!!!!
Thank you!
This is really amazing.thx.
Awesome! Thank you so much! 🙌
Glad you like it!
Thanks for the turorial, its such a masterpiece course for free. I hope you can make a tutorial about tRPC in NEXT js.
After finishing promptopia,car showcase and 3D portfolio i cant wait to start this!!!
Amazing!!
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
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.
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!
More typescript please! thank you
Thankyou so much for such a masterPiece video
Thanks!
thank you for the video😁
So much excited to learn more from you.
Awesome!
Enjoying the video. do a full typescript crash course. thank you
This one is special ❤Thanks
It is! ❤
So blessed that I find your channel
You really save all broke students around the world 😂
Thank you for sharing ❤
amazing tutorial
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
Fantastic content. I'm learning so much with you, thanks so much I love you
Could you please make a video building a social media marketing platform?
Adrian! you are the best on RUclips !!!
Great Project, as always
Appreciate it!
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
Great as always 🎉🎉🎉
🎉👋
You are a GEM to this community.❤❤❤❤❤❤
Thank you so much! ❤️
😎 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
Awsome 🎉. Thanks for sharing your knowledge !
Merci Beaucoup 👏🏻🦾
Merci!
Awesome Project
Thanks Adrian. yes please, Use clerk in one of your next videos please.
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! 😊
thanks for new lecture !! 🎉🎉
🎉👋
Thank you so much for the video
Thank you!
Out class project and lecture and brief deeply .🥰
Thank you so much 👍🙌👌
That's it! You are now the ultimate React learning resource in the WORLD!! No one can stop you ... could you pleeeeeeeease give us something on React Testing? The only thing missing on this channel ... 😍🤩😜
Grew idea!
yet another great build🥰🥰😍😍
Appreciate it! 😊
Antonio and Adrian are top notch Croatian web devs
Definitely!
Your video is gold in this era
Thank you so much!
Phenomenal Build 🔥🔥 !! If possible could you integrate push notifications in your upcoming builds?
Love your stuff can you do a video of best practices/architecture with node.js or react or Typescript
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.
a typescript pro course will be bliss
Thank you so much!
Thanks!
Mr Hi there 👋.Your Projects are beyond special
Thank you! :)
Thanks a lot for ur effort
Thanks!
That's really a masterpiece. I always wanted to write this: you're one of the best JS "Teacher" on RUclips. These courses are really helpfull. And also, Hello from Russia ❤
Thank you so much! ❤️
Can you say he is one of the best TS "Teacher" too?
@@0x1990c ofc! I would say he's one of the best JS, TS and NEXT JS "Teacher":D
Awesome thank you.
You're welcome!
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..!
Your are the JS God ! ❤️Love u sir
Thank you! ❤️
thanks for your job
ill love more typescript videos