Build and Deploy a Full Stack Next.js Application | React, Next JS, TypeScript, Tailwind CSS

[@javascriptmastery]

🚨 *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

[@irfansaeedkhan7242]

yup got coming soon mail

[@businessuser5146]

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

[@vishwa_offl]

I'm not getting :)

[@sachinkaushik8919]

Hi one thing can u tell which Markdown editor is compatible with NextJs. And thank you so much for this valuable project.

[@cx20012002]

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

[@casual_xyz]

Paused to take a moment to express my appreciation for your TypeScript videos - they are excellent!

[@RohitRai-q6z]

just finished the cars project today . was searching for more next +typescript stuff. you are just spot on

[@javascriptmastery]

Enjoy! 😊

[@karthickraj.r1162]

Another masterpiece course for free, thanks for your contribution to the community

[@javascriptmastery]

Much appreciated!

[@thereaper7682]

Antonio and Adrian are top notch Croatian web devs

[@javascriptmastery]

Definitely!

[@tmkdigitaluk]

Was literally thinking about searching a NextJS 13 Crash Course. Here we are!

[@rockbelleh6237]

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

[@javascriptmastery]

Love to Nigeria! 😊

[@sunerose]

So after 1 month I've finally deployed my project. Thanks, you're a great teacher, I've learned a lot.

[@zandyvila1545]

I did it! Took me 3 days but its all worth it. Thank you ❤

[@konidoniravirr6580]

Iam waiting for your project my brother, Thank you so much, mark my words you're channel gonna hit 1 million under 1 month...

[@javascriptmastery]

Thank you so much!

[@htmlfivedev]

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 ... 😍🤩😜

[@javascriptmastery]

Grew idea!

[@bn8379]

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

[@ofwoodfalegnameria1107]

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

[@AS-pt1mf]

Where exactly add it in a backend?

[@huamuhuamu]

revalidateTag in nextjs

[@giannisnik5295]

After finishing promptopia,car showcase and 3D portfolio i cant wait to start this!!!

[@javascriptmastery]

Amazing!!

[@mohdarish4195]

Your video is gold in this era

[@javascriptmastery]

Thank you so much!

[@andreiiosup6622]

This project is a very slick way to showcase a lot of your other projects

[@raphaeljaggerd3585]

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.

[@javascriptmastery]

Great idea!

[@Exyrem]

I am curryenty learning web3 but, I can use this masterpiece to hone my web2 skills as well. Thank you very much.

[@javascriptmastery]

Exactly! 😊

[@subinaypanda9936]

That ebook is the best. Thanks for all of this.

[@paakofibamfoquaicoe4193]

You are a GEM to this community.❤❤❤❤❤❤

[@javascriptmastery]

Thank you so much! ❤️

[@6little6fang6]

ABSOLUTELY LOVED the debugging part at the end of the second hour. Very educative.

[@vgdev2446]

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.

[@RonyEfendy]

Thats exactly what I'm looking for.

[@Gooblehusain]

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

[@mintingcrypto7879]

a typescript pro course will be bliss

[@Binarybotsltd]

Mr Hi there 👋.Your Projects are beyond special

[@javascriptmastery]

Thank you! :)

[@harveerSingh-iy9xz]

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

[@michaeltrembovler8301]

I will be glad to see your typescript video too. Great explanation.

[@nisargjaiswal4264]

Hey there, appreciated your dedication towards your channel!! MAKE MORE TYPESCRIPT VIDEOS, SPECIALLY MIGRATED USERS FROM REACTJS TO NEXT TS. LOVE FROM INDIA 🇮🇳🇮🇳

[@galliharmada617]

keep it up man, we always following your tutorial to be next mastering javascript! very awesome !

[@javascriptmastery]

Thank you!

[@bapakfadila]

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!

[@yasershokoohi]

چراق طبثه ۱۶ با مهمان های مشتی اش همچنان روشنه ❤ مرسی 🙏

[@deepakpateljb2411]

Your are the JS God ! ❤️Love u sir

[@javascriptmastery]

Thank you! ❤️

[@afaqahmad8918]

Sir I'm starting making this website and will show to my university teacher as a final year project. 😂

[@ugodesigns1076]

Just what I needed mate, love love love you

[@javascriptmastery]

Enjoy! 😊

[@ValleyDigitalMarketing]

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.

[@javascriptmastery]

Thank you! ❤️

[@pixprocoder]

yeah we would love to get more typescript videos from you

[@EfosaMichael]

As usual, like, then watch... great stuff Adrian!

[@javascriptmastery]

