ae39e45460
NOVAS SKILLS: - next-best-practices v0.1.0 (CLEAN) — Next.js App Router, RSC, caching, data - nextjs-patterns v1.0.0 (CLEAN) — Next.js 15: Server Actions, route handlers - vite v1.0.0 (CLEAN) — env vars, aliases, proxy, CJS compat - uncle-bob v1.0.0 (CLEAN) — Clean Code, SOLID, Clean Architecture - clean-code-review v1.0.0 (CLEAN) — naming, guard clauses, anti-patterns, refactoring - vue v1.0.0 (CLEAN) — Vue framework - vue-composition-api-best-practices v1.0.0 (CLEAN) — composables, Pinia, reactivity BIBLIOTECA INTELIGENTE libs/ (10 dominios, 11 arquivos): - typescript/ — TS safe + generics gotchas - react/ — Next.js App Router + Vite config - vue/ — Composition API + Pinia - linux/ — System diagnostic cheatsheet - database/ — PostgreSQL + MySQL patterns - browser/ — Chromium CLI + E2E testing - security/ — SAST audit (OWASP Top 10) - best-practices/ — Clean Code + SOLID + Clean Architecture - deploy/ — Docker multi-stack + OpenClaw ops - + INDEX.md como guia de navegacao .learnings/ — LRN-20260519-003 criado (biblioteca compartilhada)
2.3 KiB
2.3 KiB
Next.js 15 Migration & Configuration Guide
Upgrading to Next.js 15
npx @next/codemod@canary upgrade latest
# or manual:
npm install next@latest react@latest react-dom@latest
Key Breaking Changes (14 → 15)
1. Async Request APIs (Breaking)
cookies(), headers(), params, searchParams are now async:
// Before (Next.js 14)
export default function Page({ params }) {
const { id } = params
}
// After (Next.js 15)
export default async function Page({ params }) {
const { id } = await params
}
// cookies and headers
import { cookies, headers } from "next/headers"
const cookieStore = await cookies()
const headersList = await headers()
2. Caching Defaults Changed
fetch() no longer caches by default (was force-cache, now no-store).
Add { cache: "force-cache" } or set route-level export const fetchCache = "default-cache" to restore.
3. React 19 Compatibility
Next.js 15 supports React 19. New hooks available:
useActionState(replacesuseFormState)useFormStatususe()for reading promises/context
next.config.ts (TypeScript config)
import type { NextConfig } from "next"
const config: NextConfig = {
experimental: {
ppr: "incremental", // Partial Prerendering
reactCompiler: true, // React Compiler (auto-memoization)
},
images: {
remotePatterns: [
{ protocol: "https", hostname: "images.example.com" },
],
},
logging: {
fetches: { fullUrl: true }, // Log all fetch calls in dev
},
}
export default config
Environment Variables
# .env.local
DATABASE_URL="postgresql://..."
NEXT_PUBLIC_API_URL="https://api.example.com" # exposed to browser
// Access server-side
process.env.DATABASE_URL
// Access client-side (only NEXT_PUBLIC_ prefix)
process.env.NEXT_PUBLIC_API_URL
Turbopack (Default in Dev)
next dev # uses Turbopack by default in Next.js 15
next dev --turbopack # explicit flag (same behavior)
next build # Webpack still default for production builds
TypeScript Path Aliases
// tsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./*"],
"@/components/*": ["./components/*"],
"@/lib/*": ["./lib/*"]
}
}
}