close

Optimalizálás és bevezetés itt Next.js: A teljesítmény fokozása

A teljesítmény optimalizálása és az alkalmazások hatékony telepítése kulcsfontosságú lépések az alkalmazások fejlesztési folyamatában Next.js. Ez a cikk végigvezeti Önt az alkalmazás teljesítményének Server-Side Rendering(SSR) és képoptimalizálás segítségével történő optimalizálásán. Azt is megtudhatja, hogyan telepítheti Next.js alkalmazását különböző platformokra, például Vercel, Netlify, vagy saját szerverére.

A teljesítmény optimalizálása Server-Side Rendering(SSR)

Server-Side Rendering(SSR) egy kritikus technika az alkalmazás teljesítményének javításához Next.js. Az SSR használatakor az oldalak előre megjelennek, és nem a felhasználó böngészőjéből, hanem a szerverről jelennek meg. Ez segít csökkenteni az oldal kezdeti betöltési idejét, és javítja a felhasználói élményt, különösen a dinamikus tartalmú oldalak esetében.

Íme egy szemléltető példa az SSR használatára itt 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 fenti példában getServerSideProps minden kérésnél adatokat kérünk le egy API-ból. Ez biztosítja, hogy az oldal mindig a legfrissebb tartalmat jelenítse meg.

Képoptimalizálás

A képoptimalizálás kulcsfontosságú szempont az Next.js alkalmazás teljesítményének javításában. Különféle eszközöket használhat a képek tömörítésére és átméretezésére, miközben megőrzi a jó minőséget.

Használhatja például a beépített next/image könyvtárat Next.js WebP formátumú képek létrehozására, és különféle képméretek generálására, hogy illeszkedjenek a különböző eszközökhöz.

Next.js Alkalmazás telepítése

Az alkalmazás optimalizálása után folytathatja a különböző platformokon történő üzembe helyezését.

Vercel

Vercel egy felhőalapú telepítési platform a JavaScript és Next.js az alkalmazások számára. Íme az Next.js alkalmazás telepítésének alapvető lépései Vercel:

  1. Regisztráljon vagy jelentkezzen be fiókjába Vercel.

  2. Kapcsolja össze az adattárat a következővel Vercel: .

  3. Konfigurálja a telepítési beállításokat, például a tartományt, a környezeti változókat és a hozzáférési engedélyeket.

  4. Amikor kódot küld a lerakatba, Vercel az automatikusan telepíti az alkalmazást, és megadja a hozzáféréshez szükséges URL-t.

Netlify

Netlify Git-alapú telepítési szolgáltatásokat kínál. Íme az Next.js alkalmazás telepítésének alapvető lépései Netlify:

  1. Regisztráljon vagy jelentkezzen be fiókjába Netlify.

  2. Kapcsolja össze az adattárat a következővel Netlify: .

  3. Konfigurálja a telepítési beállításokat, például a tartományt, a környezeti változókat és az összeállítási parancsokat.

  4. Amikor kódot küld a lerakatba, Netlify az automatikusan telepíti az alkalmazást, és megadja a hozzáféréshez szükséges URL-t.

Self-Hosting

Next.js Ha teljes irányítást kíván szerezni a telepítési folyamat felett, saját szerverén tárolhatja alkalmazását. Ehhez ismerni kell a szerver beállítását és konfigurációját.

Következtetés

Ez a rész végigvezeti Önt Next.js az alkalmazás teljesítményének SSR és képoptimalizálás segítségével történő optimalizálásán. Azt is megtanulta, hogyan telepítheti Next.js alkalmazását különféle platformokra, például Vercel, Netlify, vagy saját szerverére. Ezek a lépések lehetővé teszik, hogy kiváló minőségű alkalmazást és zökkenőmentes telepítési folyamatot kapjon.