Great 👌

[@dedywd_]

So blessed that I find your channel You really save all broke students around the world 😂 Thank you for sharing ❤

[@luckykr94]

In 9 mins i can't even write great course.. But will be fun to do the whole course.. Very excited 🤩

[@javascriptmastery]

Thank you!

[@yuumeko_yt]

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 !

[@javascriptmastery]

Definitely not, here it is!

[@YuvrajSingh-qz9ss]

Thanks for contributing another masterstroke project for us. I think this project helps us for learning the Next.js 🙏🙏🙏🙏❤❤

[@neiltamallana5099]

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!

[@zzh315]

bro how you finish this coure so fast

[@javascriptmastery]

Thank you!

[@amjadali-cs3si]

@@zzh315 consistency and focus shut down all social apps and 5 to 6 hour completed this course

[@imdougmoreira]

Always bringing the best that’s out there, thanks!!

[@javascriptmastery]

Appreciate it!

[@Stefoux]

New project to grow my typescript skills 😊 thank you Adrian

[@javascriptmastery]

You're so welcome!

[@valehisma]

I appreciate your effort on this tutorial. Professional and punctual.

[@ChicClique]

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..!

[@kreativekrishstudios]

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!

[@vishwa_offl]

Check if the correct version of grafbase is available "devDependencies": { "@grafbase/sdk": "^0.24.1" } Once the installation is complete, try running npx grafbase@0.24.1 dev again and see if the error is resolved.

[@hiddenskeptic3464]

Thank you so much I had the exact problem and your comment is what finally solved it

[@stevenoketch6950]

Almost becoming a NodeJS guru but boom, NextJs pops up

[@alexandersmotrikov9007]

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)

[@javascriptmastery]

Thank you! 😊

[@AfonsoFilipeJr]

Thanks for this. This with MUI would be the best project ever!!!

[@red8599]

amazing , as always 😊😊

[@javascriptmastery]

Thank you so much 😀

[@a-factoracademy]

Wow, why is it difficult to comment on mobile? I would surely be one of the first 10 to comment. This is indeed the best video Tutorial now for me on the internet!

[@jaymartinez311]

For anybody getting the image component warning this is the solution I found on stackoverflow: (Navbar) `` (Footer) `` I had the logo in the navbar and the footer. Once I added this it went away. I have no idea why it works but it was driving me nuts! 😂

[@blue_berry_pie64]

yes, more Typescript project with nextjs💯💯💯 Thank you and your team!!

[@samuelkimani8441]

This is Awesome...Im sure i'll get a job after this

[@javascriptmastery]

Thanks!

[@pritamiitismdhanbad561]

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

[@javascriptmastery]

Great idea!

[@rayco5601]

Very nice course, showing some great tips along the way, thanks!

[@harsh-alashi]

Back with another awesome project..Adrian Sir Thanks a lot

[@javascriptmastery]

Appreciate it!

[@kristijanlazarev]

A typescript crash course would do the trick yes!

[@kristijanlazarev]

@Javastmastery whats with the fake profiles

[@SidiCodet]

Hello there! Let me add my extra features and impress da ladies, thanks JS. No JavaScript channel that's better than this one love from Nigeria:)

[@javascriptmastery]

Thank you so much. Love to Nigeria!

[@anasisah2384]

Hey Adrian, been a fan of your work for quite some time ! And you're super consistent!

[@Tapadar.Monsur]

Thank you for another amazing project video, Adrian!

[@javascriptmastery]

Appreciate it!

[@coding-master-shayan]

Typescript is so good I am using Typescript for while I don't want to go back to JavaScript

[@javascriptmastery]

Same!

[@6.squash.936]

Hi There 👋

[@Soap_js]

Hey

[@franciscoeira1080]

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.

[@sang4005]

This one is special ❤Thanks

[@javascriptmastery]

It is! ❤

[@mohdabdulrahman6611]

The best mern stack projects are here 🎉 Thank you very much ❤

[@LucasLevingston-w3q]

I have problems with grafbase, which has an updated version, and is giving an error in the application, vercel itself is running grafbase in the most recent version, and causes an error in app/page.tsx in fetchAllProjects(category, endcursor ), where it warns that you cannot pass null parameters

[@DavidLeoTech]

I’ve the same issue.

[@DavidLeoTech]

Been battling with it for two days. Please how did you resolve it

[@LucasLevingston-w3q]

