تدريب Shadowing: Learn Next.js Parallel Routes In 16 Minutes - تعلم التحدث بالإنجليزية عبر الفيديو

The app router in Next.js made routing more simple in some regards, but also more complicated by some of the new features that it added.

And one of those new, more complicated features is parallel routing.

Now, this is an incredibly important feature for you to understand to really take your applications to the next level, because it allows you to add extra performance by doing parallel streaming.

It also allows you to really easily render things dynamically or conditionally, which is great for something like authentication.

So if you're unfamiliar with parallel routing, it's definitely something you're going to want to learn if you want to master Next.js.

Welcome back to Web Dev Simplified.

My name is Kyle, and my job is to simplify the web for you

so you can start building your dream project sooner.

And if you want to really take your Next.js skills to the next level, I highly recommend checking out my complete Next.js course.

It's going to be linked down below.

It's part of my React.js course.

So just check out the link down below it's going to be the premium package of my React.js course

that includes the entire Next.js course.

Now in this video, I'm going to be talking about parallel routing, and I first want to talk about how it actually solves particular problems.

For example, right now, let's say that I have this dashboard page, which has just a nav at the top inside of my layout.

I'm rendering out my child page, which just is a really simple H2 that says dashboard, and then I'm also rendering out a user section and an article section.

And each of these sections has their own delay.

As you can see, the users is a three second delay, articles is five seconds, and then my dashboard is two seconds.

So when I refresh my page, you see I get these three different loading states showing up.

The first loading state for my dashboard is my loading.tsx file, while for my users and my articles, it's using the suspense boundary to load my information.

And this works perfectly fine.

I'm able to load all these routes in parallel, which means after two seconds, this one loads, then three seconds, this one, and finally after five seconds, my articles loads.

Now for really simple pages, this is probably going to be fine, but as your pages get more complex and you want to parallel stream multiple different complex things to your page,

there's going to be a much better way to do that, and that's with parallel routing.

So instead of having these components directly inside my layout, I can actually extract them out into their own folders, and they can work just like a normal page where I have my own loading state,

my own page, my own error state, and so on.

So I get all the power of having this route as its own page while keeping it embedded into a different page.

To do that, all you need to do is inside of the folder that you're currently in, so in my case dashboard, create a brand new folder, and you start this folder with the at symbol.

This allows you to say that you want to have parallel routes you render.

So in my case, I'm going to have an at users route, and inside of here, I'm going to create a page.tsx.

And all this page.tsx is going to do is just take this users component and bring it directly into here, and we'll export that as our default function, just like that.

And I'll call this my users page.

There we go and I'll make sure I'll get that wait function imported as well.

Then what I want to do is I want to go into my layout

and do the exact same thing for my articles section.

So I'm just going to copy this down.

I'm going to call this at articles.

And inside articles, I'm just going to change my wait to five seconds.

And this will say articles, and this will be my articles page.

So now I've essentially created two different parallel groups that I've created.

I have my articles group and my users group, and then I have my normal page group as well.

So inside my layout, instead of importing these components like this, I can remove all of that, remove this, remove this weight entirely, and all this suspense related code.

And instead, what I can do is where I'm getting my children being passed in, every single at group that you have is also going to be passed in.

So I have an at articles, and I have an at users.

And you'll even see I get autocomplete from TypeScript

because Next.js is smart enough to look at these folders and know that they are actually there.

So then what I can do is I can add in my articles, I can type that as a React node, and my users, and I can type that as a React node as well.

Give that a quick save.

And all I need to do is just render out those sections.

So users, articles, just like that.

And now if I add in a loading state for these, I'll actually be able to get that loading.

And the great thing about this is I can just create a new file called loading.tsx, export a default function, we'll call this loading users.

And in here, I'll just return an h2 that says loading users.

And I'll do the exact same thing for my articles, I'll just copy this file over and just change users to articles.

There we go.

So now if I give all these pages a quick save, and I go to my layout, you can see that my layout is drastically cleaned up.

But when I refresh my page over here, you're noticing that I'm getting the exact same results that I had before.

But the really great thing about this compared to what I had before is everything is much more componentized

because now I have this articles folder where everything related to my articles takes place.

I can even add in here, for example, an error.tsx page, and I can add in my own error boundary.

So this must be a client component.

And I'll just export default function error articles.

There we go.

And in here for now, I'm just going to return an h2 that says error, just to make it as simple as humanly possible.

So now for some reason, this actually throws an error.

So let's just come in here, throw a new error on this page.

And I give this a quick save and a refresh.

