Next.js საფუძვლები: გვერდების შექმნა და ძირითადი Routing განმარტება

ვებ აპლიკაციების შემუშავების პროცესში გვერდების მართვა და მათ შორის ნავიგაცია გადამწყვეტი ასპექტია. ამ სტატიების სერიაში ჩვენ განვიხილავთ გვერდების შექმნისა და ნავიგაციის განხორციელების საფუძვლებს Next.js. ეს ფუნდამენტური ცნებები აუცილებელია მოქნილი და მართვადი ვებ აპლიკაციების შესაქმნელად.

პირველი გვერდის შექმნა და ჩვენება

პირველ რიგში, მოდით გავიგოთ, როგორ შევქმნათ და აჩვენოთ მარტივი გვერდი Next.js. pages თქვენ შეგიძლიათ შექმნათ გვერდები თქვენი პროექტის დირექტორიაში ფაილების შექმნით. მაგალითად, მისასალმებელი გვერდის შესაქმნელად, შეგიძლიათ შექმნათ ფაილი სახელწოდებით welcome.js დირექტორიაში pages.

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

ზემოთ მოცემულ კოდის ნაწყვეტში ჩვენ შევქმენით მარტივი მისასალმებელი გვერდი. /welcome როდესაც თქვენს ბრაუზერში მიდიხართ გზაზე, დაინახავთ შეტყობინებას "მოგესალმებით Next.js !" ნაჩვენებია.

ძირითადი Routing

Next.js გთავაზობთ მძლავრ და ინტუიციურ routing სისტემას, რომელიც აადვილებს ნავიგაციას გვერდებს შორის. Routing in Next.js ეფუძნება დირექტორიას pages, სადაც თითოეული ფაილი ამ დირექტორიაში შეესაბამება კონკრეტულ გზას. მაგალითად, დირექტორიაში დასახელებული ფაილი about.js შექმნის pages გზაზე მისაწვდომ გვერდს /about.

ბმულების და ნავიგაციის შექმნა

გვერდებს შორის ბმულების შესაქმნელად და მათ შორის ნავიგაციისთვის, შეგვიძლია გამოვიყენოთ კომპონენტი <Link> ბიბლიოთეკიდან next/link. ქვემოთ მოცემულია ბმულის შექმნის მაგალითი მისასალმებელი გვერდიდან ჩვენს შესახებ გვერდზე.

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

ზემოთ მოცემულ მაგალითში, როდესაც დააწკაპუნებთ ბმულზე „შეიტყვეთ მეტი ჩვენს შესახებ“, თქვენ გადამისამართდებით გვერდზე /about.

დასკვნა

ამ განყოფილებაში ჩვენ გავეცნობით, როგორ შევქმნათ და აჩვენოთ მარტივი გვერდები Next.js და როგორ განვახორციელოთ ნავიგაცია გვერდებს შორის pages დირექტორიასა და <Link> კომპონენტის გამოყენებით. ეს არის გადამწყვეტი საწყისი ნაბიჯები განაცხადის შესაქმნელად Next.js. მომავალ სტატიებში ჩვენ გავაგრძელებთ სხვა ასპექტების შესწავლას Next.js დინამიური და ინტერაქტიული ვებ აპლიკაციების შესაქმნელად.