Tiedostojärjestelmäpohjaisen reitityksen perusteet
Ymmärrä Next.js:n tiedostojärjestelmäpohjaisen reitityksen peruskäsitteet sekä opi luomaan perussivuja ja reittejä
Tiedostojärjestelmäpohjaisen reitityksen perusteet on ilmainen Next.js 15 -fullstack-kehitys (App Router + Server Actions)-oppitunti CoddyKitissä. Tämä on oppitunti 2/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.
Johdatus tiedostojärjestelmäpohjaiseen reititykseen
Next.js määrittää reitit tiedostojärjestelmäsi perusteella — kansio- ja tiedostorakenne määrittää suoraan URL-osoitteesi. Tiedostoista tulee sivuja ja kansioista URL-osoitteen osia.
Ydinhakemisto `app`
Jokainen reitti sijaitsee erityisessä app-hakemistossa, joka muodostaa sivustosi rakenteen perustan. Kaikki sinne lisäämäsi vaikuttaa reititykseen.
Pääsivun luominen
Reitti tarvitsee page.js-tiedoston, joka vie React-komponentin oletuksena. Sijoita se suoraan hakemistoon app/, niin siitä tulee etusivusi osoitteessa /.
Hei, Next.js:n etusivu!
Tässä on pelkistetty app/page.js. Tämä komponentti renderöidään juuriosoitteessasi / — sivulla, jolle kävijät saapuvat ensin.
export default function HomePage() {
return (
<div>
<h1>Welcome to CoddyKit!</h1>
<p>This is your Next.js homepage.</p>
</div>
);
}Kansiot sisäkkäisiä polkuja varten
Haluatko reitin /dashboard? Luo dashboard-kansio hakemistoon app/ ja lisää sen sisään page.js. Kansion nimestä tulee URL-osoitteen osa.
Dashboard-sivu
Tämä koodi sijoitetaan tiedostoon app/dashboard/page.js. Kun avaat osoitteen /dashboard, Next.js renderöi juuri tämän komponentin.
export default function DashboardPage() {
return (
<div>
<h1>Your Dashboard</h1>
<p>Here you'll find all your important stats.</p>
</div>
);
}Syvemmälle sisäkkäiset reitit
Voit luoda sisäkkäisyyttä niin syvälle kuin haluat — jokainen kansio lisää yhden URL-osoitteen osan. Siksi app/products/electronics/page.js vastaa osoitetta /products/electronics. Selkeää ja loogista.
Jaettu käyttöliittymä `layout.js`-tiedostolla
layout.js määrittää jaetun käyttöliittymän, joka ympäröi kansion sivuja — se sopii erinomaisesti navigointipalkkeihin, alatunnisteisiin ja sivupalkkeihin, jotka pysyvät samoina reitiltä toiselle siirryttäessä.
Reittien vastaavuuskysely
Oletetaan, että Next.js-projektissasi on tiedosto app/blog/posts/page.js. Mitä URL-polku vastaa tätä tiedostoa?
Tiedostojärjestelmäpohjaisen reitityksen kertaus
Kertauksena: app-hakemisto toimii kaikkien reittien perustana, page.js määrittää reitin käyttöliittymän, kansiot luovat sisäkkäisiä osia ja layout.js jakaa käyttöliittymää niiden välillä.
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 ”Tiedostojärjestelmäpohjaisen reitityksen perusteet” ilmainen?
Kyllä – oppitunnin ”Tiedostojärjestelmäpohjaisen reitityksen perusteet” 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 ”Tiedostojärjestelmäpohjaisen reitityksen perusteet”?
Ymmärrä Next.js:n tiedostojärjestelmäpohjaisen reitityksen peruskäsitteet sekä opi luomaan perussivuja ja reittejä 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 2/4.
Kuinka kauan ”Tiedostojärjestelmäpohjaisen reitityksen perusteet”-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