Next.js Mahimman bayanai: Ƙirƙirar Shafuka da Bayani na Routing asali

A cikin aiwatar da haɓaka aikace-aikacen yanar gizo, sarrafa shafuka da kewayawa tsakanin su shine muhimmin al'amari. A cikin wannan silsilar labarin, za mu shiga cikin tushen ƙirƙirar shafuka da aiwatar da kewayawa a cikin Next.js. Waɗannan ra'ayoyin tushe suna da mahimmanci don gina aikace-aikacen yanar gizo masu sassauƙa da sarrafawa.

Ƙirƙirar da Nuna Shafin Farko

Da farko, bari mu fahimci yadda ake ƙirƙira da nuna shafi mai sauƙi a cikin Next.js. Kuna iya ƙirƙirar shafuka ta ƙirƙirar fayiloli a cikin pages kundin tsarin aikin ku. Misali, don ƙirƙirar shafin maraba, zaku iya ƙirƙirar fayil mai suna welcome.js a cikin pages kundin adireshi.

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

A cikin snippet code na sama, mun ƙirƙiri shafin maraba mai sauƙi. Lokacin da kuka shiga /welcome hanyar a cikin burauzar gidan yanar gizonku, zaku ga saƙon "Barka da zuwa Next.js !" nunawa.

Na asali Routing

Next.js yana ba da tsari mai ƙarfi da fahimta routing wanda ke sa kewayawa tsakanin shafuka cikin sauƙi. Routing in Next.js ya dogara ne akan pages kundin adireshi, tare da kowane fayil a cikin wannan kundin adireshi wanda yayi daidai da takamaiman hanya. Misali, fayil mai suna about.js a cikin pages kundin adireshi zai ƙirƙiri shafi mai isa ga /about hanyar.

Ƙirƙirar hanyoyin haɗi da kewayawa

Don ƙirƙirar hanyoyin haɗi tsakanin shafuka kuma kewaya tsakanin su, zamu iya amfani da <Link> ɓangaren daga next/link ɗakin karatu. A ƙasa akwai misalin ƙirƙirar hanyar haɗi daga shafin maraba zuwa shafin game da mu.

// 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 cikin misalin da ke sama, lokacin da ka danna mahaɗin "Ƙari game da mu", za a tura ka zuwa shafin /about.

Kammalawa

A cikin wannan sashe, mun bincika yadda ake ƙirƙira da nuna sauƙaƙan shafuka a ciki Next.js da yadda ake aiwatar da kewayawa tsakanin shafuka ta amfani da pages kundin adireshi da <Link> ɓangaren. Waɗannan matakai ne masu mahimmanci na farko wajen gina Next.js aikace-aikace. A cikin labarai masu zuwa, za mu ci gaba da bincika wasu fannonin Next.js gina aikace-aikacen gidan yanar gizo masu ƙarfi da mu'amala.