Next.js Perusasiat: Sivujen luominen ja Routing Perustiedot

Verkkosovelluskehityksen prosessissa sivujen hallinta ja niiden välillä liikkuminen on keskeistä. Tässä artikkelisarjassa perehdymme sivujen luomisen ja navigoinnin käyttöönoton perusteisiin Next.js. Nämä peruskonseptit ovat välttämättömiä joustavien ja hallittavien verkkosovellusten rakentamisessa.

Ensimmäisen sivun luominen ja näyttäminen

Ymmärretään ensin, kuinka yksinkertainen sivu luodaan ja näytetään Next.js. Voit luoda sivuja luomalla tiedostoja pages projektisi hakemistoon. Voit esimerkiksi luoda tervetulosivun luomalla hakemistoon nimetyn welcome.js tiedoston pages.

// pages/welcome.js  
function WelcomePage() {  
  return <h1>Welcome to Next.js!</h1>;  
}  
  
export default WelcomePage;  

Yllä olevaan koodinpätkään olemme luoneet yksinkertaisen tervetulosivun. Kun käytät /welcome polkua verkkoselaimessa, näet viestin "Tervetuloa Next.js !" näytetään.

Perus Routing

Next.js tarjoaa vankan ja intuitiivisen routing järjestelmän, joka tekee navigoinnista sivujen välillä helppoa. Routing in Next.js perustuu hakemistoon pages, ja jokainen tämän hakemiston tiedosto vastaa tiettyä polkua. Esimerkiksi hakemistossa nimetty tiedosto about.js luo pages sivun, johon pääsee polulla /about.

Linkkien ja navigoinnin luominen

Voit luoda linkkejä sivujen välille ja navigoida niiden välillä käyttämällä <Link> kirjaston komponenttia next/link. Alla on esimerkki linkin luomisesta tervetulosivulta Tietoja meistä -sivulle.

// pages/welcome.js  
import Link from 'next/link';  
  
function WelcomePage() {  
  return( 
    <div>  
      <h1>Welcome to Next.js!</h1>  
      <Link href="/about">Learn more about us</Link>  
    </div>  
 );  
}  
  
export default WelcomePage;  

Kun yllä olevassa esimerkissä napsautat "Lisätietoja meistä" -linkkiä, sinut ohjataan sivulle /about.

Johtopäätös

Tässä osiossa olemme tutkineet, kuinka luodaan ja näytetään yksinkertaisia ​​sivuja Next.js ja kuinka toteutetaan navigointi sivujen välillä käyttämällä pages hakemistoa ja <Link> komponenttia. Nämä ovat tärkeitä alkuvaiheita sovelluksen rakentamisessa Next.js. Tulevissa artikkeleissa jatkamme muiden Next.js dynaamisten ja interaktiivisten verkkosovellusten rakentamisen näkökohtien tutkimista.