);
}
```
### not-found.tsx
Pagina 404 per segmento.
```tsx
// app/blog/not-found.tsx
export default function NotFound() {
return (
Not Found
Could not find requested resource
);
}
```
```tsx
// Per triggerare programmaticamente
import { notFound } from "next/navigation";
export default async function BlogPost({ params }: PageProps) {
const post = await fetchPost((await params).slug);
if (!post) {
notFound();
}
return {/* ... */};
}
```
### template.tsx
Simile a layout.tsx ma:
- Si re-mounta su ogni navigazione
- Mantiene stato/UI separati tra le route
```tsx
// app/dashboard/template.tsx
export default function Template({
children,
}: {
children: React.ReactNode;
}) {
return
{children}
;
}
```
### default.tsx
Fallback per parallel routes quando non c'è match.
```tsx
// app/dashboard/@team/default.tsx
export default function Default() {
return
Select a team member
;
}
```
## Navigation
### Link Component
```tsx
import Link from "next/link";
export default function Navigation() {
return (
);
}
```
### useRouter Hook (Client Components)
```tsx
"use client";
import { useRouter } from "next/navigation";
export default function NavigationButton() {
const router = useRouter();
return (
);
}
```
| Method | Description |
|--------|-------------|
| `push(href)` | Naviga a nuova route |
| `replace(href)` | Naviga sostituendo la route corrente |
| `back()` | Torna indietro nella history |
| `forward()` | Vai avanti nella history |
| `refresh()` | Refresh della route corrente |
| `prefetch(href)` | Prefetch di una route |
### Programmatic Navigation (Server Components)
```tsx
import { redirect } from "next/navigation";
export default async function ProtectedPage() {
const session = await getSession();
if (!session) {
redirect("/login");
}
return
Protected content
;
}
```
## API Route Handlers
```ts
// app/api/users/route.ts
import { NextRequest, NextResponse } from "next/server";
// GET /api/users
export async function GET(request: NextRequest) {
const users = await db.user.findMany();
return NextResponse.json(users);
}
// POST /api/users
export async function POST(request: NextRequest) {
const body = await request.json();
const user = await db.user.create({ data: body });
return NextResponse.json(user, { status: 201 });
}
```
```ts
// app/api/users/[id]/route.ts
interface RouteParams {
params: Promise<{ id: string }>;
}
// GET /api/users/[id]
export async function GET(request: NextRequest, { params }: RouteParams) {
const { id } = await params;
const user = await db.user.findUnique({ where: { id } });
if (!user) {
return NextResponse.json({ error: "Not found" }, { status: 404 });
}
return NextResponse.json(user);
}
// PATCH /api/users/[id]
export async function PATCH(request: NextRequest, { params }: RouteParams) {
const { id } = await params;
const body = await request.json();
const user = await db.user.update({
where: { id },
data: body,
});
return NextResponse.json(user);
}
// DELETE /api/users/[id]
export async function DELETE(request: NextRequest, { params }: RouteParams) {
const { id } = await params;
await db.user.delete({ where: { id } });
return NextResponse.json(null, { status: 204 });
}
```
## next/image
```tsx
import Image from "next/image";
export default function Avatar({ src, alt }: { src: string; alt: string }) {
return (
);
}
```
### Fill Mode
```tsx
```
## next/font
```tsx
// app/layout.tsx
import { Inter, Roboto_Mono } from "next/font/google";
const inter = Inter({
subsets: ["latin"],
display: "swap",
variable: "--font-inter",
});
const robotoMono = Roboto_Mono({
subsets: ["latin"],
variable: "--font-roboto-mono",
});
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
{children}
);
}
```
```css
/* globals.css */
body {
font-family: var(--font-inter), system-ui, sans-serif;
}
code {
font-family: var(--font-roboto-mono), monospace;
}
```
## Environment Variables
```
# .env.local
# Accessibile solo nel server
DATABASE_URL="postgresql://..."
API_SECRET_KEY="secret"
# Accessibile anche nel client (prefisso NEXT_PUBLIC_)
NEXT_PUBLIC_API_URL="https://api.example.com"
NEXT_PUBLIC_APP_NAME="My App"
```
```tsx
// Server Component - accesso diretto
export default async function Page() {
const data = await fetch(process.env.DATABASE_URL!);
// ...
}
```
```tsx
// Client Component - solo NEXT_PUBLIC_
"use client";
export default function Config() {
return