Sivujen ja asettelujen yleiskatsaus
Tutustu sivujen ja asettelujen eroon sekä siihen, miten ne yhdessä muodostavat Next.js-sovelluksesi käyttöliittymärakenteen
Sivujen ja asettelujen yleiskatsaus on ilmainen Next.js 15 -fullstack-kehitys (App Router + Server Actions)-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Next.js 15 -fullstack-kehitys (App Router + Server Actions)-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Next.js 15 -fullstack-kehitys (App Router + Server Actions)-kurssilla on yhteensä 4 oppituntia.
Tervetuloa sivujen ja asettelujen pariin
Next.js:n käyttöliittymä perustuu kahteen käsitteeseen: sivuihin ja asetteluihin. Tässä oppitunnissa opit, mitä kumpikin tarkoittaa ja miten ne yhdessä rakentavat käyttöliittymäsi.
Mikä on sivu?
Sivu on React-komponentti, joka renderöi yhden reitin käyttöliittymän. Vie se oletuksena page.js-tiedostosta, niin reitti saa oman näkymänsä.
Yksinkertaisen sivun luominen
Tässä on perusmuotoinen page.js, joka renderöi kotireitin /. Sivu on vain oletuksena viety komponentti — ei sen enempää.
// app/page.js
export default function HomePage() {
return (
<h1>Welcome to My App!</h1>
);
}Mikä on asettelu?
Asettelu on sivujen välillä jaettu käyttöliittymä — rakenne, joka pitää näkymän yhtenäisenä. Vie se tiedostosta layout.js; se ottaa children-propin sisäkkäistä sisältöä varten.
Juuriasettelu
Jokainen App Router -sovellus tarvitsee juuriasettelun tiedostoon app/layout.js. Se ympäröi koko sovelluksen, mukaan lukien html- ja body-tunnisteet, ja on oikea paikka yleisille tyyleille ja metatiedoille.
// app/layout.js
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}Sisäkkäiset asettelut
Lisää layout.js mihin tahansa kansioon luodaksesi sisäkkäisen asettelun. Tiedosto app/dashboard/layout.js ympäröi kaikki dashboard-kansion alla olevat sivut, joten osio voi sisältää oman jaetun käyttöliittymänsä.
Miten ne yhdistyvät
Next.js sisäkkäistää asettelut automaattisesti: sivu renderöidään ylemmän tason asettelun children-sisällössä, joka puolestaan renderöidään sitä ympäröivässä asettelussa aina juuriasetteluun asti.
Esimerkki: blogiosio
Ajatellaan blogia: blog/layout.js tarjoaa jaetun navigoinnin, blog/page.js on hakemistosivu ja blog/first-post/page.js yksittäinen kirjoitus — jokainen sisäkkäistyy ylemmäs juuriasetteluun.
Koodi: blogin asetteluesimerkki
Tämä blog/layout.js ympäröi jokaisen /blog-sivun otsakkeella, navigoinnilla ja alatunnisteella — jaettu rakenne pysyy yhtenäisenä koko osiossa.
// app/blog/layout.js
export default function BlogLayout({ children }) {
return (
<div>
<header><h1>My Awesome Blog</h1></header>
<nav>
<a href="/blog">Home</a> | <a href="/blog/archive">Archive</a>
</nav>
<main>{children}</main>
<footer><p>© 2023 CoddyKit Blog</p></footer>
</div>
);
}Koodi: blogisivun esimerkki
Tässä on myös blog/page.js. Sen sisältö renderöidään juuri siihen kohtaan, jossa {children} sijaitsee komponentissa BlogLayout — sivu sijoitetaan siis asettelun sisään.
// app/blog/page.js
export default function BlogHomePage() {
return (
<section>
<h2>Welcome to the Blog Homepage!</h2>
<p>Discover our latest articles and insights.</p>
</section>
);
}Sivujen ja asettelujen kysely
Tarkistetaan, miten hyvin ymmärrät Next.js:n sivut ja asettelut.
Kertaus: sivut ja asettelut
Kertauksena: sivut (page.js) renderöivät reitin oman käyttöliittymän, asettelut (layout.js) jakavat käyttöliittymää reittien välillä, ja Next.js sisäkkäistää ne children-propin avulla.
Opi TypeScript tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 22
- Oppitunnit
- 88
Usein kysytyt kysymykset
Onko oppitunti ”Sivujen ja asettelujen yleiskatsaus” ilmainen?
Kyllä – oppitunnin ”Sivujen ja asettelujen yleiskatsaus” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Next.js 15 -fullstack-kehitys (App Router + Server Actions)-kurssin, päivitä CoddyKit PROhon. Next.js 15 -fullstack-kehitys (App Router + Server Actions)-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Sivujen ja asettelujen yleiskatsaus”?
Tutustu sivujen ja asettelujen eroon sekä siihen, miten ne yhdessä muodostavat Next.js-sovelluksesi käyttöliittymärakenteen Harjoittelet Next.js 15 -fullstack-kehitys (App Router + Server Actions)-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Next.js 15 -fullstack-kehitys (App Router + Server Actions)-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Next.js 15 -fullstack-kehitys (App Router + Server Actions)-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.
Kuinka kauan ”Sivujen ja asettelujen yleiskatsaus”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Next.js 15 -fullstack-kehitys (App Router + Server Actions)-oppitunnilla?
Kyllä. Jokainen Next.js 15 -fullstack-kehitys (App Router + Server Actions)-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Projektin määritys ja CLI
- Tiedostojärjestelmäpohjaisen reitityksen perusteet
- Sivujen ja asettelujen yleiskatsaus
- Next.js-sovelluksen tyylittely