Next.js 13 - The Basics

Рет қаралды 630,315

Жыл бұрын

Learn about all the new features in Next.js version 13 with a full tutorial. We build a beginner-friendly CRUD app from scratch using a PocketBase (SQL database) for the backend.
Source code github.com/fireship-io/next13...
Next.js Full Course fireship.io/courses/react-nex...
Next.js Beta Docs beta.nextjs.org/docs
PocketBase pocketbase.io/
Next.js 13 First Look • Next.js 13… this chang...

Пікірлер: 563

@augustineakotolarbi-ampofo6769 10 күн бұрын

How does this guy explain a whole framework in 8mins 59 seconds? How does he keep getting away with this? This is pure talent!!! I love it. Great job man

@berkinanik Жыл бұрын

the most efficient 9 mins of 2022, thanks Jeff!

@monzerfaisal3673 Жыл бұрын

So efficient it's not even 9 mins!

Жыл бұрын

You can build a career out of this 9 minutes.

@sakosa8784 9 ай бұрын

My names jeff

@Keidakira Жыл бұрын

"It's not my fault that it didn't work. Go and read the docs" is a nice way of saying "It worked on my machine!" 😂 Love this guy!

@kasper_573 Жыл бұрын

”I’ll be using typescript”, then proceeds to assert any for basically everything you’d use typescript for 😂

@unforgettable31 3 ай бұрын

At my work we have a big enterprise app that’s like 100k of lines of code, and the only types we (well the former team, not me) use are numbers, strings and booleans. NOTHING ELSE. Sometimes you’ll also find something funny uuid’s declared as booleans.

@bossdaily5575 Жыл бұрын

This is the framework of all time

@willinton06 Жыл бұрын

It’s nexing time

@paprukas Жыл бұрын

for next 2 weeks

@AmxCsifier Жыл бұрын

The real next framework is SvelteKit

@alanraftel5033 Жыл бұрын

Wait next week for the new disruptive framework.

@theriser8751 Жыл бұрын

L framework, my brand new blazingly fast real deal life changer faster than any thing framework called "Noxt" is probably better, releasing next week

@snehasisdebbarman3106 Жыл бұрын

Only my guy fireship can explained whole javascript frameworks under 10 mins . Kudos.. your 10 mins tutorials are equivalent to other's 10 hours tutorial

@hugolu1630 Жыл бұрын

Finally though a video / tutorial that actually starts with the thing we need to understand which is "how do I structure the app and how does Next js interpret the structure"

@Patrity Жыл бұрын

You covered so much in only 9 minutes, amazing work!

@sommmtoooo Жыл бұрын

Thanks Jeff, I was about watching an outdated hour+ tutorial on nextjs. You saved me and gave me all I needed to hear 🤗

@abhishekvishwakarma9045 Жыл бұрын

Thanks Jeff, you made Next 13 so easy to understand 😌🔥excited for its stable release 🤩

@ThatTrueCJ201 Жыл бұрын

I enjoy the longer form content on this channel compared to your main channel! Thanks for your continuous education 🔥

@mattnield Жыл бұрын

Brillian, I'm so gald I came across this. I was very much feeling like the puppy at the beginning with the v13 release, you've answered my questions/concerns much quicker than reading the docs did!

@FilipeLeonardoM Жыл бұрын

it's amazing like in a video of 9 minutes you can create a huge quantity of apps, thank u for update, keep bringing these wonders to us

@xJazon Жыл бұрын

this was an awesome first introduction - I really want to learn something new after programming with react/redux for the past years and this really helps to get me going and try this out for my own page. Thanks!!

@anyadatzaklatszjutub Жыл бұрын

go get some!

@semyaza555 Жыл бұрын

I had no idea people were still using redux.

@the-iter8 Жыл бұрын

@@semyaza555 It's like literally all over the place are you living under a rock bro

@semyaza555 Жыл бұрын

