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"
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
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
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.
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!!
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
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.
"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!
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!
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!
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.
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
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.
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!
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.
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 :)
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...
wow, late to the party but as someone who doesn't specialize in FE work, I see how this is easy to follow. Aside from that, it's great to see how tech has become easier to use, this pocketbase is nice!
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 💘💘
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
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.
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 UA-cam tutorials or courses only go over the basics. Would be highly appreciated :)
@@flamakespark its a mix of social network and ecommerce, its a complicated app that has 120K on client side 80k on server side, but thats not the point. alot of startups make this mistake to migrate to new and shiny thing while they have under 1k active users, I remember a tweet about startups that have more server than active users, If you have an app with at least 30k or more active users then I agree with you. if you migrate and squeeze couple of ms out of your app it will worth it, but currently I dont see a reason to migrate. in the best scenario it will make the page load from 100ms to 90ms right? and the worst part is that you have to merge serverside code into your components cause now they are server components so alot of thing has to change in your app structure.
This was really informative, the only thing I would have liked to see for insecure developers like myself is going through the inital settings of next.js, such as the use of ESLint, etc.
At 4:43 you skip over adding import Link from 'next/link'. Thank you for providing the source code and such an awesome video. Looking forward to the rest of the course!
Hey folks, in order for this to work, you have to add this to your next.config.js file: const nextConfig = { reactStrictMode: true, experimental: { appDir: true } }
Most companies aren’t just going to shift to next 13 overnight so don’t rush to learn this thinking it’s necessary. Get exposure to know what is changing and when needed learn it
We went from separating front end and backend and now we are getting back into it. Same shit with tailwind from BEM to inline atyling. Web Deployment is not really evolving anymore is just a war of frameworks and tools trying to solve a problem unnecessarily
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
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)
Jeff we had a pool on how long it would be, before we seen a more in depth Next 13 video out by you. I missed it by two days.... Look forward to seeing you on Shark Tank soon. Lets pimp out the fireship...
Frameworks are just tools. You choose tools what's best for your needs. Framework is overkill for static single landing pages. But if you're using Vanilla to code web apps, goodluck copy pasting codes.
@@keent I understand that point of view, but from my experience React is suited for EXTREMELY large scale apps, kinda like... IDK, Facebook maybe? It was built by and for a super-large team, and IMO it shouldn't be used for much else. For small and medium sized web apps, you simply cannot go wrong with Vanilla - even VSCode was built using plain ol' vanilla JS.
the most efficient 9 mins of 2022, thanks Jeff!
So efficient it's not even 9 mins!
You can build a career out of this 9 minutes.
My names jeff
Thanks, Peter
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"
"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!
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
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
This is the framework of all time
It’s nexing time
for next 2 weeks
The real next framework is SvelteKit
Wait next week for the new disruptive framework.
L framework, my brand new blazingly fast real deal life changer faster than any thing framework called "Noxt" is probably better, releasing next week
”I’ll be using typescript”, then proceeds to assert any for basically everything you’d use typescript for 😂
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.
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!!
go get some!
I had no idea people were still using redux.
@@semyaza555 It's like literally all over the place are you living under a rock bro
@@the-iter8 Living under a rock? More like ahead of the curve. There are *far* better libraries for state management now.
@@semyaza555 Redux is the og, have some respect a hole
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
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.
"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!
pain in the ascii 😂
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
Python 2 to 3 was the real shit
You covered so much in only 9 minutes, amazing work!
It is the first time I hear about PocketBase, feels like it is the most valueable thing in this video for me.
9 minutes to watch, 90 minutes to understand. love it! thx for these.
I enjoy the longer form content on this channel compared to your main channel! Thanks for your continuous education 🔥
Thanks Jeff, I was about watching an outdated hour+ tutorial on nextjs. You saved me and gave me all I needed to hear 🤗
That "hola mundo" in the example notes just won me!
finally someone who goes straight to the point
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!
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
Thanks Jeff, you made Next 13 so easy to understand 😌🔥excited for its stable release 🤩
What else can i say my whole youtube channel is inspired from this legend.
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!
next js had to end the year in style. what a gift.
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.
Yes PLEASE!! I've mainly moved away from SvelteKit because of this
@@explosionimplosion4679 just do both man 😅
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
This is awesome. Being able to separate the loading and error pages is really neat. I hope Nuxt can get something similar!
This guy is a machine. Holy shit man.
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.
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!
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.
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 :)
I though I was the only one xD
I was waiting for this video since Next 13 came out last week
That router refresh is nothing short of awesome. Love that function.
Fancy schmany way of avoiding real state management.
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. 🤘
I'm loving the tiny file name corrections
The perfect way to enjoy breakfast and then go to the desk and do some testing, thanks Jeff!
Deployed a Next.js 12 app to prod on Monday. Seeing this video today. Nice
love love love these! Been waiting for some NEXT.js 13 updates from Fireship :)
You make me wanna actually sit down and learn NEXT.
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...
weeks of searching squeezed into one video , thank you a lot
I hope you give Nuxt 3 and Vue the same attention you have been giving to Next and React.
wow, late to the party but as someone who doesn't specialize in FE work, I see how this is easy to follow. Aside from that, it's great to see how tech has become easier to use, this pocketbase is nice!
I didnt know how to data fetch in dynamic routes but this made it clear!! Thank you so much!!
wow just learned react and this makes life so much easier for smaller projects
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 💘💘
Strapi is a CMS, not the same as a database.
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
4:31 let's use typescript for this tutorial. Processeds to "as any[]" right away :-)
This was really good for a beginner to Next like me! Thanks, Jeff!
Extremely cool Jeff! Needed a frontend tutorial to go with PocketBase and this is IT!
Thanks, I’m waiting at alpha station, when Nextjs bus gets here I’ll jump in
the most efficient tutorial ever keep it up jeff
An excellent introduction! Amazing video, well done Jeff!
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.
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 UA-cam tutorials or courses only go over the basics. Would be highly appreciated :)
I've a feeling that this tutorial series is going to break the internet
First next 13 tutorial and its fire 🔥 🔥
For those startups that migrating to the Next 13, stay strong! It ain't easy, but worth it 🔥
How am I gonna migrate 200K lines of code to Next 13, It'll take at least 6 months!
Not sure it’s worth it
We might just rewrite everything in Qwik first.
@@sck3570 holy sht! What kind of app on Next has 200K lines? A Photoshop in browser?
@@flamakespark its a mix of social network and ecommerce, its a complicated app that has 120K on client side 80k on server side, but thats not the point. alot of startups make this mistake to migrate to new and shiny thing while they have under 1k active users, I remember a tweet about startups that have more server than active users, If you have an app with at least 30k or more active users then I agree with you. if you migrate and squeeze couple of ms out of your app it will worth it, but currently I dont see a reason to migrate. in the best scenario it will make the page load from 100ms to 90ms right? and the worst part is that you have to merge serverside code into your components cause now they are server components so alot of thing has to change in your app structure.
Thank you very much 😁 you have the best short courses on youtube 👍😎
The amount of info this guy puts in a single video is insane…I wonder how many hours of work for a 9 min video…
👏👏👏, this should have millions of views!
How have i not heard of Pocketbase before! Great video
I wish some of these beginner courses were actually for beginners.
This was really informative, the only thing I would have liked to see for insecure developers like myself is going through the inital settings of next.js, such as the use of ESLint, etc.
true. I just went with the preselected options and it was fine ^^
At 4:43 you skip over adding import Link from 'next/link'. Thank you for providing the source code and such an awesome video. Looking forward to the rest of the course!
I ran into this problem too, I'm new to Next.js.
this is like a treasure for beginners
I felt in love with pocket base
Hey folks, in order for this to work, you have to add this to your next.config.js file:
const nextConfig = {
reactStrictMode: true,
experimental: {
appDir: true
}
}
TY!!
What does it do? Does it enable not refreshing whole site?
After Next, you should now do Nuxt next.
Very good. I like concise tutorials. Gets me all the essential ideas of a technology
Thanks Jeff, I’ve been teetering on the edge of diving into next, now I’m diving in
This was absolutely brilliant. Everything i needed to know plus it was concise and very understandable. Thank you so much
I can't believe that I don't used react or next in past but still understood what you said
Thank you so much, just wanted a quick intro and this was perfect.
You've gotta check out Railway its unreal how easy it makes it to deploy with
thanks! i am a full stack developer now.
Hello there,
I am using Angular JS 1.4.9 in production👌
Cool to see how they use a similar routing system as Dash!
Most companies aren’t just going to shift to next 13 overnight so don’t rush to learn this thinking it’s necessary. Get exposure to know what is changing and when needed learn it
Man, Pocketbase is exactly what I was looking for, this is awesome, thanks!
the most valuable 9 mins of my life
used remix for a big enterprise project. next js just added most of what made remix remix. powerful!
And you just got a new subscriber, fast and very informative, I love this channel
Wow. I felt like Neo from the Matrix learning kung-fu 😎. Amazing tutorial hahah. Congrats.
Great clear and succinct overview. Thanks!
"I like it dangerously" kills me
God I did almost exactly the same video :) Thanks for this Fireship, you are the best !
Now I am going to add nextjs in my resume
I was always checing channel wating that video , thanks man
Didn't know u had another channel jeff.
U thought you could hide from us bru 😂
We went from separating front end and backend and now we are getting back into it. Same shit with tailwind from BEM to inline atyling. Web Deployment is not really evolving anymore is just a war of frameworks and tools trying to solve a problem unnecessarily
FYI: PostCSS and Tailwind are not yet supported by TurboPack.
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
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)
Form got reset because he added setTitle(''); and setContent(''), you can catch a glimpse of it when he is writing form.
It is indeed a page refresh. Seems hacky to me.
This is probably due to the default behaviour of the FormSubmit. An event.preventDefault should do the trick, right ?
@@GahMega it seems like it does
amazin video, I normally work with blazor, some things are very similar. Will try next.js around for sure.
Jeff we had a pool on how long it would be, before we seen a more in depth Next 13 video out by you. I missed it by two days.... Look forward to seeing you on Shark Tank soon. Lets pimp out the fireship...
absolutely crushed it. well done!
Wow! I learnt a whole lot in just 9 minutes
Very good tutorial - direct and to the point! Thank you!
This belongs on the main channel Jeff! Awesome work 👏
I could have sword I was doing this with PHP 20 years ago.
That's why my favourite framework is Vanilla. Whenever there's an update to Vanilla, all these other frameworks copy it for themselves.
Frameworks are just tools.
You choose tools what's best for your needs.
Framework is overkill for static single landing pages.
But if you're using Vanilla to code web apps, goodluck copy pasting codes.
@@keent I understand that point of view, but from my experience React is suited for EXTREMELY large scale apps, kinda like... IDK, Facebook maybe? It was built by and for a super-large team, and IMO it shouldn't be used for much else. For small and medium sized web apps, you simply cannot go wrong with Vanilla - even VSCode was built using plain ol' vanilla JS.
why is this so smooth