After that five second delay, you're going to notice it's going to throw an error and it's actually going to show me the text error instead, which is super great.

So again, it's super compartmentalized.

I have everything related to articles inside of this one single folder, everything related to users in this one folder, and everything related to my main dashboard section inside of this main folder here.

So everything has its own place, which means that if your code is complicated, it's much easier to figure out what's going on in each section.

But this isn't like super groundbreaking

because technically I could have done all of this the other way with everything in my layout file and so on.

And it wouldn't have been terrible, especially with simple code like this.

What makes this really powerful, though, is how you can take this even another step further.

Let's say, for example, I only want to render the article section of my page some of the time.

What I can do is inside of my layout, let's say I have a variable inside here that just says const render articles.

Let's set that equal to false.

So I only want to render my article sometimes.

Well, I can just come in here.

If render articles is true, then I'll render out my articles.

Otherwise, I'm just going to render out nothing.

So we can just do this really, really simple like that.

So I'm going to render out my articles if this variable is true.

Otherwise, I won't.

So when I do a refresh, you notice my article section is not rendered at all.

While if this was true, and I do a refresh, you'll notice that my article section is being rendered.

So this is a great way to conditionally render things, which is really useful, for example, with logging in users.

Let's say, for example, that this dashboard is something that you must be logged in in order to access.

Well, what I can do is I can just have a variable is logged in, you would get this from your database or something like that.

And by default, let's set that to false.

So here we're going to render out everything just like we normally would, but I'm going to wrap things in an is logged in.

So if I am not logged in, so if I'm not logged in, instead of returning all of this information down here, let's say I'm going to bring in a login page instead.

So I'm going to return login page, or we'll just call it login.

And I'm actually going to create a new parallel route for that.

So at login, just like that, let's create a brand new page.tsx.

which export default function login page and this will just return an h2

that says login page just like that there we go

so now here I can actually get that login

100

and I can make sure I type

101

that as a react node there we go so now

102

if I'm not logged in I'm showing my login page otherwise I'm showing this page down here

103

and actually remove those brackets just like that So now here, give this a quick refresh.

104

And you'll notice right now it's not showing anything.

105

That's because sometimes when you're dealing with parallel routes, you do need to actually restart your server.

106

So let me just give my server a quick restart, and then we'll refresh our page.

107

And we should see we are being redirected to the login page whenever we're not logged in.

108

But if my login is set to true, for example, I've logged in my user, you can now see it's rendering out all the normal content on the page.

109

So this is, again, a really powerful use case for this particular parallel routing.

110

Now, the next thing I want to talk about with parallel routing is actually really cool, but by far the most complicated part.

111

And that's how you deal with routes inside of your parallel routing.

112

Let's say, for example, I want to be able to go to slash dashboard slash settings.

113

And I want to be able to configure settings for each of these different sections, my dashboard, my users, and my articles.

114

Well, this is really easy to do.

115

First of all, I'm gonna remove all this login related stuff just so we have a little bit less complexity.

116

So all that login code has been completely removed.

117

We're just back to what we normally had before.

118

And again, I'm just going to restart my server just in case I have any problems going on inside of it.

119

So we're just going to restart our server and give that a quick refresh.

120

You can see everything is working just like it was before.

121

Now, what I want to do is I want to add in that new settings route.

122

So I'm going to create a folder, call it settings.

123

And inside of here, I'm just going to create a page.tsx.

124

And I'm going to just export a function from here.

125

Let's just copy all of this code.

126

I'm going to make this incredibly simple, no waiting or anything like that.

127

This is just going to say dashboard settings.

128

There we go.

129

And this is the dashboard settings page.

130

So now if I go to slash dashboard slash settings, immediately we're going to get a 404 error.

131

And the reason for that is because what happens

132

when you have parallel routes is it's not only going to try to render your normal route in that settings folder,

133

but also is trying to render out my at users parallel route and my articles parallel route.

134

So I would need to create a folder inside of both of these with a settings.

135

So we can create a settings folder in both of these, and both of these will need their own page.

136

So inside of here, I'll create a page.tsx, paste that down, clean this up a little bit.

137

So we have my articles, settings.

138

There we go.

139

Articles, settings.

140

And I'm just going to copy that.

141

I'm going to paste that down for the users one as well, and just change this to say users.

142

There we go.

143

So now, if I give that a refresh, that should hopefully work.

144

And again, we might need to restart our server just because of the complexity here.

145

Sometimes it makes you do this.

146

And let's just give that a quick refresh.

147

And as you can see, it looks like that worked.

148

So now we have our dashboard settings, we have our user settings, and we have our article settings.

149