@@the-iter8 Living under a rock? More like ahead of the curve. There are *far* better libraries for state management now.

@chtoho4043 Жыл бұрын

@@semyaza555 Redux is the og, have some respect a hole

@R3mix97 Жыл бұрын

Thanks so much for this! I'm building my college senior project and have been trying to deal with a sizable full stack site just using plain express with API interactions. I've never used Next before and think it'll help me out a lot!

@uzairhaider1016 Жыл бұрын

I was building a hobby project. a task managemnet system .using next, tailwind and mongosb. i started six months ago in Next 12, implemented authentication system, added project and task in db. then i got busy in my job. last week I migrated my app to Next 13. and got number of Hydration errors. After your video I realized I have to move my pages from pages to app folder. I read the documentation but the way you explained (about) , [about] and about. Wonderful.! thanks.

@rutchjohnson Жыл бұрын

love love love these! Been waiting for some NEXT.js 13 updates from Fireship :)

@johnpapathanasis3248 Жыл бұрын

I mainly my work ends after the infrastructure stuff (sometmes devops) but I watch your videos anyway. Its fun to see what the next guy will try to do on a system. So practicaly as an outsider this framework is the one that impresed me the most. Very nice...

@hfuhruhurr Жыл бұрын

9 minutes to watch, 90 minutes to understand. love it! thx for these.

@creepychris420 Жыл бұрын

when i watch you paste in chunks of code like fetch settings (or replay record whatever) it makes me realise how much effort goes into making these videos. you don't get 9m of a++ contint from nothing

@dkaigorodov Жыл бұрын

It is the first time I hear about PocketBase, feels like it is the most valueable thing in this video for me.

@PhilipAlexanderHassialis Жыл бұрын

An excellent introduction! Amazing video, well done Jeff!

@xyz-ey7ul Жыл бұрын

next js had to end the year in style. what a gift.

@omarimai7428 Жыл бұрын

weeks of searching squeezed into one video , thank you a lot

@brad7957 Жыл бұрын

This is awesome. Being able to separate the loading and error pages is really neat. I hope Nuxt can get something similar!

@whkoh7619 Жыл бұрын

Extremely cool Jeff! Needed a frontend tutorial to go with PocketBase and this is IT!

@berrodev Жыл бұрын

What else can i say my whole youtube channel is inspired from this legend.

@klukiyan Жыл бұрын

this is trully epic. the ratio of useful information /minute is booming. I had to pause the video several times to give my brain a break to digest all the cool info :)

@alvaromartin6301 Жыл бұрын

I though I was the only one xD

@ReyHaynes Жыл бұрын

Sheesh...what an effective introductive tutorial. I'm looking into creating some tutorials soon, and you are an inspiration for getting straight to the point!

@scribl1 11 ай бұрын

Yeah, I like the way he cuts between chunks of code, instead of filming himself typing everything. It involves a lot more pausing for a first watch/code-along, but it makes the video sooo much easier to use for later reference. I have some tutorials I want to make for Godot, and this is definitely inspiring me as well.

@tomasburian6550 Жыл бұрын

That router refresh is nothing short of awesome. Love that function.

@unforgettable31 3 ай бұрын

Fancy schmany way of avoiding real state management.

@richardobaze3249 Жыл бұрын

This was absolutely brilliant. Everything i needed to know plus it was concise and very understandable. Thank you so much

@hamzakyamanywa9792 Жыл бұрын

First next 13 tutorial and its fire 🔥 🔥

@aryankatebain Жыл бұрын

I was waiting for this video since Next 13 came out last week

@chawza8402 Жыл бұрын

I just tried NextJs but still using the previous method and it's really awesome. I hope the new way won't cause problems my newly created project since I have a use of it

@cryptic1692 Жыл бұрын

the most efficient tutorial ever keep it up jeff

@hugodsa89 Жыл бұрын

This guy is a machine. Holy shit man.

