Next.js Alapvető tudnivalók: Oldalak létrehozása és az alapvető Routing magyarázatok

A webalkalmazások fejlesztése során az oldalak kezelése és a közöttük való navigálás kulcsfontosságú szempont. Ebben a cikksorozatban az oldalak létrehozásának és a navigáció megvalósításának alapjaiban fogunk elmélyülni Next.js. Ezek az alapkoncepciók elengedhetetlenek a rugalmas és kezelhető webalkalmazások létrehozásához.

Az első oldal létrehozása és megjelenítése

Először is ismerjük meg, hogyan hozhatunk létre és jeleníthetünk meg egy egyszerű oldalt a -ban Next.js. Létrehozhat oldalakat, ha fájlokat hoz létre a pages projekt könyvtárában. Például üdvözlő oldal létrehozásához létrehozhat egy elnevezett fájlt welcome.js a pages könyvtárban.

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

A fenti kódrészletben egy egyszerű üdvözlő oldalt hoztunk létre. Amikor eléri az elérési /welcome utat a webböngészőjében, az "Üdvözöljük a Next.js !" üzenetet fogja látni. Megjelenik.

Alapvető Routing

Next.js robusztus és intuitív routing rendszert kínál, amely megkönnyíti az oldalak közötti navigálást. Routing in Next.js a könyvtáron alapul pages, és ebben a könyvtárban minden fájl egy adott elérési útnak felel meg. Például egy, about.js a pages könyvtárban elnevezett fájl létrehoz egy oldalt, amely az /about elérési úton elérhető.

Linkek létrehozása és navigáció

Az oldalak közötti hivatkozások létrehozásához és a közöttük való navigáláshoz használhatjuk <Link> a könyvtár összetevőjét next/link. Az alábbiakban egy példa látható az üdvözlőoldalról a rólunk szóló oldalra mutató hivatkozás létrehozására.

// 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;  

A fenti példában, amikor rákattint a "További információ rólunk" linkre, a rendszer átirányítja az oldalra /about.

Következtetés

Ebben a részben azt vizsgáltuk, hogyan hozhatunk létre és jeleníthetünk meg egyszerű oldalakat, Next.js és hogyan valósíthatjuk meg az oldalak közötti navigációt a pages címtár és az <Link> összetevő használatával. Ezek döntő fontosságú kezdeti lépések egy alkalmazás létrehozásában Next.js. A következő cikkekben folytatjuk a Next.js dinamikus és interaktív webalkalmazások létrehozásának egyéb szempontjainak feltárását.