Next.js Temel Bilgiler: Sayfa Oluşturma ve Temel Routing Açıklamalar

Web uygulaması geliştirme sürecinde sayfaları yönetmek ve aralarında gezinmek çok önemli bir husustur. Bu makale dizisinde, sayfa oluşturmanın ve gezinmeyi uygulamanın temellerini ele alacağız Next.js. Bu temel kavramlar esnek ve yönetilebilir web uygulamaları oluşturmak için gereklidir.

İlk Sayfayı Oluşturma ve Görüntüleme

Öncelikle basit bir sayfanın nasıl oluşturulacağını ve görüntüleneceğini anlayalım Next.js. pages Projenizin dizini içerisinde dosyalar oluşturarak sayfalar oluşturabilirsiniz. welcome.js Örneğin bir karşılama sayfası oluşturmak için dizin içinde adlandırılmış bir dosya oluşturabilirsiniz pages.

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

Yukarıdaki kod parçacığında basit bir karşılama sayfası oluşturduk. /welcome Web tarayıcınızda yola eriştiğinizde "Hoş Geldiniz Next.js !" mesajını göreceksiniz. görüntülenir.

Temel Routing

Next.js routing sayfalar arasında gezinmeyi kolaylaştıran sağlam ve sezgisel bir sistem sunar. Routing in dizini Next.js temel alır pages ve bu dizindeki her dosya belirli bir yola karşılık gelir. Örneğin, about.js dizinde adı geçen bir dosya pages, yolda erişilebilen bir sayfa oluşturacaktır /about.

Bağlantılar ve Gezinme Oluşturma

<Link> Sayfalar arasında bağlantı oluşturmak ve aralarında gezinmek için kitaplıktaki bileşeni kullanabiliriz next/link. Aşağıda hoş geldiniz sayfasından hakkımızda sayfasına bağlantı oluşturmanın bir örneği verilmiştir.

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

Yukarıdaki örnekte "Hakkımızda daha fazla bilgi edinin" bağlantısını tıkladığınızda sayfaya yönlendirileceksiniz /about.

Çözüm

Bu bölümde, dizini ve bileşeni Next.js kullanarak basit sayfaların nasıl oluşturulacağını ve görüntüleneceğini ve sayfalar arasında gezinmenin nasıl uygulanacağını araştırdık. Bunlar bir uygulama oluşturmanın önemli ilk adımlarıdır. Gelecek makalelerde dinamik ve etkileşimli web uygulamaları oluşturmanın diğer yönlerini keşfetmeye devam edeceğiz. pages <Link> Next.js Next.js