Next.js Elemente de bază: crearea de pagini și Routing explicații de bază

În procesul de dezvoltare a aplicațiilor web, gestionarea paginilor și navigarea între ele este un aspect crucial. În această serie de articole, vom aprofunda în elementele fundamentale ale creării paginilor și implementării navigării în Next.js. Aceste concepte fundamentale sunt esențiale pentru construirea de aplicații web flexibile și gestionabile.

Crearea și afișarea primei pagini

În primul rând, să înțelegem cum să creați și să afișați o pagină simplă în Next.js. Puteți crea pagini creând fișiere în pages directorul proiectului dumneavoastră. De exemplu, pentru a crea o pagină de bun venit, puteți crea un fișier numit welcome.js în pages director.

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

În fragmentul de cod de mai sus, am creat o pagină simplă de bun venit. Când accesați /welcome calea în browserul dvs. web, veți vedea mesajul „Bine ați venit la Next.js !” afișat.

De bază Routing

Next.js oferă un sistem robust și intuitiv routing care facilitează navigarea între pagini. Routing in Next.js se bazează pe pages director, fiecare fișier din acest director corespunzând unei anumite căi. De exemplu, un fișier numit about.js în pages director va crea o pagină accesibilă la /about cale.

Crearea de legături și navigare

Pentru a crea legături între pagini și a naviga între ele, putem folosi componenta <Link> din next/link bibliotecă. Mai jos este un exemplu de creare a unui link de la pagina de bun venit la pagina despre noi.

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

În exemplul de mai sus, când dați clic pe linkul „Aflați mai multe despre noi”, veți fi redirecționat către /about pagină.

Concluzie

În această secțiune, am explorat cum să creați și să afișați pagini simple Next.js și cum să implementăm navigarea între pagini folosind pages directorul și <Link> componenta. Aceștia sunt pașii inițiali cruciali în construirea unei Next.js aplicații. În articolele viitoare, vom continua să explorăm alte aspecte ale Next.js dezvoltării de aplicații web dinamice și interactive.