@hugodsa89 Жыл бұрын

No but seriously, I have noticed you've burnt out a few times before. Are you keeping this up at a healthy rate? Just a genuinely concerned viewer and fellow developer.

@yo1414 Жыл бұрын

Very good tutorial - direct and to the point! Thank you!

@diegoia1970 Жыл бұрын

That "hola mundo" in the example notes just won me!

@arno.claude Жыл бұрын

This was really good for a beginner to Next like me! Thanks, Jeff!

@surajgupta-vb6uz Жыл бұрын

this is like a treasure for beginners

@TradeWithJon Жыл бұрын

Man, Pocketbase is exactly what I was looking for, this is awesome, thanks!

@AkshayKumar-kz6zh Жыл бұрын

Deployed a Next.js 12 app to prod on Monday. Seeing this video today. Nice

@The_SSS Жыл бұрын

I didnt know how to data fetch in dynamic routes but this made it clear!! Thank you so much!!

@phucnguyen0110 Жыл бұрын

The perfect way to enjoy breakfast and then go to the desk and do some testing, thanks Jeff!

@HendriSchoeman Жыл бұрын

Awesome content as always. Nicely done!

@ScaerieTale Жыл бұрын

"When Angular 1 went to Angular 2, when Vue 2 went to Vue 3" and when C# 9 went to C# 10. That was a *huge* pain in the ascii. Year later me has a much better grasp of React and JS than year ago me had on C#, but I still really appreciate this guide. I've been wanting to get into Next, but held off to see what was coming in 13, so this is great for me!

@davidho1258 Жыл бұрын

pain in the ascii 😂

@masterflitzer Жыл бұрын

wdym c#9 to c#10? it's the best thing that could happen to the language and also it's 100% compatible with previous code

@thepaulcraft957 Жыл бұрын

Python 2 to 3 was the real shit

@n1hkrc Жыл бұрын

Thank you very much 😁 you have the best short courses on youtube 👍😎

@Sulls58 Жыл бұрын

absolutely crushed it. well done!

@bunnihilator Жыл бұрын

Very good. I like concise tutorials. Gets me all the essential ideas of a technology

@brayanjpm Жыл бұрын

claro , breve y conciso como simpre, es una joya tu canal

@faizanahmed9304 Жыл бұрын

great tutorial on Next 13. Thank you Jeff!!

@juhlooo Жыл бұрын

wow just learned react and this makes life so much easier for smaller projects

@EmielvanGoor Жыл бұрын

I'm loving Next 13! Great improvements!

@LarsRyeJeppesen Жыл бұрын

I can't get most providers working with the new /app structure yet - next-translate for example.

@etcroot Жыл бұрын

I'm loving the tiny file name corrections

@brad.myrick4633 Жыл бұрын

You're on top of it, thanks for this

@yt-sh 7 ай бұрын

👏👏👏, this should have millions of views!

@david.thomas.108 4 ай бұрын

Great clear and succinct overview. Thanks!

@Baraka0369 Жыл бұрын

Dude, thanks a lot for Pocketbase... Was looking for an alternative to Strapi, you rock... Simple, realtime out of the box, file storage, authentication..... My man 💘💘

@marccawood 8 ай бұрын

Strapi is a CMS, not the same as a database.

@MasayaShida Жыл бұрын

How have i not heard of Pocketbase before! Great video

@tithos Жыл бұрын

Thank you for doing this so quick!

@nash-nk-p Жыл бұрын

Thank you, Jeff. I've learned a lot!

@iCodeArtisan Жыл бұрын

Wow! I learnt a whole lot in just 9 minutes

@toshirohitsugaya1465 9 ай бұрын

Thank you so much, just wanted a quick intro and this was perfect.

@kingshukcs Жыл бұрын

You make me wanna actually sit down and learn NEXT.

@CarlosIsaacRSison Жыл бұрын

And you just got a new subscriber, fast and very informative, I love this channel

