Duplicates

• I have searched the existing issues

Summary 💡

We should implement NextJS 14's built-in loading.tsx and error.tsx file naming conventions throughout our project. This would replace the current standard React approach to loading states and error handling.

The feature should work as follows:

• Identify all routes in our NextJS 14 app that require loading states or error handling.
• For each identified route, create corresponding loading.tsx and error.tsx files.
• Move existing loading logic into the loading.tsx files.
• Move existing error handling logic into the error.tsx files.
• Remove any manual implementations of Suspense boundaries related to loading states.
• Remove any custom error pages that Next.js can handle by default.

Examples 🌈

NextJS documentation provides excellent examples of how these conventions work:

Loading UI: https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming
Error Handling: https://nextjs.org/docs/app/building-your-application/routing/error-handling

Motivation 🔦

What is the motivation behind the feature ask?

Currently, our developers are not utilizing NextJS 14's loading.tsx and error.tsx conventions. Instead, they're implementing loading states and error handling using standard React methods.

This approach has several drawbacks:

• It requires manual implementation of Suspense boundaries for loading states.
• Custom error pages need to be created, which NextJS can handle automatically.
• It doesn't take full advantage of NextJS 14's App Router features.
• It leads to inconsistent implementation across different parts of the application.

By adopting NextJS 14's conventions, we can:

• Simplify our codebase by leveraging built-in NextJS features.
• Improve consistency across the application.
• Reduce the amount of boilerplate code developers need to write.
• Make our application more maintainable and easier to understand for new developers.
• Potentially improve performance by using NextJS's optimized loading and error handling.