Next.js 14+ framework guardrails, patterns, and best practices for AI-assisted development.
Use when working with Next.js projects, or when the user mentions Next.js/Next.
Provides App Router patterns, server components, data fetching, and deployment guidelines.
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.
Next.js 14+ framework guardrails, patterns, and best practices for AI-assisted development.
Use when working with Next.js projects, or when the user mentions Next.js/Next.
Provides App Router patterns, server components, data fetching, and deployment guidelines.
Framework: Next.js 14+ (App Router)
Language: TypeScript/JavaScript
Use Cases: Full-Stack Web Apps, SSR/SSG, E-commerce, Blogs, Dashboards
Overview
Next.js is a React framework providing server-side rendering, static site generation, API routes, and full-stack development in a single codebase. Version 14+ uses the App Router as the default, built on React Server Components.
Project Setup
# Create new Next.js app
npx create-next-app@latest my-app --typescript --tailwind --eslint --app
cd my-app
npm run dev
All components in the app/ directory are Server Components by default. They run on the server only and can directly access databases, file systems, and secrets.
// app/users/page.tsx -- Server Component (no directive needed)import { db } from'@/lib/db';
exportdefaultasyncfunctionUsersPage() {
const users = await db.user.findMany();
return (
<ul>
{users.map((user) => <likey={user.id}>{user.name}</li>)}
</ul>
);
}
Client Component
Add 'use client' at the top of the file. Push this directive as low in the tree as possible.
Use Server Components by default; add 'use client' only when needed
Push 'use client' as low in the component tree as possible
Colocate data fetching with the component that needs it
Use Promise.all for independent parallel fetches
Implement loading.tsx and error.tsx for every route segment
Use Server Actions for mutations (not API routes for form submissions)
Validate all inputs with schema validators (Zod) in Server Actions and API routes
Use next/image for images and next/font for fonts (performance)
Set proper metadata on every page for SEO
Use Suspense boundaries to stream slow data
Never import server-only modules in Client Components
Never expose secrets or database access in Client Components
Commands Reference
npm run dev # Development server (http://localhost:3000)
npm run build # Production build
npm run start # Start production server
npm run lint # ESLint check
npx tsc --noEmit # TypeScript validation
npm test# Run tests (Vitest/Jest)
Advanced Topics
For detailed code examples, advanced patterns, testing strategies, performance optimization, caching strategies, and ISR/SSG/SSR details, see:
