Next.js Dynamic Routes (App Router) | Edit Job Page with ID & Params – Real Project

In this video (Part 63 of our Job Portal Application using Next.js and MySQL), you will learn how to create dynamic routes in Next.js with a real-world use case.

We already have an Employer Dashboard where employers can post jobs and view them as cards.
Now, when an employer clicks on the Edit icon of any job card, we redirect them to a dynamic edit page using the job ID.

What you will learn in this video:

How dynamic routing works in Next.js (App Router)

How to create dynamic routes for editing jobs

How to redirect users to a dynamic page using router.push

How to extract dynamic route values using params in server components

How this dynamic ID will be used later to prefill job data (coming next)

⚠️ Note: In this video, we focus only on dynamic routing and params.
Prefilled form data and update logic will be covered in upcoming videos.

This is a must-watch if you are building dashboards, admin panels, or CRUD applications in Next.js.
----------------------------------------------------------------------------------
📂 Source Code
👉 GitHub Repo: https://github.com/thapatechnical/job-portal-nextjs

------------------------------------------------------------------------------------
🔗 Useful Playlists

📘 Next.js Full Stack Playlist:
https://youtube.com/playlist?list=PLwGdqUZWnOp0lwvSBaIzzgV9X0ZiZ-42O&si=aQ_TNBNNx5L7V_bn

⚛️ React.js Playlist:
https://youtube.com/playlist?list=PLwGdqUZWnOp1Rab71vx2zMF6qpwGDB2Z1&si=sDZRxsYNetYmojKd

💻 TypeScript Playlist:
https://youtube.com/playlist?list=PLwGdqUZWnOp0xfHQFmlL52b_6-QZ0mnk_&si=c4jfsd5ElDC1p0A5
------------------------------------------------------------------------------------
💸 Get All My YouTube Videos' Source Code for just ₹199! Grab Now - https://thapatechnical.shop/source-code

📺 Watch the complete Node.JS Playlist here :https://youtube.com/playlist?list=PLwGdqUZWnOp3KELplHtc-RnJ5xTUPqdgH&si=_ob8F88HYxCdspup

🔥 Access Source Code, PPT & Notes here for Free : https://www.thapatechnical.com/2024/11/introduction-to-nodejs.html
------------------------------------------------------------------------

🚀 Boost Your Skills with these Pre-Requisite Videos:

🔗 Best HTML Course - https://youtu.be/5ccq_nLHneE
🔗 Best CSS Course - https://youtu.be/MSICFljRcb4
🔗 JavaScript Basics Course Part 1 - https://youtu.be/13gLB6hDHR8
🔗 JavaScript Advanced Course Part 2 - https://youtu.be/YwsOCN8woA8

------------------------------------------------------------------------
💸 Build Your Own E-commerce Website for Free! - https://www.thapatechnical.com/2024/03/build-complete-ecommerce-website-using.html

------------------------------------------------------------------------
✌️ Join Us!

🚀 Become a Member: Unlock perks, free source code, and more Join Now : https://www.youtube.com/channel/UCwfaAHy4zQUb2APNOGXUCCA/join
📷 Connect on Instagram: https://www.instagram.com/thapatechnical
🗨️ Join Our Discord Server: Hang out with fellow programmers Discord Link: https://discord.gg/MdScmCsua6

------------------------------------------------------------------------

⌛TIMELINE⏳
0:00 Introduction to Dynamic Routes
0:20 Flow: How Dynamic Routing Works
2:38 Comment & Support the Channel
3:00 Adding onClick to Edit Icon
6:30 Creating Dynamic Route for Job Edit
8:30 Redirecting to Dynamic Page using Router
9:35 Using Params to Get Dynamic ID from URL
12:00 Comment if You Have Doubts
12:40 Task for You

Видео Next.js Dynamic Routes (App Router) | Edit Job Page with ID & Params – Real Project канала Thapa Technical