@@DavidLeoTech update action.tsx const variables = category ? { category, endCursor } : {endCursor} const first = 4 return category? makeGraphQLRequest(projectsQuery, variables): makeGraphQLRequest(getAllProjectsQuery, variables); prepare another query export const getAllProjectsQuery = ` query allProjects($endCursor: String) { projectSearch(first: 4, after: $endCursor) { pageInfo { hasNextPage hasPreviousPage startCursor endCursor } edges { node { title githubUrl description liveSiteUrl id image category createdBy { id email name avatarUrl } } } } } `;

[@AnthonyRex-qc2uj]

I am having the same issue too, have you resolved it, if you have, how did you

[@LucasLevingston-w3q]

@@AnthonyRex-qc2uj update action.tsx const variables = category ? { category, endCursor } : {endCursor} const first = 4 return category? makeGraphQLRequest(projectsQuery, variables): makeGraphQLRequest(getAllProjectsQuery, variables); prepare another query export const getAllProjectsQuery = ` query allProjects($endCursor: String) { projectSearch(first: 4, after: $endCursor) { pageInfo { hasNextPage hasPreviousPage startCursor endCursor } edges { node { title githubUrl description liveSiteUrl id image category createdBy { id email name avatarUrl } } } } } `;

[@mattoattacko]

a TypeScript crash course would be great

[@MDKohaku]

Can't wait to try this one, hey bring back pleeeeease that live about finding job please

[@javascriptmastery]

👌

[@calebayodeji3149]

Adrian! you are the best on KZbin !!!

[@frontendmaster_7]

Hey Adrian! Greate tutorial! In order to update the page without reloading, I would recommend using Apollo Client with the update cache method

[@syahrilramadhan689]

Thanks for the turorial, its such a masterpiece course for free. I hope you can make a tutorial about tRPC in NEXT js.

[@alptekinocakdan]

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?

[@Md.AshrafulIslam-l8k]

Can you tell me about this project?

[@michaelodikanwa442]

Awesome content! I'd appreciate more Typescript videos. I'm new to it.

[@eric-jt]

Great course! thank you

[@kellymweu2781]

Enjoying the video. do a full typescript crash course. thank you

[@mzmarshall2351]

Thanks Adrian. yes please, Use clerk in one of your next videos please.

[@sayf3446]

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!

[@abdullahtayeh1853]

I wouldn't recommended that at all

[@hyperrelle]

Hi Adrian, 3:05:04 After implementing fetchAllProjects I am getting this error Error: Field 'category': Error { message: "Field 'category': Error { message: \"invalid type: null, expected a string\",

[@eric-jt]

same here

[@Darkwolf15130]

Same

[@dealbisac]

Great as always 🎉🎉🎉

[@javascriptmastery]

🎉👋

[@MalikDixon]

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?

[@wadoudazer6906]

yes really we need this !

[@hamzashafiq1796]

Thankyou so much for such a masterPiece video

[@javascriptmastery]

Thanks!

[@SHMUDIVEL]

More typescript please! thank you

[@kevinnorton3972]

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.

[@rauldealencardantas3956]

So, in my case, to fix the problem of reloading at 4:39:33, I just add the router.refresh() after making the push command (inside the handleFormSubmit arrow func in the ProjectForm component).

[@sereyvathanakkhorn760]

This might be the correct answer, but it doesn't make sense to why it has to be done this way. I would think the 'Push' should already navigate away to the homepage before it get to the refresh part.

[@mintingcrypto7879]

ill love more typescript videos

[@christopherberesford3340]

More typescript please :) your awesome!!

[@Sbz-i2c]

@deprecated - The Grafbase database is deprecated and will be sunset soon. Use connectors like Postgres or MongoDB instead.

[@NiKaabir]

So much excited to learn more from you.

[@javascriptmastery]

Awesome!

[@ashutosh_tiwari]

Awesome project as always 🔥

[@garnetssxc737]

Great videos but its pretty hard to differentiate the capital L's to lower case l's beacuse of your font and red theme for variables.

[@pramithaperera58]

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.

[@mandeepkaur099]

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.

[@MusaddiqBabar-b3z]

yes absolutely

[@giorgiilariani6628]

of course we want typescript. safer way to code :)

[@danielgg4671]

More typescript videos plz!

[@weizhang4059]

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.

[@oussamab-a7240]

if you want to make a div with className you can just type . and press tab same to nav. or p. ... extra

[@javascriptmastery]

Cool idea!

[@sachinraj6875]

someone please tell me, i don't understand graphQL and grafbase in intro section should i continue course or leave

[@harsh-alashi]

Can't wait for MERN stack tutorial project as well as Instagram/ Reddit Advanced Clone