BuildWithMatija
Get In Touch
  1. Home
  2. Series
  3. Building UI & Forms in Next.js
Next.js

Building UI & Forms in Next.js

8 articles
Hub + 7 spokes

Series Overview

Build production UI and forms in Next.js: data tables with TanStack, React Hook Form, Zod validation, Server Actions, multi-step wizards, and UI component patterns with shadcn/ui.

All Articles in Series

H
Complete Data Table with TanStack Table in Next.js
HUB1 of 8

Complete Data Table with TanStack Table in Next.js

Step-by-step implementation of a sortable, filterable, paginated data table using TanStack React Table and shadcn/ui…

Learn to build a fast, accessible Data Table with TanStack Table and shadcn/ui in Next.js — sortable columns, column filters, pagination, and custom cell…

16 min readFeb 24, 2026By Matija Žiberna
1
React Hook Form Multi-Step Tutorial: Zustand + Zod + Shadcn
PART 12 of 8

React Hook Form Multi-Step Tutorial: Zustand + Zod + Shadcn

Complete guide to building production-ready React multi-step forms with validation, state management, and conditional logic

Feb 6, 2025By Matija Žiberna
2
The Invisible Form Bug: React 19 + React Hook Form's Hidden Compatibility Issue
PART 23 of 8

The Invisible Form Bug: React 19 + React Hook Form's Hidden Compatibility Issue

That toggle that worked perfectly in React 18 now does nothing when clicked? You're not alone—and the fix isn't in any migration guide.

Apr 15, 2025By Matija Žiberna
3
Capture Signatures in React with React Signature Canvas
PART 34 of 8

Capture Signatures in React with React Signature Canvas

Build a reusable signature capture flow with validation and persistence using React Hook Form and Zustand.

Learn how to implement a legal signature capture flow in React using react-signature-canvas, including validation and data persistence strategies.

7 min readOct 30, 2025By Matija Žiberna
4
My Approach to Building Forms with useActionState and Server Actions in Next.js 15
PART 45 of 8

My Approach to Building Forms with useActionState and Server Actions in Next.js 15

A practical pattern for leveraging useActionState and server actions for consistent form handling

Learn how to structure server actions and forms for consistent CRUD operations using React 19's useActionState hook, with reusable components and predictable state management.

7 min readAug 22, 2025By Matija Žiberna
5
Next.js Contact Form: Zod, useActionState & Sonner
PART 56 of 8

Next.js Contact Form: Zod, useActionState & Sonner

Build a resilient Next.js contact form with Zod v4, reCAPTCHA, server actions and Sonner toast feedback.

Learn how to build a resilient Next.js contact form with Zod v4, useActionState, reCAPTCHA and Sonner toasts—complete validation, email flow, and clear user…

11 min readNov 10, 2025By Matija Žiberna
6
How to Add reCAPTCHA v3 to Your Next.js 15.5 Contact Form Without Breaking Anything
PART 67 of 8

How to Add reCAPTCHA v3 to Your Next.js 15.5 Contact Form Without Breaking Anything

Implement invisible bot protection while preserving existing form functionality

Add enterprise-level reCAPTCHA v3 security to your Next.js contact forms without disrupting React Hook Form, internationalization, or existing validation patterns.

9 min readSep 27, 2025By Matija Žiberna
7
shadcn Table vs Data Table: When to Choose TanStack
PART 78 of 8

shadcn Table vs Data Table: When to Choose TanStack

Practical Next.js guide comparing shadcn/ui Table and a TanStack-powered Data Table — when to keep simple markup and…

Compare shadcn Table vs Data Table to decide whether to keep a small display table or adopt TanStack Table for sorting, filtering, pagination and…

10 min readFeb 25, 2026By Matija Žiberna

Topics Covered

Next.jsTanStack TableReact Hook FormZodshadcn/uidata tablesform validationServer Actionsmulti-step formsUI components
←Back to all series
HUB ARTICLE

Complete Data Table with TanStack Table in Next.js

By Matija Žiberna

Quick Navigation

Hub: Complete Data Table with TanStack Table in Next.jsPart 1: React Hook Form Multi-Step Tutorial: Zustand + Zod + ShadcnPart 2: The Invisible Form Bug: React 19 + React Hook Form's Hidden Compatibility IssuePart 3: Capture Signatures in React with React Signature CanvasPart 4: My Approach to Building Forms with useActionState and Server Actions in Next.js 15Part 5: Next.js Contact Form: Zod, useActionState & SonnerPart 6: How to Add reCAPTCHA v3 to Your Next.js 15.5 Contact Form Without Breaking AnythingPart 7: shadcn Table vs Data Table: When to Choose TanStack

B2B Website Development

Complex websites for B2B companies whose current site is limiting sales, marketing, and operations.

Learn more

Bespoke AI Applications

Internal tools where AI reduces manual work and connects real business operations.

Learn more

Start a conversation.

Get in touch
Build With Matija Logo

Build with Matija

Matija Žiberna

I turn scattered business knowledge into one usable system. End-to-end system architecture, AI integration, and development.

Quick Links

Projects
  • How I Work
  • Blog
  • RSS Feed
  • Services

    • B2B Website Development
    • Bespoke AI Applications
    • Advisory

    Payload

    • B2B Website Development
    • Payload CMS Developer
    • Audit
    • Migration
    • Pricing
    • Payload vs Sanity
    • Payload vs WordPress
    • Payload vs Strapi
    • Payload vs Contentful

    Industries

    • Manufacturing
    • Construction

    Get in Touch

    Have a project in mind? Let's discuss how we can help your business grow.

    Book a discovery callContact me →
    © 2026BuildWithMatija•Principal-led system architecture•All rights reserved