Question 1

Qual è il metodo consigliato per definire i metadata in Next.js App Router?

Accepted Answer

Next.js App Router introduce l'oggetto `metadata` esportato da layouts e pages per definire i metadata in modo type-safe e ottimizzato. Questo approccio sostituisce i componenti `<Head>` di Next.js 12 e consente il rendering lato server dei metadata. L'export `metadata` è statico e analizzato al build time per migliori prestazioni SEO.

Question 2

Come generare metadata dinamici basati sui parametri di route in Next.js?

Accepted Answer

La funzione `generateMetadata` è asincrona e riceve `params` e `searchParams` come argomenti, consentendo il caricamento dei dati per costruire i metadata dinamicamente. Viene eseguita lato server al momento del rendering e può effettuare chiamate API. Questo permette di creare metadata unici per ogni pagina dinamica, essenziale per il SEO delle pagine di dettaglio.

Question 3

Come gestisce Next.js la fusione dei metadata tra layouts annidati e pages?

Accepted Answer

Next.js unisce automaticamente i metadata dai layouts genitore alle pages figlie, dando priorità ai valori più vicini alla page. I campi vengono sovrascritti (title, description) tranne `openGraph.images` e `twitter.images` che vengono uniti come array. Questa cascata consente di definire metadata predefiniti a livello root e sovrascriverli a livello di page.

Metadata & SEO in Next.js

Qual è il metodo consigliato per definire i metadata in Next.js App Router?

Risposta

Come generare metadata dinamici basati sui parametri di route in Next.js?

Risposta

Come gestisce Next.js la fusione dei metadata tra layouts annidati e pages?

Risposta

Qual è il vantaggio di usare `title.template` nei metadata di Next.js?

Qual è il metodo consigliato per definire le favicon in Next.js App Router?

Altri argomenti di colloquio React / Next.js

Fondamenti di JavaScript

Fondamenti di React

React Hooks

Ciclo di vita dei componenti

React Router

Gestione dello state con Context

Form e Controlled Components

Recupero dati e API

React Query (TanStack Query)

Styling & CSS-in-JS

Fondamentali di Next.js

TypeScript con React

Data Fetching in Next.js

Server Actions di Next.js

Routing e Navigazione in Next.js

API Routes di Next.js

Middleware e Auth in Next.js

Testing React

Zustand State Management

Ottimizzazione delle Performance React

Error Boundaries & Error Handling

Advanced React Patterns

Funzionalità avanzate di Next.js

Deploy e Produzione con Next.js

Architecture & Design Patterns

React Server Components

Internazionalizzazione di Next.js

React Sicurezza & Best Practices

Padroneggia React / Next.js per il tuo prossimo colloquio