Next.js Pagrindai: puslapių kūrimas ir pagrindiniai Routing paaiškinimai

Kuriant žiniatinklio programas, puslapių valdymas ir naršymas tarp jų yra labai svarbus aspektas. Šioje straipsnių serijoje gilinsimės į puslapių kūrimo ir naršymo diegimo pagrindus Next.js. Šios pagrindinės koncepcijos yra būtinos kuriant lanksčias ir valdomas žiniatinklio programas.

Pirmojo puslapio kūrimas ir rodymas

Pirmiausia supraskime, kaip sukurti ir rodyti paprastą puslapį Next.js. Galite kurti puslapius kurdami failus pages savo projekto kataloge. Pavyzdžiui, norėdami sukurti pasveikinimo puslapį, galite sukurti failą, pavadintą welcome.js kataloge pages.

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

Aukščiau pateiktame kodo fragmente sukūrėme paprastą pasveikinimo puslapį. Kai savo žiniatinklio naršyklėje pasieksite /welcome kelią, pamatysite pranešimą „Sveiki atvykę Next.js !“ rodomas.

Pagrindinis Routing

Next.js siūlo tvirtą ir intuityvią routing sistemą, kuri palengvina naršymą tarp puslapių. Routing in Next.js yra pagrįstas katalogu pages, o kiekvienas šio katalogo failas atitinka konkretų kelią. Pavyzdžiui, failas, pavadintas about.js kataloge, pages sukurs puslapį, pasiekiamą kelyje /about.

Nuorodų ir navigacijos kūrimas

Norėdami sukurti nuorodas tarp puslapių ir naršyti tarp jų, galime naudoti <Link> bibliotekos komponentą next/link. Toliau pateikiamas nuorodos iš sveikinimo puslapio į puslapį apie mus kūrimo pavyzdys.

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

Aukščiau pateiktame pavyzdyje spustelėję nuorodą „Sužinokite daugiau apie mus“, būsite nukreipti į puslapį /about.

Išvada

Šiame skyriuje mes ištyrėme, kaip sukurti ir rodyti paprastus puslapius Next.js ir kaip įdiegti naršymą tarp puslapių naudojant pages katalogą ir <Link> komponentą. Tai yra esminiai pradiniai žingsniai kuriant Next.js programą. Būsimuose straipsniuose toliau tyrinėsime kitus Next.js dinamiškų ir interaktyvių žiniatinklio programų kūrimo aspektus.