Now in my layout in this section for some links, I'm just going to actually add in some links.

150

So we're going to have a link that goes to my slash dashboard, just like that to close that off.

151

Dashboard.

152

And then we're just going to copy that link down to go to this settings as well.

153

There we go.

154

So now we have two links.

155

So we can go to our dashboard page, which is going to load our dashboard, and we have our dashboard settings page.

156

If we can go over to our settings just like this.

157

Now you may notice that everything is not rendering properly.

158

One thing that we may need to do is actually make all of these different functions async.

159

So let's just come over here.

160

We're going to make all of these async functions to hopefully see

161

if that actually fixes the problem that we're running into here.

162

It might also just be a problem with Next.js not being super happy with all of this in development mode, but you can see we have our settings page and our dashboard page, and it's still not quite working as we expect.

163

And I believe it's just a problem with Next.js in development mode.

164

To test this, we can npm run build to build out our project, and then we can just start this.

165

So after this, we can say npm start, and that's going to start up essentially the production version of our application to see

166

if these problems only exist inside of development.

167

Again, some of these more niche features in Next.js are a little bit buggy in development.

168

So here we're on the actual production version.

169

When I click settings, you can see that works and when I go over to my dashboard here it works.

170

So everything looks like it is working in the production version, which is great.

171

So let's just go back to development so we can actually look at this as we're working on it.

172

So we'll run the development version.

173

I'll just give this a quick refresh.

174

This is loading up the development version of the page.

175

You can see we get all of our different loading text running.

176

We'll wait for all

177

that to finish just to make sure all of this is working as expected

178

and then we'll jump over to the settings and I'll just do a refresh here to get that to actually show up.

179

Now let's say for example that we didn't have a settings page for every single section

180

because when we have a settings page for every section it obviously works fine

181

But let's say our articles don't have a settings page.

182

So inside of here, we're just going to delete this settings page entirely.

183

Now, immediately when we do that and we refresh, we're going to get a 404 error because this page essentially does not exist.

184

It also looks like I need to restart my server, so I'm just going to restart that development server.

185

And then we'll do that again.

186

We'll just refresh this section over here.

187

And you can see that we're getting a 404 page immediately, and that's because there is no settings section for this article.

188

What you can do instead is you can create a default.tsx file.

189

This is going to run essentially any time that it cannot find a file for that route.

190

So in our case, there is no page for our settings route.

191

So it's going to render whatever is in here.

192

So we're going to say export default function.

193

And this is going to be called articles default page.

194

And this is just going to return in H2 that says articles default.

195

There we go.

196

And we'll make that async just in case that helps with the actual development server.

197

So if we just give this a quick refresh here, you can now see down here it says articles default because it's rendering whatever that default page is.

198

So essentially, if I go to that settings page, do a hard refresh.

199

So I'm coming to the settings page fresh, nowhere else, just directly to this link.

200

You can see it renders that default version.

201

This does work slightly differently, though, when you actually come to this page from another page.

202

So for example, if I came from my dashboard page to my settings page, it would work differently.

203

So let's bump ourselves into production to test that.

204

So we'll say npm run build, and then we'll actually start up the production version because that allows this to work.

205

We'll go over to the dashboard section.

206

So we'll come over here to our dashboard, just like that.

207

And once our page actually starts up in just a second, you can see we can refresh this and you can see it says dashboard users articles.

208

And now when we moved the settings page, you can see we get the dashboard settings and the user settings, but our article stays exactly the same.

209

So if you're moving from one parallel routing route to another parallel routing route, and the new route you're going to doesn't have a page for a specific section,

210

such as our articles, what it'll do is it'll render out the old page that was already there.

211

So it's just rendering this normal page right here until we go to a route that it has a page for.

212

The only time that the default is shown is if you go to this page directly and not navigating through Next.

213

So for example, I just refresh my page.

214

You can now see it's rendering out that default version instead.

215

and that's because I'm navigating directly to this page instead of using the linking inside of next.

216

Now, if you don't like this behavior where it's actually showing you not the default version, so like when I go from dashboard to settings, you can see it doesn't show me that default version.

217

If you don't like that behavior

218

and you always want it to show a specific file when you don't have a route defined, what you could do is inside of our articles here, we could create a catch-all route.

219

So essentially just putting the two dots before our name of our page, this is just going to be our catch-all.

220

We can call it whatever we want.

221

It really doesn't matter.

222

and then inside of here we can essentially create a page that is going to look just like this default.

223

So I'm going to paste this default in here.

224

This is going to be our catch all page

225

and this will say catch all just like that and we're just going to call this page.tsx.