@GoldenBeholden Жыл бұрын

I love these programming videos for programmers -- 9 minutes really is plenty if you don't bother explaining what a variable is. Could you do one of these for SvelteKit? They recently updated some of their routing file structure as well.

@explosionimplosion4679 Жыл бұрын

Yes PLEASE!! I've mainly moved away from SvelteKit because of this

@maskman4821 Жыл бұрын

@@explosionimplosion4679 just do both man 😅

@didiercatz 11 ай бұрын

I'd highly suggest you give it another try. Having worked on many larger applications with SvelteKit, the 'new' system actually much more productive than the old system. Especially with automatic types and colocation@@explosionimplosion4679

@talgatsaribayev821 Жыл бұрын

Thank you! Very much much appreciated.

@ibrahimmohammed3484 Жыл бұрын

great video, saved for later access

@romulororizz Жыл бұрын

You're a blessing to this world

@petrsehnal7990 Жыл бұрын

What a helpful video! Thank you!

@mooopplplp5581 Жыл бұрын

I was always checing channel wating that video , thanks man

@codewithguillaume Жыл бұрын

God I did almost exactly the same video :) Thanks for this Fireship, you are the best !

@valentinbenitobousquet6166 Жыл бұрын

Great work, as always!

@aimpizza6823 11 ай бұрын

I love this style of video

@pracco Жыл бұрын

Really awesome stuff, thanks, man.

@ramandev_ Жыл бұрын

I felt in love with pocket base

@Stormface16 Жыл бұрын

Incredible amount of high value info in such a small amount of time, thanks! What about the other way around as well? Have something production/enterprise ready in Next oder React and go over the best practices? Many KZfaq tutorials or courses only go over the basics. Would be highly appreciated :)

@Sindoku Жыл бұрын

Thanks for awesome video my dude!

@ernestomotta5178 9 ай бұрын

Thanks, mate, you are a life saver

@DGDG0000000 Жыл бұрын

Very nice tuto, thank you.

@harshdeepbilaiya3076 Жыл бұрын

thanks! i am a full stack developer now.

@philipepics Жыл бұрын

practical video, thx for efficient video 💙

@zhotpotrecipe Жыл бұрын

Wow this looks great

@GuardingPearSoftware Ай бұрын

Awesome! Thank you ☺️

@italktocomputers1901 Жыл бұрын

used remix for a big enterprise project. next js just added most of what made remix remix. powerful!

@configurista Жыл бұрын

That was awesome, thanks!

@elsontimana258 Жыл бұрын

Amazing tutorial ❤

@designSentry Жыл бұрын

Great stuff, thanks!

@the_real_cookiez Жыл бұрын

Cool to see how they use a similar routing system as Dash!

@ghevisartor6005 Жыл бұрын

amazin video, I normally work with blazor, some things are very similar. Will try next.js around for sure.

@transatlant1c Жыл бұрын

Thanks Jeff, I’ve been teetering on the edge of diving into next, now I’m diving in

@jeppe_bech Жыл бұрын

Very good video, enjoyed it alot. Thanks, gime more like this.

@Joe-sm7mf Жыл бұрын

After adding notes/[id]/error.tsx I was getting the error: "Functions cannot be passed directly to Client Components because they're not serializable." Adding 'use client' to the top of error.tsx got me past it.

@inqzz Жыл бұрын

THANK YOU SO MUCH

@gonzalomolina6042 Жыл бұрын

Upvoting this so it goes up in the relevant comments. Thanks!!

@russelschuster8036 5 ай бұрын

You're awesome man! I spent half a day reading documents, rewriting code and what not. If you ever make a channel, let me know, I will be the first to subscribe.

@Joe-sm7mf 5 ай бұрын

@@russelschuster8036 Glad you found it useful. No plans for a channel for me but what got me started making these comments was finding answers through others comments on other videos. So pass it on when you find your way through this kind of shizah. :D