Next.js 16 + React 19 Patterns

Next.js 16 + React 19 Patterns

Overview

Nuove feature e pattern specifici per Next.js 16 con React 19.

Async Context

Async Server Components

// app/page.tsx
export default async function Page() {
  // Direttamente async nel componente
  const data = await fetch('https://api.example.com/data')

  return <DataView data={data} />
}

Async Layout

// app/layout.tsx
export default async function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const settings = await fetchSettings()

  return (
    <html lang={settings.locale}>
      <body className={settings.theme}>{children}</body>
    </html>
  )
}

Server Actions

Form Actions

// app/actions.ts
'use server'

export async function submitForm(formData: FormData) {
  'use server'

  const name = formData.get('name')
  const email = formData.get('email')

  await db.user.create({ data: { name, email } })
  redirect('/success')
}

// app/page.tsx
import { submitForm } from './actions'

export default function Page() {
  return (
    <form action={submitForm}>
      <input name="name" />
      <input name="email" type="email" />
      <button type="submit">Submit</button>
    </form>
  )
}

useActionState

'use client'

import { useActionState } from 'react'
import { submitForm } from './actions'

export function Form() {
  const [state, action, pending] = useActionState(submitForm, null)

  return (
    <form action={action}>
      <input name="email" />
      <button disabled={pending}>{pending ? 'Submitting...' : 'Submit'}</button>
      {state?.error && <p>{state.error}</p>}
    </form>
  )
}

useFormStatus

'use client'

import { useFormStatus } from 'react-dom'

function SubmitButton() {
  const { pending } = useFormStatus()

  return <button disabled={pending}>{pending ? 'Loading...' : 'Submit'}</button>
}

export function Form() {
  return (
    <form action={submitAction}>
      <input name="name" />
      <SubmitButton />
    </form>
  )
}

React 19 Hooks

use()

'use client'

import { use, Suspense } from 'react'

// Promise in variabile
const messagePromise = fetchMessage()

function Message() {
  const message = use(messagePromise)
  return <p>{message}</p>
}

// O da props
function Comments({ commentsPromise }: { commentsPromise: Promise<Comment[]> }) {
  const comments = use(commentsPromise)
  return (
    <ul>
      {comments.map((c) => (
        <li key={c.id}>{c.text}</li>
      ))}
    </ul>
  )
}

useOptimistic

'use client'

import { useOptimistic } from 'react'

type Todo = { id: string; text: string; completed: boolean }

export function TodoList({ todos }: { todos: Todo[] }) {
  const [optimisticTodos, addOptimisticTodo] = useOptimistic(
    todos,
    (state, newTodo: Todo) => [...state, newTodo]
  )

  async function addTodo(formData: FormData) {
    const text = formData.get('text') as string

    // Aggiungi subito UI
    addOptimisticTodo({
      id: crypto.randomUUID(),
      text,
      completed: false,
    })

    // Poi fai la richiesta reale
    await createTodo(text)
  }

  return (
    <form action={addTodo}>
      <input name="text" />
      <button>Add</button>
      {optimisticTodos.map((todo) => (
        <div key={todo.id}>{todo.text}</div>
      ))}
    </form>
  )
}

Parallel Data Fetching

// app/page.tsx
import { Suspense } from 'react'

export default function Page() {
  // Avvia tutte le fetch in parallelo
  const userPromise = fetchUser()
  const postsPromise = fetchPosts()
  const statsPromise = fetchStats()

  return (
    <>
      <Suspense fallback={<UserSkeleton />}>
        <UserProfile promise={userPromise} />
      </Suspense>

      <Suspense fallback={<PostsSkeleton />}>
        <PostList promise={postsPromise} />
      </Suspense>

      <Suspense fallback={<StatsSkeleton />}>
        <Stats promise={statsPromise} />
      </Suspense>
    </>
  )
}

// Componenti ricevono la promise
async function UserProfile({ promise }: { promise: Promise<User> }) {
  const user = await promise
  return <div>{user.name}</div>
}

Incremental Static Regeneration (ISR)

// app/blog/[slug]/page.tsx

// Rivalida ogni ora
export const revalidate = 3600

export async function generateStaticParams() {
  const posts = await fetchPosts()
  return posts.map((post) => ({ slug: post.slug }))
}

export default async function PostPage({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  const post = await fetchPost(slug)

  return <article>{post.content}</article>
}

Error Handling

Error Boundaries

// app/error.tsx
'use client'

export default function ErrorBoundary({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  return (
    <div>
      <h2>Something went wrong</h2>
      <button again</button>
    </div>
  )
}

Not Found

// app/not-found.tsx
export default function NotFound() {
  return (
    <div>
      <h2>Page Not Found</h2>
      <p>Could not find requested resource</p>
    </div>
  )
}

// Uso nel componente
import { notFound } from 'next/navigation'

export default async function Page({ params }: { params: { id: string } }) {
  const data = await fetchData(params.id)

  if (!data) {
    notFound()
  }

  return <div>{data.name}</div>
}