Routing e Navigazione in Next.js
Dynamic routes, route groups, parallel routes, intercepting routes, useRouter, Link, redirect
1Qual è la sintassi per creare una rotta dinamica in Next.js App Router?
Qual è la sintassi per creare una rotta dinamica in Next.js App Router?
Risposta
Le rotte dinamiche in Next.js App Router usano le parentesi quadre per definire segmenti URL variabili. Ad esempio, [id] crea una rotta che cattura qualsiasi valore in quella posizione nell'URL. Questo valore è poi accessibile tramite i parametri della pagina. Questa convenzione permette di creare pagine generiche che si adattano a contenuti diversi senza creare file separati per ogni variazione.
2Qual è il ruolo principale del componente Link in Next.js?
Qual è il ruolo principale del componente Link in Next.js?
Risposta
Il componente Link è l'elemento di navigazione consigliato in Next.js. Precarica automaticamente le rotte visibili nel viewport e abilita la navigazione lato client senza ricaricamenti completi della pagina. A differenza di un tag a standard, Link mantiene lo stato dell'applicazione e fornisce transizioni fluide tra le pagine, migliorando significativamente l'esperienza utente e le prestazioni.
3Come accedere ai parametri di una rotta dinamica in un Server Component?
Come accedere ai parametri di una rotta dinamica in un Server Component?
Risposta
In Next.js App Router, i Server Components ricevono automaticamente un oggetto params contenente i segmenti URL dinamici. Questo oggetto viene passato come prop alla funzione del componente. Ad esempio, per una rotta [id], params.id conterrà il valore catturato. Questo approccio semplifica l'accesso ai parametri senza bisogno di hook lato client.
Qual è il principale vantaggio dei route groups in Next.js?
Qual è la differenza tra useRouter e usePathname?
+19 domande da colloquio
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
API Routes di Next.js
Metadata & SEO in 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
Accedi a tutte le domande, flashcards, test tecnici, esercizi di code review e simulatori di colloquio.
Inizia gratis