Next.js 13 - The Basics

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

[@berkinanik]

the most efficient 9 mins of 2022, thanks Jeff!

[@monzerfaisal3673]

So efficient it's not even 9 mins!

[@SzalayIstvan]

You can build a career out of this 9 minutes.

[@sakosa8784]

My names jeff

[@kasper_573]

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

[@unforgettable31]

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.

[@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!

[@bossdaily5575]

This is the framework of all time

[@willinton06]

It’s nexing time

[@SeeWhatIs]

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

[@Patrity]

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

[@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"

[@ThatTrueCJ201]

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

[@abhishekvishwakarma9045]

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

[@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!

[@sommmtoooo]

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

[@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.

[@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

[@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!

[@PhilipAlexanderHassialis]

An excellent introduction! Amazing video, well done Jeff!

[@brad7957]

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

[@hfuhruhurr]

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

[@rutchjohnson]

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

[@transatlant1c]

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

[@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

[@whkoh7619]

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

[@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...

[@xyz-ey7ul]

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

[@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.

[@dkaigorodov]

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

[@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]

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.

[@berrodev]

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

[@richardobaze3249]

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

[@nooutidev]

Very deep and precise explanations, thanks!

[@omarimai7428]

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

[@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 KZbin tutorials or courses only go over the basics. Would be highly appreciated :)

[@arno.claude]

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

[@aryankatebain]

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

[@The_SSS]

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

[@toshirohitsugaya1465]

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

[@tomasburian6550]

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

[@unforgettable31]

Fancy schmany way of avoiding real state management.

[@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]

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

[@phucnguyen0110]

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

[@hamzakyamanywa9792]

First next 13 tutorial and its fire 🔥 🔥

[@cryptic1692]

the most efficient tutorial ever keep it up jeff

[@yo1414]

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

[@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

[@etcroot]

I'm loving the tiny file name corrections

[@HendriSchoeman]

Awesome content as always. Nicely done!

[@diegoia1970]

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

[@faizanahmed9304]

great tutorial on Next 13. Thank you Jeff!!

[@n1hkrc]

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

[@TradeWithJon]

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

[@bunnihilator]

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

[@jaejonmalloy1341]

Seriously, if efficiency was a drug, Jeff is the only dealer I'd go to, when I'm in need of that pure, uncut, fire ass shit. 🤘

[@ernestomotta5178]

Thanks, mate, you are a life saver

[@tithos]

Thank you for doing this so quick!

[@david.thomas.108]

Great clear and succinct overview. Thanks!

[@nash-nk-p]

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

[@MasayaShida]

How have i not heard of Pocketbase before! Great video

[@Sulls58]

absolutely crushed it. well done!

[@CarlosIsaacRSison]

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

[@AkshayKumar-kz6zh]

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

[@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]

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

[@yt-sh]

👏👏👏, this should have millions of views!

[@juhlooo]

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

[@surajgupta-vb6uz]

this is like a treasure for beginners

[@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.

[@joan.paucar]

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

[@brad.myrick4633]

You're on top of it, thanks for this

[@kingshukcs]

You make me wanna actually sit down and learn NEXT.

[@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

[@valentinbenitobousquet6166]

Great work, as always!

[@mooopplplp5581]

I was always checing channel wating that video , thanks man

[@iCodeArtisan]

Wow! I learnt a whole lot in just 9 minutes

[@aimpizza6823]

I love this style of video

[@romulororizz]

You're a blessing to this world

[@Sindoku]

Thanks for awesome video my dude!

[@pracco]

Really awesome stuff, thanks, man.

[@ibrahimmohammed3484]

great video, saved for later access

[@petrsehnal7990]

What a helpful video! Thank you!

[@ramandev_]

I felt in love with pocket base

[@xiaoma7104]

why is this so smooth

[@talgatsaribayev821]

Thank you! Very much much appreciated.

[@elsontimana2155]

Amazing tutorial ❤

[@philipepics]

practical video, thx for efficient video 💙

[@jeroenw9853]

Welcome back, PHP!

[@JackStepanyan]

Great video, one note. At 7:40 you mention that 'use client' is used to tell Next not to render the component on the server, rather only on the browser, but that is not true. It still will be partially rendered on the server (static parts) and dynamic parts will be rendered on the client.

[@codewithguillaume]

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

[@AngelHdzMultimedia]

I hope you give Nuxt 3 and Vue the same attention you have been giving to Next and React.

[@pradikapratama9895]

the most valuable 9 mins of my life

[@ghevisartor6005]

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

[@zhotpotrecipe]

I can't believe that I don't used react or next in past but still understood what you said

[@zhotpotrecipe]

Wow this looks great

[@AndersonMancini]

Wow. I felt like Neo from the Matrix learning kung-fu 😎. Amazing tutorial hahah. Congrats.

[@the_real_cookiez]

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

[@italktocomputers1901]

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

[@raymondmichael4987]

Thanks, I’m waiting at alpha station, when Nextjs bus gets here I’ll jump in

[@MaxFung]

i fuckin love this guy man

[@nabinkarki1196]

awesome updates on next 13 . yoooo

[@DGDG0000000]

Very nice tuto, thank you.

[@jeppe_bech]

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

[@JLarky]

4:31 let's use typescript for this tutorial. Processeds to "as any[]" right away :-)

[@harshdeepbilaiya3076]

thanks! i am a full stack developer now.