Оптимизация на производителността в Next.js

Next.js 14/15 - важни бележки преди да започнем

• Минималната версия на Node.js е вече 18.17
• Командата next export е заменена с output: 'export' в next.config.js
• Пакетът @next/font е премахнат - използвай вградения next/font
• API-та като cookies, headers и draftMode са вече async в Next.js 15 (изисква await)
• fetch заявките вече не се кешират по подразбиране - използвай cache: 'force-cache' ако ти трябва кеширане
• Някои конфигурационни опции са променени (experimental-edge → edge)
• Ако използваш TypeScript, обнови @types/react и @types/react-dom

Изграждането на бързи уеб приложения е от ключово значение. Next.js предоставя много вградени функции за производителност, но разработчиците все пак трябва да ги използват разумно. В това ръководство ще разгледаме практически техники за ускоряване на Next.js приложения - оптимизация на изображения, code splitting, lazy loading, статично генериране, оптимизирано зареждане на шрифтове и намаляване на размера на JavaScript bundle-а.

Оптимизация на изображения

Големите или неоптимизирани изображения са един от най-честите проблеми с производителността. Вграденият компонент <Image> на Next.js помага да ги оптимизираш автоматично. Той сервира изображения в правилния размер, в модерни формати (WebP/AVIF) и включва lazy loading по подразбиране.

import Image from "next/image";

export default function Hero() {
  return (
    <div>
      <Image
        src="/images/hero.jpg"
        alt="Hero banner"
        width={1200}
        height={600}
        priority
      />
      <p>Добре дошли в сайта!</p>
    </div>
  );
}

Какво прави <Image> компонентът

• Responsive изображения - автоматично сервира размера, подходящ за устройството на потребителя
• Lazy loading - изображенията се зареждат само когато влязат във viewport-а, което ускорява началното зареждане
• Blur placeholder - добавя blur ефект докато изображението се зарежда чрез placeholder="blur"
• Custom loader - за напреднали случаи можеш да дефинираш собствена функция за зареждане

<Image
  src="/images/hero.jpg"
  alt="Hero banner"
  layout="responsive"
  width={1200}
  height={600}
  priority
/>

Code Splitting и Lazy Loading

Code splitting е техника за разделяне на кода на по-малки bundle-и, които се зареждат при нужда. Next.js прави това автоматично за страниците, но можеш и ръчно да разделяш компоненти.

Dynamic Imports

Използвай dynamic imports за да зареждаш компоненти само когато са необходими:

import dynamic from "next/dynamic";

const DynamicComponent = dynamic(() => import("../components/HeavyComponent"));

export default function Page() {
  return <DynamicComponent />;
}

Route-Based Code Splitting

Next.js автоматично разделя кода на ниво страница - всяка страница зарежда само JavaScript-а, от който се нуждае. Можеш да оптимизираш допълнително чрез dynamic imports за компоненти, които не са нужни веднага.

Статично генериране

Статичното генериране е предпочитаният начин за генериране на страници в Next.js. Страниците се пре-рендират по време на build-а и се сервират като статични файлове - идеално за производителност и SEO.

getStaticProps

Използвай getStaticProps за да извличаш данни по време на build-а:

export async function getStaticProps() {
  const res = await fetch("https://api.example.com/data");
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

Incremental Static Regeneration (ISR)

Next.js 12 въведе ISR, което ти позволява да обновяваш статично съдържание след като сайтът е built. Използвай свойството revalidate в getStaticProps:

export async function getStaticProps() {
  const res = await fetch("https://api.example.com/data");
  const data = await res.json();

  return {
    props: {
      data,
    },
    revalidate: 10, // Регенерира страницата максимум веднъж на 10 секунди
  };
}

Оптимизирано зареждане на шрифтове

Шрифтовете могат да бъдат значителна част от размера на bundle-а и да влияят на производителността. Next.js 13 въведе пакета next/font за оптимизирано зареждане на шрифтове.

Използване на next/font

Импортирай шрифтове от next/font вместо да използваш традиционни CSS @font-face правила:

import { Roboto } from "next/font/google";

const roboto = Roboto({
  subsets: ["latin"],
  weight: "400",
});

export default function Page() {
  return (
    <div className={roboto.className}>
      <h1>Здравей, свят!</h1>
    </div>
  );
}

Предимства на next/font

• Автоматично subsetting - зареждат се само символите, използвани на страницата
• Variable fonts — поддръжка за variable fonts, което намалява броя на нужните файлове
• Оптимизирано зареждане - шрифтовете се зареждат по начин, който не блокира рендирането

Намаляване на размера на JavaScript bundle-а

По-малкият JavaScript bundle означава по-бързо зареждане. Ето няколко стратегии:

• Анализирай bundle-а си - използвай @next/bundle-analyzer за да видиш какво е в JavaScript bundle-а ти
• Премахни неизползвани зависимости - редовно одитирай пакетите и премахвай тези, които не се използват
• Използвай по-леки алтернативи - например date-fns вместо moment.js за работа с дати
• Оптимизирай lodash imports - вместо целия lodash, импортирай само функциите, от които се нуждаеш

Bundle Analyzer - стъпка по стъпка

Инсталирай:

npm install @next/bundle-analyzer

Обнови next.config.js:

const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true",
});
module.exports = withBundleAnalyzer({});

Стартирай анализа:

ANALYZE=true next build

Извод

Оптимизацията на производителността е от ключово значение за бързо и приятно потребителско изживяване. Next.js предлага мощни функции, които помагат на разработчиците да оптимизират приложенията си ефективно. Чрез оптимизация на изображения, code splitting, статично генериране, оптимизирано зареждане на шрифтове и внимателно управление на bundle размера можеш значително да подобриш производителността на Next.js приложенията си.

Следи последните версии на Next.js и актуалните добри практики — framework-ът се развива бързо.