Layout e componenti di pagina
Padroneggi la creazione di layout annidati e componenti di pagina all'interno della struttura App Router per un'interfaccia organizzata.
Layout e componenti di pagina è una lezione Next.js 15 Fullstack (App Router + Server Actions) gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Next.js 15 Fullstack (App Router + Server Actions), e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Next.js 15 Fullstack (App Router + Server Actions) include 4 lezioni in totale.
Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.
App Router UI Structure
The Next.js App Router organizes your application's user interface (UI) using special files: layout.js and page.js.
This structured approach helps you build consistent UIs that are easy to manage and scale across your mobile app.
What is a Layout?
A layout defines shared UI for a segment of routes. Think of it as a wrapper that surrounds your pages and other layouts.
- Layouts can contain common elements like navigation bars, footers, or sidebars.
- They don't re-render when navigating between pages within the same layout, improving performance.
The Root Layout File
Every App Router project must have a root layout file named app/layout.js at the top level of your app directory.
This layout defines the essential HTML structure, including the <html> and <body> tags, for your entire application.
Basic Root Layout Code
The children prop in a layout component is crucial. It represents the content of the nested layouts or pages below it.
This example shows a basic root layout with a header and footer.
app/layout.js
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<header>My App Header</header>
{children}
<footer>My App Footer</footer>
</body>
</html>
);
}What is a Page Component?
A page component is defined by a page.js file. This file contains the unique UI content specifically for a given route segment.
- Each URL path (e.g.,
/,/about) typically has its ownpage.js. - It renders within its parent layout(s), filling the
{children}slot.
Basic Page Component Code
This app/page.js file creates the UI for your root URL (/). It will be automatically wrapped by your app/layout.js.
app/page.js
export default function HomePage() {
return (
<main>
<h1>Welcome to CoddyKit!</h1>
<p>Start learning Next.js 15 today!</p>
</main>
);
}Creating Nested Layouts
You can create nested layouts by simply adding a layout.js file inside any subfolder within your app directory.
This allows you to apply shared UI to specific sections of your app, like a dashboard or user profile, while inheriting the root layout's structure.
Nested Layout Example
Here's how you'd create a nested layout for a /dashboard route. This dashboard layout wraps all pages within the /dashboard segment.
app/dashboard/layout.js
export default function DashboardLayout({ children }) {
return (
<section>
<nav>
<p>Dashboard Navigation</p>
</nav>
{children} {/* This will be app/dashboard/page.js */}
</section>
);
}
app/dashboard/page.js
export default function DashboardPage() {
return (
<h1>Dashboard Overview</h1>
);
}Layouts & Pages Hierarchy
The rendering order for your UI components flows from the outermost layout to the innermost page:
app/layout.js(Root Layout)app/dashboard/layout.js(Nested Layout, if applicable)app/dashboard/page.js(Specific Page Content)
Each layout receives the next level of UI as its children prop.
Quick Check
Test your knowledge on how Next.js App Router structures UI.
Recap: Layouts & Pages
You've learned how Next.js App Router uses layout.js files for shared UI and page.js files for unique content specific to a route.
Understanding this fundamental structure is key to building organized and scalable Next.js applications!
Impara TypeScript con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 22
- Lezioni
- 88
Domande Frequenti
La lezione «Layout e componenti di pagina» è gratuita?
Sì — il testo completo di «Layout e componenti di pagina» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Next.js 15 Fullstack (App Router + Server Actions), passa a CoddyKit PRO. Il corso Next.js 15 Fullstack (App Router + Server Actions) include 4 lezioni in totale.
Cosa imparerò in «Layout e componenti di pagina»?
Padroneggi la creazione di layout annidati e componenti di pagina all'interno della struttura App Router per un'interfaccia organizzata. Eserciti Next.js 15 Fullstack (App Router + Server Actions) con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Next.js 15 Fullstack (App Router + Server Actions)?
Non è richiesta alcuna esperienza precedente. Next.js 15 Fullstack (App Router + Server Actions) su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.
Quanto tempo richiede la lezione «Layout e componenti di pagina»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Next.js 15 Fullstack (App Router + Server Actions)?
Sì. Ogni lezione Next.js 15 Fullstack (App Router + Server Actions) include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Layout e componenti di pagina
- Route dinamiche e parametri
- Interfaccia di caricamento ed errori
- Gruppi di route e layout annidati