Learn Next.js 14 - Full course for beginners [3 hours] 2023
Vložit
- čas přidán 24. 10. 2023
- Get my full-stack Developer Masterclass for $12 👉 dub.sh/thedevelopercourse
👇 Thanks for watching! Please subscribe ❤️
🔥 thedevelopercourse 👉 dub.sh/thedevelopercourse
• Discord 👉 dub.sh/codewithg-discord
• Website 👉 dub.sh/codewithguillaume
• Newsletter 👉 dub.sh/codewithg
• Repositories 👉 dub.sh/codewithg-repos
⚡ Shipfast - The NextJS boilerplate to build your SaaS 👉 dub.sh/codesf
⚡ Supastarter - The Supabase boilerplate to build your SaaS 👉 dub.sh/supastarter
⚡ Submagic - AI CZcams shorts tool 👉 dub.sh/codewithg-submagic
⚡ Amicons - 300+ unique icons 👉 dub.sh/amicons
CZcams studio
• 4K Insta 360 Cam 👉 amzn.to/3U8Km7V
• Microphone Shure MV7 👉 amzn.to/3J7fAGf
• MacBook Pro 16.2” M3 Pro 12‑core CPU, 18GB Unified Memory, 512GB SSD Storage 👉 amzn.to/49uCd1X
• MacBook Air 13.6” M2 chip, 8GB RAM, 256GB SSD Storage 👉 amzn.to/3xs3STY
• Airpods Max Pro 👉 amzn.to/3VVTbTA
• JBL Pulse 5 👉 amzn.to/3U8pRs0
• Shure RK345 👉 amzn.to/3TKWU3X
• Stands Ds7200B 👉 amzn.to/3vI3eRC
• Stands MS7201B 👉 amzn.to/3xBStRi
• Mini Tripod Kit 👉 amzn.to/3vzsmKv
• Key Light 👉 amzn.to/43WmpnC
• Rim Light 👉 amzn.to/3PUer8J
• Background Light 👉 amzn.to/4asv4AG
Social
• LinkedIn 👉 dub.sh/6vbNPaH
• X 👉 dub.sh/codewithg-x
Others
✉️ Business Request 👉 dub.sh/codewithg-business
🔥 Join Peerlist, the Tech LinkedIn 👉 dub.sh/peerlist
VSCode themes
- Tokyo Night Storm (blue)
• Default Dark Modern
📈 Popular videos
- Learn Next, Supabase & Resend 👉 dub.sh/next-resend-supabase
• Learn Nuxt 3 👉 dub.sh/nuxt-3
• Learn Next & Shadcn 👉 dub.sh/nextjs-shadcn
• Learn Supabase 👉 dub.sh/supabase
• Learn Next 14 👉 dub.sh/nextjs-14
• Learn Next & Supabase 👉 dub.sh/next-supabase
Thank you :)
Guillaume
[EDIT]: Next.js 14 just came out, 3 days after this release. It turns out that there's no huge difference with Next.js 13. For no confusion, I renamed this course for latest version 👍 Thanks for watching !
Chapters:
0:25 Create an app
13:39 Deployment
18:47 Docker
26:28 Pages
40:51 Router
47:44 Link
56:45 Components
1:12:42 Layouts
1:18:11 Images
1:26:46 API routes
1:36:46 Fonts
1:42:22 Middleware
1:51:09 SEO & Metadata
2:04:31 Params & Queries
2:12:01 Fetching
2:26:23 Caching
2:36:57 Notifications
2:44:00 Context
2:54:05 Store
3:03:08 Actions
💌 Top 5 articles, links, videos of the week every Sunday 👉 tally.so/r/npDeOP
there's a slight change in next 14. Instead of props.children ... a person has to ({props, children}:any)
then....
use {children} vs {props.children} ... so the new version has a slight syntax difference. for chapter Components at 1:11:04
@@codewithguillaume does Next 14 stil uses the /api/..folder , supposed I just want to create an API alone to be consumed by other apps ,kindly could you elerborate on this,thanks
Thank you Guillaume!
Loved all the details, tips and tricks!
it is great tutorial, thank you
I need to watch this again!
Amazing course! Learned a lot! Thank you!
Happy that I helped ! More is coming my friend !
Thanks sir🎉
Legend!
Good Job
Next js vs Nuxt js, Which one you love the most?
Great lesson. Please tell me which theme you are using for vscode
Thank it helps.
Thanks my friend 😉👍
Sir,
1st of all *Thank You* for this latest tutorial !
i have a doubt, regarding API routes. How do you return error that occurs in API routes ?
cool video)
Great introductory course for next js 13 but i'd like to point that if use "use client" on your root page.tsx or in your layout.tsx such as in (creating your context) you basically made your whole application client side and you lose the benefits of the new features of next js and feel free to correct me if i'm wrong tho
@codewithguillaume Amazing video!! For some reason my docker does not auto update my browser when I make changes. Any suggestions?
Guillaume, you are amazing.
Thank you my friend more is coming 😉
Great tutorial ! Which vscode plugin do you have which adds custom icons for the standard folders, e.g "node_modules", ".next", "src/app" ?
And re the middware topic where you defined a constant "isLoggedIn", is it instantiated as a global singleton in the server process or per client ? Logged-in state can be different for multiple clients being served by the same backend runtime.
merci, dans les ressources youtube il y a ta chaine aussi :)
I wonder, why next js is better than using react?
Which one give better performance
what os you use?
before learn this, do i need to learn react js first sir?
hwo can i make my terminal look like yours within vs?
ZSH ❤️
@@codewithguillaume sure"" but how do you get to have all these nested GET, PSOT requests listed :D
Are you french ( for the accent ) ^^ ?
definitively yes !
how we can use zustand with both server and client component can anyone help me?
Make it a separate file and call it whenever you need it. Make sure it's a "use client"
You can use it in the client component only.
you sound like a Nigerian haaha but I know your French lol
Thank you very much for the video... you cleared up a lot of doubts... Hopefully you will be encouraged to take a second part with good practices and deepening more some topics.
Do you have DISCORD?
Greetings Jose Grillo from Venezuela
Thanks my friend ! This is really nice - more is coming ! I used to have one but were not that active on it 😉