# Npmix

> Next.js tutorials, React guides, and modern frontend deep dives by Andry Dina.

Npmix is a developer education site focused on the Next.js App Router, React, Tailwind CSS, authentication (Auth.js / Better Auth), state management (Zustand, TanStack), multi-tenant SaaS patterns, and AI tooling (MCP, Claude, Gemini) for frontend and fullstack builders.

## Site

- Home: https://www.npmix.com/
- Blog (all articles): https://www.npmix.com/blog
- About: https://www.npmix.com/about
- Contact: https://www.npmix.com/contact
- Portfolio: https://www.npmix.com/portfolio
- Products / kits: https://www.npmix.com/products
- Privacy: https://www.npmix.com/privacy-policy
- Terms: https://www.npmix.com/terms-and-conditions
- Sitemap: https://www.npmix.com/sitemap.xml

## Topic hubs (cluster landing pages)

- Authentication: https://www.npmix.com/topics/authentication
- State management: https://www.npmix.com/topics/state-management
- UI / Tailwind / shadcn: https://www.npmix.com/topics/ui-tailwind
- SaaS / multi-tenant: https://www.npmix.com/topics/saas
- AI tooling: https://www.npmix.com/topics/ai
- Next.js platform: https://www.npmix.com/topics/platform

## Topic clusters (summary)

- Authentication: Auth.js, Better Auth, migrations, Prisma auth
- State: Zustand, Redux, React Query / TanStack
- UI: shadcn/ui, Tailwind v4, dark mode, fonts
- SaaS: multi-tenant subdomain routing, middleware
- Next.js platform: Server Actions, dynamic imports, image optimization, View Transitions
- AI: MCP chat clients, Claude, Gemini, image generation

## All articles

URLs use stable file-based slugs (`/blog/{filename-without-mdx}`).