226

So now what's going to happen is essentially any time we go to a URL

227

that is dashboards slash anything and it doesn't care how many levels nested that is, it's going to go into this catch all.

228

So let's just close out of this real quick.

229

We'll restart ourselves in development so we can actually see these new changes that we've just made

230

and I'm going to go to my dashboard page and we're actually getting an error.

231

That's just because I forgot to add in a period here.

232

There needs to be three periods for the catch-all routes.

233

Now let's actually run that in development.

234

That was just my bad.

235

Give that a quick refresh and you'll see it'll load our dashboard page just fine.

236

Everything is loading perfectly fine.

237

Now, if I go over to this settings page, you can see that I have both this default and this catch-all in place.

238

So you can see when I click on settings and refresh it, you'll see it's actually loading the catch-all version instead.

239

And that's because by default inside of Next.js, the catch-all route is always going to take precedence over this default page.

240

So essentially, the reason you would want to use this catch-all is if you want to render the default every single time, no matter what, even when you're navigating around.

241

So we can essentially just remove this default, we don't need it, and if we just run this as a production, so we can build our site, and then npm run start,

242

we can see exactly how this works for navigating between different pages as well, because unlike in the default version, where it renders the old version when you navigate to a page that it doesn't exist for,

243

this one is going to render the same page no matter what.

244

So here you can see we have dashboard.

245

It says dashboard uses articles.

246

When I click on settings, you can see immediately we get that catch all route.

247

And if we hard navigate to this page, we also get the catch all route.

248

So that's kind of the difference between default versus a catch all route.

249

They both serve very similar purposes, but they work a little bit different in practice.

250

Now, if you enjoyed this video, you're definitely going to love my complete Next.js course.

251

I'm gonna have it linked down in the description below.

252

Like I said, it's part of my React.js course.

253

So it's not only gonna help you master React everything that you need to know, testing and so on, but it's also going to make sure you master Next.js,

254

both the app router and the pages router because they are both covered in the course.

255

So if you want to take your Next.js skills to the next level, I highly recommend checking out that course.

256

It'll be linked down in the description below and it is the React Simplified Premium Package.

257

With that said, thank you very much for watching and have a good day.

✨ فيديو موصى به

336 جمل

المفردات وملاحظات التحدث لهذا الدرس

يحتوي هذا الفيديو على 257 جملة و3922 كلمة للتدرب على الترديد. مدة الكلام 16:17. يتكلم المتحدث بسرعة، نحو 241 كلمة في الدقيقة، لذا ستسمع كثيرًا من وصل الكلمات واختزال الأصوات. 84% من الكلمات ضمن أكثر 3,000 كلمة شيوعًا في الإنجليزية، ويُستحسن مراجعة الباقي قبل البدء.

أهم المفردات في هذا الفيديو

15 كلمة أقل شيوعًا من الفيديو، مع النطق والمعنى:

render /ˈɹɛn.dɚ/ (فعل) — جَعَلَ, صَيَّرَ. To cause to become.
refresh /ɹɪˈfɹɛʃ/ (فعل) — جَدَّدَ. To renew or revitalize.
parallel /ˈpæ.ɹəˌlɛl/ (صفة) — مُوَازٍ. Equally distant from one another at all points.
folder /ˈfoʊldɚ/ (اسم) — مِلَفّ, مُجَلَّد. An organizer that papers are kept in, usually with an index tab, to be stored as a single unit in a filing cabinet.
log /lɔɡ/ (اسم) — خَشَبَة. The trunk of a dead tree, cleared of branches.
server /ˈsɝvɚ/ (اسم) — خَادُوم m or خَادِم, مُلَقِّم. A program that provides services to other programs or devices, either in the same computer or over a computer network.
export /ˈɛks.pɔɹt/ (اسم) — صَادِرَات. Something that is exported.
complicated /ˈkɑm.plɪˌkeɪ.tɪd/ (صفة) — مُعَقَّد, مُرَكَّب. Difficult or convoluted.
component /kəmˈpoʊ.nənt/ (اسم) — مُكَوِّن, جُزْء. A smaller, self-contained part of a larger entity. Often refers to a manufactured object that is part of a larger device.
delay /dɪˈleɪ̯/ (اسم) — تَأْخِير, تَأَخَّر. A period of time before an event occurs; the act of delaying; procrastination; lingering inactivity.
pasta /ˈpɑ.stə/ (اسم) — مَكَرُونَة, مَعْكَرُونَة. Dough made from wheat and water and sometimes mixed with egg and formed into various shapes; often sold in dried form and typically boiled for eating.
package /ˈpæk.ɪd͡ʒ/ (اسم) — صُرَّة, طَرْد. Something which is packed, a parcel, a box, an envelope.
skill /skɪl/ (اسم) — مَهَارَة. A capacity to do something well; a technique, an ability, usually acquired or learned, as opposed to abilities that are regarded as innate.
premium /ˈpɹiː.miː.əm/ (اسم) — فاخر. A prize or award.
boundary /ˈbaʊndɹi/ (اسم) — حَدّ. The dividing line or location between two areas.

