skills.rest
Motium-AI
Motium-AIOFFICIAL
Explore all skills by this author →
GitHub

nextjs-tanstack-stack

Scaffold a Next.js App Router project with TanStack and Zustand.

Updated Aug 27, 2026
Search Tags:#react#tanstack#nextjs#zustand#virtualization#app-router
One-click install
npx skills add https://github.com/Motium-AI/claude-code-toolkit --skill nextjs-tanstack-stack
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-tanstack-stack
Source: https://github.com/Motium-AI/claude-code-toolkit/tree/main/config/skills/nextjs-tanstack-stack
Command: npx skills add https://github.com/Motium-AI/claude-code-toolkit --skill nextjs-tanstack-stack

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a ready-to-use scaffold for building scalable Next.js App Router apps integrated with TanStack (Query, Table, Form, Virtual) and Zustand, enabling teams to create data-intensive dashboards with clean architecture and robust patterns.

Core Features & Use Cases

  • Server/Client Component boundaries: Server Components for data fetching and SEO-friendly content, Client Components for interactivity.
  • TanStack patterns: Query factories, virtualization, form handling, advanced table patterns, and typed query keys.
  • State management & resilience: Atomic selectors with Zustand, error boundaries, and optimistic UI flows for a polished UX.
  • Use Case: Build a dashboard that fetches server data, renders a virtualized table, editable forms, and responsive UI across routes.

Quick Start

Create a Next.js App Router project, install TanStack and Zustand dependencies, and copy the sample pages from this Skill to get started. Then run npm install and npm run dev to start the dev server.

Frequently Asked Questions about nextjs-tanstack-stack

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

FAQPage Schema
How do I set up a data-heavy dashboard using Next.js App Router and TanStack?▼

Set up a data-heavy dashboard with Next.js App Router and TanStack by installing dependencies, copying the provided sample pages, and running npm install and npm run dev to start the ready-to-run dev server.

How do server and client component boundaries work with TanStack Query in Next.js?▼

Server and client component boundaries in Next.js separate data fetching for SEO-friendly content from client-side interactivity, applying TanStack Query patterns, typed query keys, and caching suitable for data-intensive dashboards.

Does this scaffold include virtualization for rendering large datasets in React?▼

Yes, the scaffold includes TanStack Virtual for virtualization, enabling efficient rendering of large datasets in React tables within data-heavy dashboards without performance degradation.

Can I use Zustand for client state management alongside TanStack Query in Next.js?▼

Yes, you can use Zustand for client state management alongside TanStack Query, applying atomic selectors to manage interactive UI state while TanStack handles server data fetching and caching.

What is the best way to handle forms and errors in a TanStack and Next.js dashboard?▼

The best way to handle forms and errors in a TanStack and Next.js dashboard is using TanStack Form for editable forms alongside React error boundaries, ensuring resilient UI flows and polished user experience.

When should I not use client components for data fetching in a Next.js dashboard?▼

Avoid using client components for data fetching when you need SEO-friendly content or initial server-side rendering, instead leveraging Next.js server components for data fetching and reserving client components for interactivity.

Related Skills

Explore More Software Engineering Skills→
MadAppGangMadAppGang
278

tanstack-router

Configure type-safe file-based routes for React with TanStack Router.

Official
Intermediate
secondskysecondsky
204

tanstack-table

Translate data-table requirements into TanStack Table v8 server-side patterns.

Community
Advanced
timequitytimequity
6

frontend-react

Automate React frontend development with TypeScript, Tailwind CSS, Vite, Zustand, and TanStack Query.

Official
Advanced
aussiegingersnapaussiegingersnap
9

state-tanstack

Orchestrate React server and client state with Tanstack Query and Zustand.

Community
Intermediate