Accessible Rating Component with Next.js

What are you most proud of, and what would you do differently next time?

I'm proud of utilizing Next.js components and server-side rendering (SSR) for both component rendering and data fetching. Exploring these features has been a valuable learning experience, and I see great potential in further optimizing performance and scalability using Next.js.

Additionally, I am pleased with my efforts to follow accessibility best practices, ensuring that the component provides a seamless experience for all users. This aspect is particularly important as accessibility remains a crucial part of modern web development.

For my next project, I plan to explore Angular to gain foundational knowledge of another framework and broaden my skill set.

What challenges did you encounter, and how did you overcome them?

One challenge I faced was handling error messages in Next.js Server Components. When an API request fails due to a backend issue, Next.js does not allow direct error message retrieval within Server Components. Instead, in production builds, Next.js returns a generic error:

"An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error."

This restriction prevents direct display of backend error messages to the user, making error handling more complex. currently I leave that with the generic error message, but I'm looking for a backend side solution for that (errors happen 10 percent of the times here for testing purposes)

I feel this limitation reduces flexibility in error reporting, and it would be preferable if developers had greater control over how these error messages are surfaced in production.

What specific areas of your project would you like help with?

I'm always looking for suggestions on best practices, in this project especially for:

• Next.js improvements, specifically better strategies for managing Server Component errors in a way that doesn’t disrupt user experience
• Accessibility enhancements, making sure my implementation aligns with WCAG guidelines and utilizes ARIA attributes effectively

Any insights or recommendations would be greatly appreciated!