Next.js Základy: Vytváření stránek a základní Routing vysvětlení

V procesu vývoje webových aplikací je správa stránek a navigace mezi nimi zásadním aspektem. V této sérii článků se ponoříme do základů vytváření stránek a implementace navigace v Next.js. Tyto základní koncepty jsou nezbytné pro vytváření flexibilních a spravovatelných webových aplikací.

Vytvoření a zobrazení první stránky

Za prvé, pojďme pochopit, jak vytvořit a zobrazit jednoduchou stránku v Next.js. Stránky můžete vytvářet vytvořením souborů v pages adresáři vašeho projektu. Chcete-li například vytvořit uvítací stránku, můžete vytvořit soubor s názvem welcome.js v pages adresáři.

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

Ve výše uvedeném úryvku kódu jsme vytvořili jednoduchou uvítací stránku. Když přistoupíte k /welcome cestě ve webovém prohlížeči, zobrazí se zpráva "Vítejte v Next.js !" zobrazeno.

Základní Routing

Next.js nabízí robustní a intuitivní routing systém, který usnadňuje navigaci mezi stránkami. Routing in Next.js je založen na pages adresáři, přičemž každý soubor v tomto adresáři odpovídá specifické cestě. Například soubor s názvem about.js v pages adresáři vytvoří stránku přístupnou na /about cestě.

Vytváření odkazů a navigace

Pro vytváření vazeb mezi stránkami a navigaci mezi nimi můžeme použít komponentu <Link> z next/link knihovny. Níže je uveden příklad vytvoření odkazu z uvítací stránky na stránku o nás.

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

Ve výše uvedeném příkladu, když kliknete na odkaz "Další informace o nás", budete přesměrováni na stránku /about.

Závěr

V této části jsme prozkoumali, jak vytvořit a zobrazit jednoduché stránky Next.js a jak implementovat navigaci mezi stránkami pomocí pages adresáře a <Link> komponenty. Toto jsou zásadní počáteční kroky při vytváření Next.js aplikace. V nadcházejících článcích budeme pokračovat ve zkoumání dalších aspektů Next.js vytváření dynamických a interaktivních webových aplikací.