Items in category react

A Global Custom 404 Page for Route Groups in Next.js

React
A Global Custom 404 Page for Route Groups in Next.js
Image generated by 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.

Tables and Modals in Next.js 16: Preserving State

React
Tables and Modals in Next.js 16: Preserving State

Discover how to implement persistent data tables with edit modals in Next.js 16 using dynamic routes, intercepting routes, and hybrid patterns, with examples, pitfalls, and the recommended final architecture.

Next.js 15 Tutorial: Full-Stack App with Ant Design

React
Next.js 15 Tutorial: Full-Stack App with Ant Design

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: From OOP to Functional

Software Design React
Refactoring Legacy React: From OOP to Functional

When React Hooks arrived in 2019, migrating a large class-based codebase to functional components looked impractical. A few tricks made it workable: composition instead of inheritance, useImperativeHandle for imperative APIs, and function-based customization in place of subclassing.

Effortless Form Handling in React with HTML5 Validation API

React
Effortless Form Handling in React with HTML5 Validation API

When we talk about user input within a web app we often think first of HTML forms. Web forms have been available with the very first editions of HTML. Apparently the feature was introduced already in 1991 and standardized in 1995 as RFC 1866. We use them everywhere, with almost every library and framework. But what about React? Facebook gives a limited input on how to deal with forms . Mainly its about subscribing form and controls for interaction events and passing state with value property. So form validation and submission logic is up to you. Decent UI implies you cover such logic as on submit/on input field validation, inline error messaging, toggling elements depending on validity, pristine, submitting states and more. Cannot we abstract this logic and simply plug it in our forms? Definitely we can. The only question is what approach and solution to pick up.