Next.js 13 - Building a Todo App
Next.js is a powerful Javascript framework that lets you build fast, efficient, and scalable web Applications with ease. In this tutorial, we'll build a todo app using Next.js 13.
By the end of this video, you'll be able to build a todo app from scratch, using Next.js 13 and all it's new features including app folder, server components, client components, data fetching and data mutations. So make sure to watch the entire video, and be prepared to learn something new!
Learn Programming (Skillshare FREE trial): https://skl.sh/3cYxUP5
Mock API we use in the video: https://github.com/tumetus/json-api
Todo app code: https://github.com/tumetus/next-js-13...
My courses:
React basics: https://skl.sh/2XAKn7u
HTML & CSS for beginners: https://skl.sh/34wvGUH
Draft.js basics: https://skl.sh/3cJ5Hw4
💻 MY GEAR
MY CODIGN LAPTOP: https://amzn.to/3MI90ci
MY MOUSE: https://amzn.to/3mr3no9
MY KEYBOARD: https://amzn.to/3GIoMjh
MY MICROPHONE: https://amzn.to/3KCDPfv
MICROPHONE BOOSTER: https://amzn.to/43trLWB
MY MICROPHONE ARM: https://amzn.to/3oaf5DW
MY CAMERA: https://amzn.to/3UxyvyJ
MY STREAMING LIGHT: https://amzn.to/3KE0PuE
Connect with me:
Website: https://tuomokankaanpaa.com
My newsletter: https://tuomokankaanpaa.com/newsletter
Twitter: / tumee
Skillshare: https://www.skillshare.com/r/user/tume
Timestamps
00:00 Building a Todo app
00:27 Setting up the application
01:20 Structuring the application
02:43 Creating components for different sections
04:13 Why we use separate components?
04:58 API we will use
05:53 Fetching todo items
08:04 Creating client component
10:46 Marking a todo as done
13:29 Data mutations in Next.js 13
16:39 Deleting a todo
18:52 Fixing Fetch & CORS errors with Next.js rewrites
22:05 Next.js Rewrites & Server components
24:04 Adding todo items
#nextjs #nextjsconf #tutorial