Portfolio 2: How to Make a Contact Form in Next.js 13 & TS!

Exploring the New Fetching Routing API
Next.js 13 + TypeScript + TailwindCSS

Discover the powerful combination of TypeScript and Next.js, and learn how to harness their full potential in modern web development. With TypeScript expertise in high demand, it's time to embrace this versatile language. Explore the latest routing features in Next.js 13 to enhance your applications' flexibility and performance. Stay ahead of the curve and become a sought-after developer by mastering these essential tools. WE will create a Dynamic Contact Form in Next.js 13 & TypeScript.

💻 Source Code: [https://github.com/timeToCode-ali/portfolio-app/tree/video-1-initial](https://github.com/timeToCode-ali/portfolio-app/tree/video-1-final)

🌟 BONUS: FREE CONSULTATION
1. Complete the tutorial and add one of the suggestions I mention
2. Like & Comment to let me know you've finished. (and Subscribe if you haven't yet)
3. Get over Twitter and send me a link to your repo on Github. You can DM me or tweet me. (you can also send me an email, but I use more twitter. (Feel free to follow me on twitter to be up to date with my content)
4. I'll review all the steps are completed
5. We'll set up a call at a convenient time for both of us

Looking to Connect?:
💙 [https://twitter.com/time_tocode](https://twitter.com/time_tocode)
💌 [time2code.ali@gmail.com](mailto:time2code.ali@gmail.com)
⌨️ [https://github.com/timeToCode-ali](https://github.com/timeToCode-ali)
📃 [https://medium.com/@time2code.ali](https://medium.com/@time2code.ali)
🟩 [https://rumble.com/c/c-2168480](https://rumble.com/c/c-2168480)

*Videos you may Like to watch:*

🎥 Build a Portfolio with NEXT.js13 & TypeScript & TailwindCSS #1
[https://youtu.be/eOH5QXEgEos](https://youtu.be/eOH5QXEgEos)

🎥 Build and deploy a Personal Website with Nextjs 13 and Tailwind CSS
[https://youtu.be/eOH5QXEgEos](https://youtu.be/eOH5QXEgEos)

🎥  Build a Word Scramble Game with React JS
[https://www.youtube.com/watch?v=hJYG_jBURYE](https://www.youtube.com/watch?v=hJYG_jBURYE)

🎥 *Build a responsive card with CSS and Flex-box (& import your own fonts)*[https://www.youtube.com/watch?v=osMvyD-wHjY](https://www.youtube.com/watch?v=osMvyD-wHjY)

🎥 *Build a Full Stack Next.js APP from scratch (Step-by-Step for beginners)*[https://www.youtube.com/watch?v=0BDfyWzw5Hw](https://www.youtube.com/watch?v=0BDfyWzw5Hw)

🎥 *NEXT.js 13 Exploring the New Features*[https://www.youtube.com/watch?v=7Z69FzlBJwo](https://www.youtube.com/watch?v=7Z69FzlBJwo)

🎥 *How I Became a Software Engineer without a CS Degree | my experience + tips*[https://www.youtube.com/channel/UCImaDQuXp68xnaLuVR1dhfQ](https://www.youtube.com/channel/UCImaDQuXp68xnaLuVR1dhfQ)

🎥 The TRUTH about Lies and Coding - A software engineer's perspective
[https://www.youtube.com/watch?v=h13HHII40os](https://www.youtube.com/watch?v=h13HHII40os)

🎥 The Right Mindset to becoming a GREAT software engineer (6 TIPS)
[https://www.youtube.com/watch?v=42K4i58xqAI](https://www.youtube.com/watch?v=42K4i58xqAI)

🎥 *Timestamp* 6 Hacks for Software Engineers in 2023*Timestamp*[https://www.youtube.com/watch?v=EY21FvwURWs](https://www.youtube.com/watch?v=EY21FvwURWs)

🎥 *Difference between Software Engineer and Software Developer in 2023*[https://www.youtube.com/watch?v=0HQPnPzUQSo](https://www.youtube.com/watch?v=0HQPnPzUQSo)

*Timestamp*

🔵 00:00 Build a Portfolio Website
🔵 03:24 Design & Build Overview
🔵 05:35 Building My Projects Page
🔵 10:36 Building Projects Card -
🔵 32:51 Building a Contact Form with Next.js
🔵 44:16 Build a Form with Next.js 13 - use client component
🔵 57:08 Submit a form with Next.js 13
🔵 01:19:40 APP API Route in Next.js 13 - New way of Fetching data
🔵 01:37:40 Final Words!