close

Ingantawa da Ƙaddamarwa a cikin Next.js: Haɓaka Ayyuka

Haɓaka aiki da tura aikace-aikace yadda ya kamata matakai ne masu mahimmanci a cikin tsarin haɓaka aikace Next.js -aikacen. Wannan labarin zai jagorance ku ta hanyar inganta ayyukan aikace-aikacenku ta amfani da Server-Side Rendering(SSR) da inganta hoto. Hakanan zaku koyi yadda ake tura Next.js aikace-aikacenku zuwa dandamali daban-daban kamar Vercel, Netlify, ko uwar garken ku.

Inganta Ayyuka tare da Server-Side Rendering(SSR)

Server-Side Rendering(SSR) dabara ce mai mahimmanci don haɓaka aikin Next.js aikace-aikacen ku. Lokacin amfani da SSR, an riga an riga an tsara shafukanku kuma ana aiki dasu daga uwar garken maimakon burauzar mai amfani. Wannan yana taimakawa rage lokacin ɗaukar nauyin shafi na farko kuma yana haɓaka ƙwarewar mai amfani, musamman don shafukan da ke da abun ciki mai ƙarfi.

Anan ga misalin amfani da SSR a cikin Next.js:

// pages/index.js  
import React from 'react';  
  
function HomePage({ data }) {  
  return( 
    <div>  
      <h1>{data.title}</h1>  
      <p>{data.content}</p>  
    </div>  
 );  
}  
  
export async function getServerSideProps() {  
  const response = await fetch('https://api.example.com/data');  
  const data = await response.json();  
  
  return {  
    props: {  
      data,  
    },  
  };  
}  
  
export default HomePage;

A cikin misalin da ke sama, muna amfani getServerSideProps da su nemo bayanai daga API akan kowace buƙata. Wannan yana tabbatar da cewa shafin koyaushe yana ba da sabon abun ciki.

Inganta Hoto

Haɓaka hoto muhimmin al'amari ne na haɓaka aikin Next.js aikace-aikacen ku. Kuna iya amfani da kayan aikin daban-daban don damfara da sake girman hotuna yayin da kuke kiyaye inganci mai kyau.

Misali, zaku iya amfani da ginannen next/image ɗakin karatu a ciki Next.js don ƙirƙirar hotuna a tsarin WebP da samar da girman hoto daban-daban don dacewa da na'urori daban-daban.

Ana tura Next.js Application

Da zarar an inganta aikace-aikacen ku, zaku iya ci gaba da tura shi zuwa dandamali daban-daban.

Vercel

Vercel dandamali ne na tura girgije don JavaScript da Next.js aikace-aikace. Anan ga mahimman matakai don tura Next.js aikace-aikacenku zuwa Vercel:

  1. Yi rajista ko shiga cikin asusunku Vercel.

  2. Haɗa ma'ajiyar ku zuwa Vercel.

  3. Saita saitunan tura aiki kamar yanki, masu canjin yanayi, da izinin shiga.

  4. Lokacin da kuka tura lamba zuwa ma'ajiyar, Vercel zai tura aikace-aikacenku ta atomatik kuma ya samar da URL don samun dama.

Netlify

Netlify yana ba da sabis na turawa na tushen Git. Anan ga mahimman matakai don tura Next.js aikace-aikacenku zuwa Netlify:

  1. Yi rajista ko shiga cikin asusunku Netlify.

  2. Haɗa ma'ajiyar ku zuwa Netlify.

  3. Sanya saitunan turawa kamar yanki, masu canjin yanayi, da gina umarni.

  4. Lokacin da kuka tura lamba zuwa ma'ajiyar, Netlify zai tura aikace-aikacenku ta atomatik kuma ya samar da URL don samun dama.

Kai Hosting

Idan kuna son samun cikakken iko akan tsarin turawa, zaku iya ɗaukar nauyin Next.js aikace-aikacenku akan sabar ku. Wannan yana buƙatar sanin saitin uwar garken da daidaitawa.

Kammalawa

Wannan sashe ya jagorance ku ta hanyar inganta Next.js ayyukan aikace-aikacenku ta amfani da SSR da inganta hoto. Hakanan kun koyi yadda ake tura Next.js aikace-aikacenku zuwa dandamali daban-daban kamar Vercel, Netlify, ko uwar garken ku. Waɗannan matakan za su ba ku ƙarfi don samun ingantaccen aikace-aikacen aikace-aikacen da tsarin turawa mara kyau.