Next.js Dasar: Nggawe Kaca lan Routing Dijelasake Dasar

Ing proses pangembangan aplikasi web, ngatur kaca lan navigasi ing antarane minangka aspek sing penting. Ing seri artikel iki, kita bakal nliti dhasar nggawe kaca lan ngleksanakake navigasi ing Next.js. Konsep dhasar iki penting kanggo mbangun aplikasi web sing fleksibel lan bisa diatur.

Nggawe lan Nampilake Kaca Kapisan

Kaping pisanan, ayo ngerti carane nggawe lan nampilake kaca prasaja ing Next.js. Sampeyan bisa nggawe kaca kanthi nggawe file ing pages direktori proyek sampeyan. Contone, kanggo nggawe kaca sambutan, sampeyan bisa nggawe file sing dijenengi welcome.js ing pages direktori kasebut.

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

Ing cuplikan kode ing ndhuwur, kita wis nggawe kaca sambutan sing prasaja. Nalika sampeyan ngakses /welcome path ing browser web, sampeyan bakal weruh pesen "Welcome to Next.js !" ditampilake.

dhasar Routing

Next.js nawakake sistem sing mantep lan intuisi routing sing nggawe navigasi antarane kaca gampang. Routing ing Next.js adhedhasar pages direktori, karo saben file ing direktori iki cocog kanggo path tartamtu. Contone, file sing dijenengi about.js ing pages direktori bakal nggawe kaca sing bisa diakses ing /about path.

Nggawe Link lan Navigasi

Kanggo nggawe pranala ing antarane kaca lan navigasi ing antarane, kita bisa nggunakake <Link> komponen saka next/link perpustakaan. Ing ngisor iki conto nggawe link saka kaca sambutan menyang kaca babagan kita.

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

Ing conto ing ndhuwur, nalika sampeyan ngeklik link "Sinau luwih lengkap babagan kita", sampeyan bakal dialihake menyang /about kaca kasebut.

Kesimpulan

Ing bagean iki, kita wis njelajah carane nggawe lan nampilake kaca prasaja Next.js lan carane ngleksanakake navigasi antarane kaca nggunakake pages direktori lan <Link> komponen. Iki minangka langkah awal sing penting kanggo mbangun Next.js aplikasi. Ing artikel sing bakal teka, kita bakal terus njelajah aspek liyane Next.js kanggo mbangun aplikasi web dinamis lan interaktif.