Pulse
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)
105 lines
2.3 KiB
Markdown
105 lines
2.3 KiB
Markdown
# Next.js 15 Migration & Configuration Guide
|
|
|
|
## Upgrading to Next.js 15
|
|
|
|
```bash
|
|
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:
|
|
|
|
```tsx
|
|
// 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` (replaces `useFormState`)
|
|
- `useFormStatus`
|
|
- `use()` for reading promises/context
|
|
|
|
## next.config.ts (TypeScript config)
|
|
|
|
```ts
|
|
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
|
|
|
|
```bash
|
|
# .env.local
|
|
DATABASE_URL="postgresql://..."
|
|
NEXT_PUBLIC_API_URL="https://api.example.com" # exposed to browser
|
|
```
|
|
|
|
```ts
|
|
// Access server-side
|
|
process.env.DATABASE_URL
|
|
|
|
// Access client-side (only NEXT_PUBLIC_ prefix)
|
|
process.env.NEXT_PUBLIC_API_URL
|
|
```
|
|
|
|
## Turbopack (Default in Dev)
|
|
|
|
```bash
|
|
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
|
|
|
|
```json
|
|
// tsconfig.json
|
|
{
|
|
"compilerOptions": {
|
|
"baseUrl": ".",
|
|
"paths": {
|
|
"@/*": ["./*"],
|
|
"@/components/*": ["./components/*"],
|
|
"@/lib/*": ["./lib/*"]
|
|
}
|
|
}
|
|
}
|
|
```
|