Upgrade your project to Next.js 14 and Supercharge it with TypeScript
1.3 هزار بار بازدید -
8 ماه پیش
-
In this YouTube video, we
In this YouTube video, we dive into converting an audio player component to NextJS and adding TypeScript. We cover topics such as defining props with specific types, handling default values, utilizing useRef with specified types, fixing errors related to custom CSS properties, and handling automatic playing. Throughout the video, we explore the benefits of TypeScript in catching errors and improving code quality.
🤖 Code on GitHub:
Starting Point - https://github.com/selfteachme/0051-a...
Ending Point - https://github.com/selfteachme/0052-a...
This is part an Ongoing Series:
Part 1️⃣ - How to Build a Custom Audio Player in React - How to Build a Custom Audio Player in...
Part 2️⃣ - Debugging Inside VS Code - Debugging Inside VS Code
Part 3️⃣ - Adding Bookmarks or Chapters to Our Custom Audio Player - Adding Bookmarks or Chapters to our C...
Part 4️⃣ - Creating Time Jumps for Our Custom Audio Player - Creating Time Jumps for our Custom Au...
Part 5️⃣ - When the Audio Player Reaches the End - Adding a Feature: When the Audio Play...
Part 6️⃣ - Custom Hooks in React - Custom Hooks in React
Part 7️⃣ - THIS VIDEO!
Chapters:
00:00 - Introduction
01:24 - Getting the Project Running
03:43 - Upgrading to NextJS 14
08:01 - Adding TypeScript
19:12 - Creating Type Definitions
26:34 - Fixing Type Errors
32:43 - Debugging the Player
🔗 Links:
- Warp Terminal - https://www.warp.dev/
- Oh My Zsh - https://ohmyz.sh/
- Command Power User (Wes Bos) - https://commandlinepoweruser.com/
- Migrating to Next.js 14 - https://nextjs.org/docs/pages/buildin...
- Adding TypeScript to an existing Next.js project - https://nextjs.org/docs/pages/buildin...
- Dev.to: "Strict Mode" TypeScript config options - https://dev.to/jsdev/strict-mode-type...
- Error Lens VS Code Extension - https://marketplace.visualstudio.com/...
🤖 Code on GitHub:
Starting Point - https://github.com/selfteachme/0051-a...
Ending Point - https://github.com/selfteachme/0052-a...
This is part an Ongoing Series:
Part 1️⃣ - How to Build a Custom Audio Player in React - How to Build a Custom Audio Player in...
Part 2️⃣ - Debugging Inside VS Code - Debugging Inside VS Code
Part 3️⃣ - Adding Bookmarks or Chapters to Our Custom Audio Player - Adding Bookmarks or Chapters to our C...
Part 4️⃣ - Creating Time Jumps for Our Custom Audio Player - Creating Time Jumps for our Custom Au...
Part 5️⃣ - When the Audio Player Reaches the End - Adding a Feature: When the Audio Play...
Part 6️⃣ - Custom Hooks in React - Custom Hooks in React
Part 7️⃣ - THIS VIDEO!
Chapters:
00:00 - Introduction
01:24 - Getting the Project Running
03:43 - Upgrading to NextJS 14
08:01 - Adding TypeScript
19:12 - Creating Type Definitions
26:34 - Fixing Type Errors
32:43 - Debugging the Player
🔗 Links:
- Warp Terminal - https://www.warp.dev/
- Oh My Zsh - https://ohmyz.sh/
- Command Power User (Wes Bos) - https://commandlinepoweruser.com/
- Migrating to Next.js 14 - https://nextjs.org/docs/pages/buildin...
- Adding TypeScript to an existing Next.js project - https://nextjs.org/docs/pages/buildin...
- Dev.to: "Strict Mode" TypeScript config options - https://dev.to/jsdev/strict-mode-type...
- Error Lens VS Code Extension - https://marketplace.visualstudio.com/...
8 ماه پیش
در تاریخ 1402/08/09 منتشر شده
است.
1,300
بـار بازدید شده