skills.rest
olivier-motium
olivier-motiumCOMMUNITY
Explore all skills by this author →
Website𝕏@OlivierDDRGitHub

nextjs-tanstack-stack

Architect Next.js App Router apps with TanStack components and Zustand.

Updated Aug 27, 2026
Search Tags:#Zustand#Next.js#App Router#TanStack#Patterns#Table#Virtualization
One-click install
npx skills add https://github.com/olivier-motium/mimesis --skill nextjs-tanstack-stack-olivier-motium
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-tanstack-stack
Source: https://github.com/olivier-motium/mimesis/tree/main/docs/claude-code/config/skills/nextjs-tanstack-stack
Command: npx skills add https://github.com/olivier-motium/mimesis --skill nextjs-tanstack-stack-olivier-motium

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the complexity of architecting Next.js applications by unifying App Router patterns with TanStack components and Zustand state management.

Core Features & Use Cases

  • Server/Client Component Boundaries: Clear separation between server components for data fetching and client components for interactivity.
  • TanStack Pattern Recipes: Patterns for data-fetching (Query), tabular UIs (Table), form handling (Form), and virtualization (Virtual) aligned with modern Next.js apps.
  • State Management: Centralized client state with Zustand for UI concerns like filters, sorting, and view preferences.
  • Use Case: Build a data-intensive dashboard that fetches data on the server and renders a lazy-loaded, virtualized data table with client-side interactions.

Quick Start

Create a minimal Next.js App Router page that fetches data on the server and renders a TanStack-powered table with virtualization and a Zustand store for UI state.

Frequently Asked Questions about nextjs-tanstack-stack

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I architect a Next.js App Router application with TanStack and Zustand?▼

To architect a Next.js App Router application with TanStack and Zustand, establish clear server/client component boundaries for data fetching and interactivity. Use TanStack Query, Table, Form, and Virtual patterns, managing UI state like filters and sorting centrally with Zustand.

What is the best way to handle server and client component boundaries in Next.js data dashboards?▼

Handling server and client component boundaries in Next.js data dashboards involves fetching data in server components and delegating interactivity to client components. Use TanStack Query for server state and Zustand for client UI state to ensure robust rendering on data-heavy pages.

How do I implement virtualization in a Next.js TanStack Table component?▼

Implementing virtualization in a Next.js TanStack Table component requires using TanStack Virtual to lazy-load tabular UI rows. This pattern optimizes data-intensive dashboards by rendering only visible rows within established client component boundaries to maintain performance.

Does this Next.js TanStack pattern require a specific App Router version?▼

This Next.js TanStack pattern requires Next.js 14+ with the App Router enabled. It integrates TanStack Query, Table, Form, and Virtual alongside Zustand, providing code exemplars and best-practice guidance tailored for modern App Router architectures.

Why use Zustand for state management alongside TanStack Query in Next.js?▼

Using Zustand alongside TanStack Query in Next.js separates centralized client UI state from server data. Zustand manages view preferences, sorting, and filters, while TanStack Query handles server-state synchronization, creating a clear separation of concerns within the App Router.

Related Skills

Explore More Software Engineering Skills→
TheBushidoCollectiveTheBushidoCollective
187

nextjs-app-router

Scaffold Next.js 13+ App Router projects with layouts, dynamic routes, and streaming.

Official
Intermediate
baotoqbaotoq
98

nextjs-developer

Architect Next.js 14+ applications with App Router and server components.

Community
Advanced
Tahasaif3Tahasaif3

shadcn

Provide Radix UI-based components styled with Tailwind CSS for React interfaces.

Community
Intermediate
MinhAnh-CorpMinhAnh-Corp

react-state-management

Provide structured React state management patterns for local, global, and server state.

Official
Advanced