Next Js: Parallel routes

So I was working on a project in Next.js 15.
I had two components, each fetching data from different APIs.

Everything was smooth… until one of the APIs stopped responding.
Suddenly, my entire page got stuck in the loading state. That’s when I realized — if even one API is slow or fails, the whole UI becomes unusable.

And that’s when I discovered Parallel Routes 🚀.

---

How it works

1. Create two folders with the @ prefix inside the parent folder. These are called slots.

2. Inside each, add a page.tsx like we normally would.
3. Create a layout.tsx file at the root level.
4. Inside the layout, receive both route1 and route2 as props, along with children.

Now, both routes can have their own loading.tsx and error.tsx.
👉 If one route is slow or crashes, the other still loads perfectly fine.

Your page won’t be stuck anymore just because one API decides to take a nap.

---

Code Snippet

So next time an API ghosted you, don’t let it freeze your UI. Use parallel routes and keep things running smooth.

💡 Thank me later.