Learn Next.js 14 - Full course for beginners [3 hours] 2023

Get access to my private courses 👉 dub.link/devco...
Thanks for watching! Please subscribe ❤️
Guillaume
👇
Read my adventures
👉 dub.link/newsl...
Join my Discord
👉 dub.link/discord
Book a coaching
👉 dub.link/guill...
Looking for a repository?
👉 dub.link/repos
Visit my website
👉 dub.link/codew...
Install my package UserItem
👉 dub.link/useritem
💥 TOP VIDEOS
Learn Nuxt
👉 dub.link/nuxt
Learn Nextjs
👉 dub.link/next
Learn Supabase
👉 dub.link/supabase
⚙️
• Theme that I use: VSCode Dark
• VSCode Icons package: miguelsolorio.symbols
• Snippets: my own, coming soon :)
Thank you :)
Guillaume

[@codewithguillaume]

[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

[@codewithguillaume]

💌 Top 5 articles, links, videos of the week every Sunday 👉 tally.so/r/npDeOP

[@LibraryOfTheOligarchs]

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

[@therevealmusic]

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

[@tomascarignano5002]

Loved all the details, tips and tricks!

[@avikpaul]

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.

[@daretsuki6988]

Amazing course! Learned a lot! Thank you!

[@codewithguillaume]

Happy that I helped ! More is coming my friend !

[@HadisSol-ii3rt]

you explain great, thanks a lot🌺

[@gorkemgok9313]

Guillaume, you are amazing.

[@codewithguillaume]

Thank you my friend more is coming 😉

[@AlexStr-h9t]

Great lesson. Please tell me which theme you are using for vscode

[@infinitystore2890]

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

[@AnggaRisky]

it is great tutorial, thank you

[@Ismail-hd4yz]

I wonder, why next js is better than using react?
Which one give better performance

[@floppyBE565]

merci, dans les ressources youtube il y a ta chaine aussi :)

[@Beast80K]

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 ?

[@razvanfrandes]

Thank you Guillaume!

[@yoskokleng3658]

before learn this, do i need to learn react js first sir?

[@DJBenito304]

I need to watch this again!

[@sumitbaghel6203]

Thank it helps.

[@codewithguillaume]

Thanks my friend 😉👍

[@marc-lou]

Legend!

[@yoskokleng3658]

Next js vs Nuxt js, Which one you love the most?

[@ryanp787]

@codewithguillaume Amazing video!! For some reason my docker does not auto update my browser when I make changes. Any suggestions?

[@Grishopping]

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

[@codewithguillaume]

Thanks my friend ! This is really nice - more is coming ! I used to have one but were not that active on it 😉

[@spzagams2089]

Thanks sir🎉

[@WelfredAlmiron]

cool video)

[@ladiffaerence2491]

Good Job

[@wilonweb]

Are you french ( for the accent ) ^^ ?

[@jacquesmatike9289]

definitively yes !

[@maoustan]

what os you use?

[@guillegarciacardiel-cd8eu]

hwo can i make my terminal look like yours within vs?

[@codewithguillaume]

ZSH ❤️

[@guillegarciacardiel-cd8eu]

@@codewithguillaume sure"" but how do you get to have all these nested GET, PSOT requests listed :D

[@mahatohariom]

how we can use zustand with both server and client component can anyone help me?

[@joscript7846]

Make it a separate file and call it whenever you need it. Make sure it's a "use client"

[@jitxhere]

You can use it in the client component only.

[@Anonymous-yu7ge]

you sound like a Nigerian haaha but I know your French lol