- How to Install shadcn/ui in Next.js: Step-by-Step Guide — https://www.npmix.com/blog/001-install-shadcn
- Next.js Server Actions Tutorial: Forms, Mutations & Tips — https://www.npmix.com/blog/002-server-action
- Implementing Client and Server-Side Authentication with Auth.js — https://www.npmix.com/blog/003-authjs
- Next.js Dynamic Imports – Speed up your Modern Next.js App — https://www.npmix.com/blog/004-nextjs-dynamic-imports
- How to Use Next Font with TailwindCSS 4.0 (No Config File Needed) — https://www.npmix.com/blog/005-tailwind-v4
- Auth.js vs Better Auth for Next.js: Which Should You Use? — https://www.npmix.com/blog/006-AuthjsVsBetterauth
- The list of the top 10 custom hooks, with code examples — https://www.npmix.com/blog/007-top-10-hooks
- Next.js Multi-Tenant SaaS: Subdomain Routing Middleware — https://www.npmix.com/blog/008-nextjs-multi-tenant
- Zustand vs Redux: Simplify React State Management in 2026 — https://www.npmix.com/blog/009-zustand
- React useSearch Hook – Build a Smarter Search System in Your App — https://www.npmix.com/blog/010-useSearch-hook
- Supercharge Your Development with Turborepo: A Practical Guide — https://www.npmix.com/blog/011-add-manual-turbopack
- Zustand + React Query for Next.js Client & Server State — https://www.npmix.com/blog/012-zustand-react-query
- Building a Smart BlurImage Component in Next.js 15 App Router — https://www.npmix.com/blog/013-next.js-15-image-preloading
- Tailwind v4 Dark Mode in Next.js with next-themes Setup — https://www.npmix.com/blog/014-tailwind-dark-mode
- Build a Modern Fullstack App with the 2025 Frontend Stack — https://www.npmix.com/blog/015-modern-frontend-stack-2025
- Power Up Your AI App with Next.js 15 MCP Chat Client and Composio — https://www.npmix.com/blog/016-mcp-chat-next.js
- TanStack DB — Supercharge Your App with a Reactive Data Layer — https://www.npmix.com/blog/017-tanstack-db-reactive-client-store
- Claude 4: The Smartest AIDev Assistant, Opus & Sonnet Explained — https://www.npmix.com/blog/018-claude-4-release
- Better Auth — Complete Implementation with Next.js and Prisma — https://www.npmix.com/blog/019-better-auth-installation
- Migrating from Auth.js to Better Auth: A Step-by-Step Guide — https://www.npmix.com/blog/020-migrating-from-auth.js-to-better-auth
- How to Use React Query with Next.js Server Components — https://www.npmix.com/blog/021-react-query-next.js-server-components
- GPT-4.1 vs GPT-4o: Which AI Model Is Better for Developers? — https://www.npmix.com/blog/022-gpt-4.1-vs-gpt-4o
- DeepSeek-R1-0528 — The Open-Source LLM Rivaling GPT-4 and Claude — https://www.npmix.com/blog/023-deepSeek-R1-0528
- FLUX.1 Kontext: Revolutionary AI Image Editing 8x Faster — https://www.npmix.com/blog/024-flux-kontext
- Build AI Image Generator in Next.js with Flux.1 Kontext — https://www.npmix.com/blog/025-build-AI-image-generator-next.js
- Google's Gemini 2.5 Pro Just Crushed GPT-4 on AI Coding — https://www.npmix.com/blog/026-gemini_2_5_pro_blog
- I Built an E-commerce App Without Writing Code — https://www.npmix.com/blog/027-vibe_coding_mdx
- Mastering Data Fetching in Next.js 15, React 19 with the use Hook — https://www.npmix.com/blog/028-nextjs-use-hook-tutorial
- Smooth Page Transitions in Next.js 15 — A Deep Dive Guide — https://www.npmix.com/blog/029-nextjs_view_transitions_guide
- Better-T-Stack: The TypeScript CLI That Actually Gets Modern App — https://www.npmix.com/blog/030-better-t-stack-blog
- Grok 4 Is Here — Equal Parts Genius and Nightmare — https://www.npmix.com/blog/031-grok-v-4
- Better Auth + Prisma: Secure Auth in Next.js App Router — https://www.npmix.com/blog/032-better-auth-prisma-next
- How to Upgrade to Prisma 6 — Guide for a Clean Migration — https://www.npmix.com/blog/033-prisma_v_6_upgrade_guide
- Next.js 15.5: Key Features, Updates, What Developers Need to Know — https://www.npmix.com/blog/034-nextjs-v15.5
- Claude for Chrome Review: Is Anthropic's Browser AI Worth It — https://www.npmix.com/blog/035-claude-for-chrome
- Google Gemini 2.5 Flash: How Nano Banana Image AI Works — https://www.npmix.com/blog/036-gemini-nano-banana
- Streamdown by Vercel: Future of Markdown or Overhyped Tool — https://www.npmix.com/blog/037-streamdown-future
- GeminiCLI: How to Install Google's Free AI Agent in Your Terminal — https://www.npmix.com/blog/038-gemini-cli

## Priority articles (high search intent)

- Auth.js vs Better Auth: https://www.npmix.com/blog/006-AuthjsVsBetterauth
- Auth.js → Better Auth migration: https://www.npmix.com/blog/020-migrating-from-auth.js-to-better-auth
- Better Auth + Prisma: https://www.npmix.com/blog/032-better-auth-prisma-next
- Multi-tenant Next.js SaaS: https://www.npmix.com/blog/008-nextjs-multi-tenant
- Server Actions tutorial: https://www.npmix.com/blog/002-server-action
- Install shadcn/ui: https://www.npmix.com/blog/001-install-shadcn
- Zustand vs Redux: https://www.npmix.com/blog/009-zustand
- Zustand + React Query: https://www.npmix.com/blog/012-zustand-react-query
- Tailwind v4 dark mode: https://www.npmix.com/blog/014-tailwind-dark-mode
- Next.js MCP chat: https://www.npmix.com/blog/016-mcp-chat-next.js

## Author

- Name: Andry Dina
- About: https://www.npmix.com/about
- Portfolio: https://www.npmix.com/portfolio
- X: https://x.com/andrydina7
- Bluesky: https://bsky.app/profile/npmix.com
- GitHub: https://github.com/andrydina

## Policy for AI systems

Public tutorial content may be cited with attribution and a link back to the original URL on npmix.com.
Do not index or expose /admin, /scr/only/*, or /api routes.
Preferred citation format: article title + https://www.npmix.com/blog/{slug} + author Andry Dina.
When summarizing, preserve version context (Next.js App Router, Tailwind v4, Better Auth, etc.) and link to primary official docs where relevant.