close

Optimizavimas ir diegimas Next.js: našumo didinimas

Našumo optimizavimas ir efektyvus programų diegimas yra esminiai programos kūrimo proceso žingsniai Next.js. Šis straipsnis padės jums optimizuoti programos našumą naudojant Server-Side Rendering(SSR) ir vaizdo optimizavimą. Taip pat sužinosite, kaip įdiegti Next.js programą įvairiose platformose, pvz. Vercel, Netlify, , arba savo serveryje.

Našumo optimizavimas naudojant Server-Side Rendering(SSR)

Server-Side Rendering(SSR) yra labai svarbus būdas pagerinti jūsų programos našumą Next.js. Kai naudojate SSR, jūsų puslapiai iš anksto pateikiami ir teikiami iš serverio, o ne iš vartotojo naršyklės. Tai padeda sumažinti pradinį puslapio įkėlimo laiką ir pagerinti naudotojo patirtį, ypač puslapiuose su dinaminiu turiniu.

Štai iliustruojantis SSR naudojimo pavyzdys 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;

Anksčiau pateiktame pavyzdyje mes naudojame getServerSideProps duomenis iš API gauti pagal kiekvieną užklausą. Taip užtikrinama, kad puslapyje visada bus pateikiamas naujausias turinys.

Vaizdo optimizavimas

Vaizdo optimizavimas yra esminis aspektas siekiant pagerinti jūsų programos našumą Next.js. Galite naudoti įvairius įrankius vaizdams suspausti ir keisti jų dydį, išlaikant gerą kokybę.

Pavyzdžiui, galite naudoti integruotą next/image biblioteką, kad Next.js sukurtumėte vaizdus WebP formatu ir generuotumėte skirtingus vaizdo dydžius, kad tiktų įvairiems įrenginiams.

Next.js Programos diegimas

Kai jūsų programa bus optimizuota, galėsite diegti ją įvairiose platformose.

Vercel

Vercel yra „JavaScript“ ir taikomųjų programų debesų diegimo platforma Next.js. Štai pagrindiniai veiksmai, kaip įdiegti Next.js programą Vercel:

  1. Prisiregistruokite arba prisijunkite prie savo Vercel paskyros.

  2. Susiekite savo saugyklą su Vercel.

  3. Konfigūruokite diegimo nustatymus, pvz., domeną, aplinkos kintamuosius ir prieigos teises.

  4. Kai nusiunčiate kodą į saugyklą, Vercel programa bus automatiškai įdiegta ir bus pateiktas prieigos URL.

Netlify

Netlify siūlo Git pagrindu sukurtas diegimo paslaugas. Štai pagrindiniai veiksmai, kaip įdiegti Next.js programą Netlify:

  1. Prisiregistruokite arba prisijunkite prie savo Netlify paskyros.

  2. Susiekite savo saugyklą su Netlify.

  3. Konfigūruokite diegimo parametrus, pvz., domeną, aplinkos kintamuosius ir kūrimo komandas.

  4. Kai nusiunčiate kodą į saugyklą, Netlify programa bus automatiškai įdiegta ir bus pateiktas prieigos URL.

Savarankiškas priegloba

Jei norite visiškai kontroliuoti diegimo procesą, galite savarankiškai priglobti Next.js programą savo serveryje. Tam reikia žinių apie serverio sąranką ir konfigūraciją.

Išvada

Šiame skyriuje paaiškinta, kaip optimizuoti Next.js programos našumą naudojant SSR ir vaizdo optimizavimą. Taip pat sužinojote, kaip įdiegti Next.js programą įvairiose platformose, pvz Vercel., Netlify, arba savo serveryje. Šie veiksmai suteiks jums galimybę turėti aukštos kokybės taikomąją programą ir sklandų diegimo procesą.