Next.js - Ön Oluşturma

Next.js'de, ön işleme adı verilen bir sayfa için HTML oluşturduğunu biliyoruz. Next.JS, iki tür ön görüntülemeyi destekler.

Static Generation- Bu yöntem, derleme zamanında HTML sayfasını oluşturur. Bu önceden oluşturulmuş HTML, her istekte gönderilir. Bu yöntem pazarlama web siteleri, bloglar, web siteleri, yardımlar, dokümantasyon web sitelerini listeleyen e-ticaret ürünleri için kullanışlıdır.
Server Side Generation- Bu yöntem, her istekte HTML sayfası oluşturur. Bu yöntem, bir html sayfası içeriği her isteğe göre değişebildiği zaman uygundur.

Sayfa Başına Ön İşleme

Next.JS, sayfaların çoğunun statik oluşturmayı takip ettiği ve diğer sayfaların sunucu tarafı oluşturmayı kullanacağı her sayfa için ön işleme yönteminin ayarlanmasına izin verir.

Veri Olmadan Statik Üretim

Statik oluşturma, veri olmadan yapılabilir, bu durumda HTML sayfaları, verileri önceden getirmeye ve ardından oluşturmaya gerek kalmadan hazır olacaktır. Veriler daha sonra veya istek üzerine getirilebilir. Bu teknik, verilerin gelmesi zaman alırsa kullanıcıya herhangi bir veri olmadan bir Kullanıcı Arayüzü göstermeye yardımcı olur.

Verilerle Statik Üretim

Statik oluşturma, verilerle yapılabilir; bu durumda HTML sayfaları, veriler alınana kadar hazır olmayacaktır çünkü HTML verilere bağlı olabilir. Her bileşenin özel bir yöntemi vardırgetStaticProps Bu, verileri almak ve verileri sayfanın bir parçası olarak iletmek için kullanılabilir, böylece sayfa, aktarılan nesnelere uygunluklar oluşturabilir.

getStaticProps () işlevi üretimde derleme zamanında çalışır ve geliştirme modunda her istek için çalışır.

Aynısını göstermek için bir örnek oluşturalım.

Bu örnekte, bir sunucunun veri alması için bir güncelleme index.js ve first.js sayfası oluşturacağız.

Global CSS Desteği bölümünde kullanılan nextjs projesini güncelleyelim .

GetServerSideProps () yöntemini kullanmak için sayfalar dizinindeki index.js dosyasını güncelleyin. Bu yöntem istek başına çağrılacaktır.

import Link from 'next/link'
import Head from 'next/head'

function HomePage(props) {
   return (
      <>
         <Head>
            <title>Welcome to Next.js!</title>
         </Head>
         <div>Welcome to Next.js!</div>
         <Link href="/posts/first"><a>First Post</a></Link>
         <br/>
         <div>Next stars: {props.stars}</div>
         <img src="/logo.png" alt="TutorialsPoint Logo" />
      </>	    
   )
}

export async function getServerSideProps(context) {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const json = await res.json()
   return {
      props: { stars: json.stargazers_count }
   }
}

export default HomePage

GetStaticProps () yöntemini kullanmak için sayfalar dizinindeki first.js dosyasını güncelleyin. Bu yöntem bir kez çağrılacaktır.

import Link from 'next/link'
import Head from 'next/head'
import Container from '../../components/container'

export default function FirstPost(props) {
   return (
      <>
         <Container>
            <Head>
               <title>My First Post</title>
            </Head>
            <h1>My First Post</h1>
            <h2>
               <Link href="/">
                  <a>Home</a>
               </Link>
               <div>Next stars: {props.stars}</div>
            </h2>
         </Container>
      </>	  
   )
}

export async function getStaticProps() {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const json = await res.json()
   return {
      props: { stars: json.stargazers_count }
   }
}

Next.js Sunucusunu Başlatın

Sunucuyu başlatmak için aşağıdaki komutu çalıştırın -.

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Çıkışı Doğrula

Bir tarayıcıda localhost: 3000'i açın ve aşağıdaki çıktıyı göreceksiniz.

İlk gönderi bağlantısına tıklayın.