Loading is the pause before the punchline, and errors are the plot twists we never wanted.

(true developers feelings, cough cough)

Jokes aside…

You already know that handling loading states and errors is key. You've learned how to handle errors the right way in whole course, so even if something goes wrong, your app won’t crash completely. Instead, the part that’s broken will show a (hopefully helpful) error message.

Once everything is set up, it’s pretty easy. But is that the only way?

Of course not!!

Next.js gives you loading.js and error.js files to make things simpler. You can show a loading screen until your page is ready and display an error page if something goes wrong.

It works at the page level, meaning even if your page has mostly static data, Next.js will show whatever’s in loading.js while it waits for data (from server), and it’ll show the content from error.js if something breaks.

But here’s the catch—I using loading.js unless your whole page is loading data from the server. If your page isn’t all dynamic, a full-page loader might be a bit much. You can go for React Suspense.

As for error.js, we’ve already set up error handling, and honestly, I’m not a fan of how Next.js does it.

In the end, it’s up to you. Do you want errors to only show when something breaks, or do you want to show an error page across the whole site? It’s all about what makes the most sense for your app.

Choice is always YOURS.