EXAMPLES

Guide Next.js 16 and React 19 project implementation with App Router and strict TypeScript.

2|2|Updated Feb 9, 2017
One-click install
npx skills add https://github.com/sumik5/dotfiles --skill examples-sumik5
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: EXAMPLES
Source: https://github.com/sumik5/dotfiles/tree/main/claude-code/skills/developing-nextjs/EXAMPLES.md
Command: npx skills add https://github.com/sumik5/dotfiles --skill examples-sumik5

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This document collects production-grade Next.js 16 + React 19 examples, including server components, actions, API routes, and server-driven pages.

Core Features & Use Cases

  • Server Components examples: Page with data fetching on the server.
  • API routes: REST-like operations and server actions.
  • UI integration: Real-world component usage with shadcn/ui.

Quick Start

Copy an example server component and adapt it to your route.

Frequently Asked Questions about EXAMPLES

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

FAQPage Schema
How do I build server components with Next.js 16 and React 19?

Server components in Next.js 16 let you fetch data and render on the server, reducing client-side JavaScript. Use the App Router, mark components with 'use server' or leave them as server-default, and pass fetched data as props to client components that handle interactivity.

What's the best way to structure API routes and server actions in Next.js?

API routes handle REST-like requests in the app/api directory; server actions handle form submissions and mutations from client components. Server actions are simpler for client-server communication, while API routes work for external integrations and webhook handling.

Can I use Server Components with Tailwind CSS v4 and TypeScript in strict mode?

Yes. Next.js 16 supports strict TypeScript configuration alongside Server Components and Tailwind CSS v4. Configure tsconfig.json with strict: true, install Tailwind v4, and use it in server and client components for type-safe styling.

How do I set up Prisma ORM with Next.js server components and actions?

Install Prisma, define your schema, and instantiate a PrismaClient. Use it in server components or server actions to query and mutate data; server actions automatically serialize responses for client consumption without manual API endpoints.

Do I need Docker and mise tooling for Next.js 16 projects?

Docker and mise are optional but recommended for production and team consistency. Docker packages your Next.js app for deployment; mise manages Node.js and tool versions in mise.toml to ensure reproducible local environments.

What testing and deployment options work with Next.js 16 server components?

Vitest runs unit and integration tests for server and client logic. Docker enables containerized deployments; Next.js 16 generates optimized production builds with server component prerendering and API route bundling for fast edge or Node.js runtimes.