الأفعال المركبة التي ستسمعها

talk about (فعل) — تَكَلَّمَ فِي, تَكَلَّمَ عَلَى. Used to draw attention to the speaker's characterization of someone or something.
look at (فعل) — نَظَرَ. To observe or watch.

نطق يحتاج إلى انتباه

يستخدم المتحدث 121 من الصيغ المختصرة، مثل I'm, we're, we'll. انطقها بصيغتها القصيرة كما تسمعها.

أصوات “sh” و“zh”: refresh /ɹɪˈfɹɛʃ/, essentially /ɪˈsɛnʃəli/, dashboard /ˈdæʃˌboɹd/, conditionally /kənˈdɪʃənəli/, authentication /ɔːˌθɛntɪˈkeɪʃn̩/
الكلمات الطويلة — انتبه لموضع النبر: essentially /ɪˈsɛnʃəli/, complicated /ˈkɑm.plɪˌkeɪ.tɪd/, incredibly /ɪŋˈkɹɛdɪbli/, differently /ˈdɪf.ə.ɹənt.li/, complexity /kəmˈplɛk.sɪ.ti/

كيف تتدرب بهذا الفيديو

استمع إلى الفيديو كاملًا مرة واحدة دون أن تتكلم، ودوّن الكلمات التي لا تعرفها.
ابدأ بسرعة 0.75×، وردّد جملة جملة، ثم عُد إلى السرعة العادية عندما يصبح الأمر سهلًا.
سجّل صوتك وقارنه بالأصل، مع الانتباه إلى كلمات مثل render, refresh, parallel.

القواعد في هذا الفيديو

أكثر التراكيب التي يستخدمها المتحدث، مع العبارات نفسها من الفيديو:

التركيب	في الفيديو
الجمل الشرطية if + جملة، will/would + فعل — شرط ونتيجته	If render articles is true, then I'll render
المبني للمجهول be + اسم المفعول — التركيز على ما يحدث لا على من يفعله	be linked · being passed · is complicated
جمل الوصل who / which + جملة — معلومة إضافية عن شخص أو شيء	conditionally, which is · page, which has · parallel, which means
المضارع التام have/has + اسم المفعول — حدث ماضٍ ما زال له أثر الآن	I've created · I've logged · has been

ما هي تقنية التظليل الصوتي؟

التظليل الصوتي (Shadowing) تقنية تعلم لغة مدعومة علمياً، طُورت أصلاً لتدريب المترجمين الفوريين المحترفين. الطريقة بسيطة لكنها قوية: تستمع لصوت إنجليزي أصلي وتكرره فوراً بصوت عالٍ — كظل يتبع المتحدث بتأخير 1-2 ثانية. تُظهر الأبحاث تحسناً كبيراً في دقة النطق والتنغيم والإيقاع وربط الأصوات والاستماع والطلاقة.

تقنية الشادوينغ: اقرأ الدليل الكامل خطوة بخطوة →

تدريب Shadowing: Learn Next.js Parallel Routes In 16 Minutes - تعلم التحدث بالإنجليزية عبر الفيديو

Best NextJS Folder Structures | Beginner - Intermediate - Advanced

Traceroute: You're Probably Reading the Results Wrong

Parallel Pump Operation

Next.js 16.3 got good (if you care)

Next JS Interview Questions and Answers 2026 | Top 20 Most Asked Questions

Master n8n Triggers in 20 Minutes – Automate Anything

Transition to and from display: none

JavaScript Visualized - Event Loop, Web APIs, (Micro)task Queue

Azure App Service and Virtual Network Integration Options

Claude Code: The Advanced Guide (99% of Devs Skip These Features)

Video

Learn UX Storyboarding in 5 Minutes: w/ Steps and Examples | UXtweak

المفردات وملاحظات التحدث لهذا الدرس

أهم المفردات في هذا الفيديو

الأفعال المركبة التي ستسمعها

نطق يحتاج إلى انتباه

كيف تتدرب بهذا الفيديو

القواعد في هذا الفيديو

ما هي تقنية التظليل الصوتي؟