Тёмный

Next.js 13 - The Basics 

Beyond Fireship
Подписаться 391 тыс.
Просмотров 615 тыс.
50% 1

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

Опубликовано:

 

31 окт 2022

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 560   
@berkinanik
@berkinanik Год назад
the most efficient 9 mins of 2022, thanks Jeff!
@monzerfaisal3673
@monzerfaisal3673 Год назад
So efficient it's not even 9 mins!
Год назад
You can build a career out of this 9 minutes.
@sakosa8784
@sakosa8784 8 месяцев назад
My names jeff
@Keidakira
@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
@kasper_573 Год назад
”I’ll be using typescript”, then proceeds to assert any for basically everything you’d use typescript for 😂
@unforgettable31
@unforgettable31 2 месяца назад
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.
@snehasisdebbarman3106
@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
@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"
@bossdaily5575
@bossdaily5575 Год назад
This is the framework of all time
@willinton06
@willinton06 Год назад
It’s nexing time
@paprukas
@paprukas Год назад
for next 2 weeks
@AmxCsifier
@AmxCsifier Год назад
The real next framework is SvelteKit
@alanraftel5033
@alanraftel5033 Год назад
Wait next week for the new disruptive framework.
@theriser8751
@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
@Patrity
@Patrity Год назад
You covered so much in only 9 minutes, amazing work!
@xJazon
@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
@anyadatzaklatszjutub Год назад
go get some!
@semyaza555
@semyaza555 Год назад
I had no idea people were still using redux.
@the-iter8
@the-iter8 Год назад
@@semyaza555 It's like literally all over the place are you living under a rock bro
@semyaza555
@semyaza555 Год назад
@@the-iter8 Living under a rock? More like ahead of the curve. There are *far* better libraries for state management now.
@chtoho4043
@chtoho4043 Год назад
​@@semyaza555 Redux is the og, have some respect a hole
@ThatTrueCJ201
@ThatTrueCJ201 Год назад
I enjoy the longer form content on this channel compared to your main channel! Thanks for your continuous education 🔥
@abhishekvishwakarma9045
@abhishekvishwakarma9045 Год назад
Thanks Jeff, you made Next 13 so easy to understand 😌🔥excited for its stable release 🤩
@sommmtoooo
@sommmtoooo Год назад
Thanks Jeff, I was about watching an outdated hour+ tutorial on nextjs. You saved me and gave me all I needed to hear 🤗
@mattnield
@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
@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
@rutchjohnson
@rutchjohnson Год назад
love love love these! Been waiting for some NEXT.js 13 updates from Fireship :)
@hfuhruhurr
@hfuhruhurr Год назад
9 minutes to watch, 90 minutes to understand. love it! thx for these.
@hugodsa89
@hugodsa89 Год назад
This guy is a machine. Holy shit man.
@hugodsa89
@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.
@R3mix97
@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!
@PhilipAlexanderHassialis
@PhilipAlexanderHassialis Год назад
An excellent introduction! Amazing video, well done Jeff!
@omarimai7428
@omarimai7428 Год назад
weeks of searching squeezed into one video , thank you a lot
@whkoh7619
@whkoh7619 Год назад
Extremely cool Jeff! Needed a frontend tutorial to go with PocketBase and this is IT!
@richardobaze3249
@richardobaze3249 Год назад
This was absolutely brilliant. Everything i needed to know plus it was concise and very understandable. Thank you so much
@brad7957
@brad7957 Год назад
This is awesome. Being able to separate the loading and error pages is really neat. I hope Nuxt can get something similar!
@ReyHaynes
@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
@scribl1 10 месяцев назад
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.
@creepychris420
@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
@ScaerieTale
@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
@davidho1258 Год назад
pain in the ascii 😂
@masterflitzer
@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
@thepaulcraft957 Год назад
Python 2 to 3 was the real shit
@berrodev
@berrodev Год назад
What else can i say my whole youtube channel is inspired from this legend.
@xyz-ey7ul
@xyz-ey7ul Год назад
next js had to end the year in style. what a gift.
@johnpapathanasis3248
@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...
@yo1414
@yo1414 Год назад
Very good tutorial - direct and to the point! Thank you!
@dkaigorodov
@dkaigorodov Год назад
It is the first time I hear about PocketBase, feels like it is the most valueable thing in this video for me.
@arno.claude
@arno.claude Год назад
This was really good for a beginner to Next like me! Thanks, Jeff!
@aryankatebain
@aryankatebain Год назад
I was waiting for this video since Next 13 came out last week
@bunnihilator
@bunnihilator Год назад
Very good. I like concise tutorials. Gets me all the essential ideas of a technology
@GoldenBeholden
@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
@explosionimplosion4679 Год назад
Yes PLEASE!! I've mainly moved away from SvelteKit because of this
@maskman4821
@maskman4821 Год назад
@@explosionimplosion4679 just do both man 😅
@didiercatz
@didiercatz 10 месяцев назад
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
@uzairhaider1016
@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.
@The_SSS
@The_SSS Год назад
I didnt know how to data fetch in dynamic routes but this made it clear!! Thank you so much!!
@diegoia1970
@diegoia1970 Год назад
That "hola mundo" in the example notes just won me!
@TradeWithJon
@TradeWithJon Год назад
Man, Pocketbase is exactly what I was looking for, this is awesome, thanks!
@tomasburian6550
@tomasburian6550 Год назад
That router refresh is nothing short of awesome. Love that function.
@unforgettable31
@unforgettable31 2 месяца назад
Fancy schmany way of avoiding real state management.
@klukiyan
@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
@alvaromartin6301 Год назад
I though I was the only one xD
@n1hkrc
@n1hkrc Год назад
Thank you very much 😁 you have the best short courses on youtube 👍😎
@HendriSchoeman
@HendriSchoeman Год назад
Awesome content as always. Nicely done!
@hamzakyamanywa9792
@hamzakyamanywa9792 Год назад
First next 13 tutorial and its fire 🔥 🔥
@cryptic1692
@cryptic1692 Год назад
the most efficient tutorial ever keep it up jeff
@faizanahmed9304
@faizanahmed9304 Год назад
great tutorial on Next 13. Thank you Jeff!!
@phucnguyen0110
@phucnguyen0110 Год назад
The perfect way to enjoy breakfast and then go to the desk and do some testing, thanks Jeff!
@david.thomas.108
@david.thomas.108 3 месяца назад
Great clear and succinct overview. Thanks!
@jaejonmalloy1341
@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. 🤘
@tithos
@tithos Год назад
Thank you for doing this so quick!
@CarlosIsaacRSison
@CarlosIsaacRSison Год назад
And you just got a new subscriber, fast and very informative, I love this channel
@toshirohitsugaya1465
@toshirohitsugaya1465 8 месяцев назад
Thank you so much, just wanted a quick intro and this was perfect.
@nash-nk-p
@nash-nk-p Год назад
Thank you, Jeff. I've learned a lot!
@etcroot
@etcroot Год назад
I'm loving the tiny file name corrections
@Stormface16
@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 RU-vid tutorials or courses only go over the basics. Would be highly appreciated :)
@surajgupta-vb6uz
@surajgupta-vb6uz Год назад
this is like a treasure for beginners
@EmielvanGoor
@EmielvanGoor Год назад
I'm loving Next 13! Great improvements!
@LarsRyeJeppesen
@LarsRyeJeppesen Год назад
I can't get most providers working with the new /app structure yet - next-translate for example.
@yt-sh
@yt-sh 7 месяцев назад
👏👏👏, this should have millions of views!
@MasayaShida
@MasayaShida Год назад
How have i not heard of Pocketbase before! Great video
@joan.paucar
@joan.paucar Год назад
claro , breve y conciso como simpre, es una joya tu canal
@mooopplplp5581
@mooopplplp5581 Год назад
I was always checing channel wating that video , thanks man
@AkshayKumar-kz6zh
@AkshayKumar-kz6zh Год назад
Deployed a Next.js 12 app to prod on Monday. Seeing this video today. Nice
@iCodeArtisan
@iCodeArtisan Год назад
Wow! I learnt a whole lot in just 9 minutes
@Sulls58
@Sulls58 11 месяцев назад
absolutely crushed it. well done!
@Joe-sm7mf
@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
@inqzz Год назад
THANK YOU SO MUCH
@gonzalomolina6042
@gonzalomolina6042 11 месяцев назад
Upvoting this so it goes up in the relevant comments. Thanks!!
@russelschuster8036
@russelschuster8036 4 месяца назад
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
@Joe-sm7mf 4 месяца назад
@@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
@juhlooo
@juhlooo Год назад
wow just learned react and this makes life so much easier for smaller projects
@aimpizza6823
@aimpizza6823 10 месяцев назад
I love this style of video
@kingshukcs
@kingshukcs Год назад
You make me wanna actually sit down and learn NEXT.
@chawza8402
@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
@brad.myrick4633
@brad.myrick4633 Год назад
You're on top of it, thanks for this
@valentinbenitobousquet6166
@valentinbenitobousquet6166 Год назад
Great work, as always!
@Baraka0369
@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
@marccawood 7 месяцев назад
Strapi is a CMS, not the same as a database.
@romulororizz
@romulororizz Год назад
You're a blessing to this world
@petrsehnal7990
@petrsehnal7990 Год назад
What a helpful video! Thank you!
@ernestomotta5178
@ernestomotta5178 8 месяцев назад
Thanks, mate, you are a life saver
@pracco
@pracco Год назад
Really awesome stuff, thanks, man.
@ibrahimmohammed3484
@ibrahimmohammed3484 Год назад
great video, saved for later access
@CodeWithAhsan
@CodeWithAhsan Год назад
Hey Jeff, at 8:45, you say “without a full page refresh “. But I saw the browser reload button getting trigger and I assume it reloads the entire page for that. Also, the form got reset without any additional code. Does that mean the user would lose the state of the page? Especially when there could be different queries for different layouts in the same page
@khaledsanny4817
@khaledsanny4817 Год назад
as react team is paving the way to "reusable state" to enable resilient components w/ react18.. maybe that is why it behave like that.. Try to see if the state is lost or not... you can use ReactQuery or Swr to optimistically update the server state without you doing much... (well i guess)
@abhinav.sharma
@abhinav.sharma Год назад
Form got reset because he added setTitle(''); and setContent(''), you can catch a glimpse of it when he is writing form.
@JelleJelleJelle
@JelleJelleJelle Год назад
It is indeed a page refresh. Seems hacky to me.
@GahMega
@GahMega Год назад
This is probably due to the default behaviour of the FormSubmit. An event.preventDefault should do the trick, right ?
@kuravje484
@kuravje484 Год назад
@@GahMega it seems like it does
@JLarky
@JLarky Год назад
4:31 let's use typescript for this tutorial. Processeds to "as any[]" right away :-)
@jeppe_bech
@jeppe_bech Год назад
Very good video, enjoyed it alot. Thanks, gime more like this.
@talgatsaribayev821
@talgatsaribayev821 Год назад
Thank you! Very much much appreciated.
@ramandev_
@ramandev_ Год назад
I felt in love with pocket base
@Sindoku
@Sindoku Год назад
Thanks for awesome video my dude!
@ghevisartor6005
@ghevisartor6005 Год назад
amazin video, I normally work with blazor, some things are very similar. Will try next.js around for sure.
@AngelHdzMultimedia
@AngelHdzMultimedia Год назад
I hope you give Nuxt 3 and Vue the same attention you have been giving to Next and React.
@DGDG0000000
@DGDG0000000 Год назад
Very nice tuto, thank you.
@zhotpotrecipe
@zhotpotrecipe Год назад
Wow this looks great
@philipepics
@philipepics Год назад
practical video, thx for efficient video 💙
@elsontimana2155
@elsontimana2155 11 месяцев назад
Amazing tutorial ❤
@designSentry
@designSentry 11 месяцев назад
Great stuff, thanks!
@jeroenw9853
@jeroenw9853 Год назад
Welcome back, PHP!
@GuardingPearSoftware
@GuardingPearSoftware 14 дней назад
Awesome! Thank you ☺️
@transatlant1c
@transatlant1c Год назад
Thanks Jeff, I’ve been teetering on the edge of diving into next, now I’m diving in
@codewithguillaume
@codewithguillaume Год назад
God I did almost exactly the same video :) Thanks for this Fireship, you are the best !
@the_real_cookiez
@the_real_cookiez Год назад
Cool to see how they use a similar routing system as Dash!
@ggwellplayed4568
@ggwellplayed4568 21 день назад
Amazing work..
@mycode0
@mycode0 Год назад
Why would you use typescript if you will put any for types everywhere?
@timeforrice
@timeforrice Год назад
love this!
@razorjhon2622
@razorjhon2622 Год назад
Best Channel
@LarsRyeJeppesen
@LarsRyeJeppesen Год назад
FYI: PostCSS and Tailwind are not yet supported by TurboPack.
@harshdeepbilaiya3076
@harshdeepbilaiya3076 Год назад
thanks! i am a full stack developer now.