Items in category react

How to Create a Global Custom 404 Page for Route Groups in Next.js

React
How to Create a Global Custom 404 Page for Route Groups in Next.js
Image generated by ChatGPT (DALL·E)

Implementing a custom 404 page in Next.js becomes unexpectedly tricky when using route groups. While group-specific not-found.jsx files work as expected, unmatched routes fall back to the default Next.js 404, breaking visual consistency. This article explains why this happens and shows a practical workaround using the experimental globalNotFound option to create a reusable, fully styled global 404 page.

Next.js 15 Tutorial: Build a Full-Stack App with Ant Design & React Query

React
Next.js 15 Tutorial: Build a Full-Stack App with Ant Design & React Query
Image generated by ChatGPT (DALL·E)

Next.js 15 is redefining server-side React development, offering built-in optimizations for routing, caching, and image handling. In this step-by-step tutorial, we will build a dynamic records management app using Ant Design 5 for UI components and React Query 5 for efficient data fetching. Learn how to streamline development, minimize boilerplate, and optimize performance with Next.js best practices. Get started today!

Refactoring Legacy React Code: Moving from OOP to Functional Components

React
Refactoring Legacy React Code: Moving from OOP to Functional Components

When React Hooks arrived in 2019, switching to functional components seemed impractical. But as the ecosystem evolved, new techniques emerged. This article explores key strategies for migrating class-based components to modern React patterns—leveraging composition, useImperativeHandle, and function-based customization. Ready to embrace the future of React?