Next.js 13

Vercel, компанията зад популярната рамка на React Next.js, пусна най-новата версия на рамката на 25 октомври 2022 г. Тази нова версия, Next.js 13, включва актуализации и подобрения на функции като оформление, извличане на данни и маршрутизиране , както и по-бърз пакет. Тези промени имат за цел да улеснят разработчиците да създават бързи, мащабируеми и надеждни уеб приложения с помощта на React.

Една нова функция в Next.js 13 е въвеждането на сегменти от маршрути, което позволява на разработчиците да създават вложени маршрути чрез поставяне на страници в папки в директорията на приложението. Когато създават маршрути в тези папки, разработчиците могат да използват page.jsx вместо index.jsx.

В предишните версии на Next.js от разработчиците се изискваше да създадат папка за оформление, за да споделят потребителски интерфейс между множество страници. С пускането на Next.js 13 обаче това вече не е необходимо, тъй като оформлението вече е включено по подразбиране при създаване на нов проект. Оформлението в Next.js 13 е интерактивно и не се нуждае от повторно изобразяване, което улеснява работата на разработчиците.

В допълнение към включването на оформлението по подразбиране, Next.js 13 въвежда и опростявания на API за извличане на данни. Старите API getServerSideProps, getStaticProps и getInitialProps вече не се поддържат и са заменени с нов API, който е проектиран да бъде по-лесен за използване .

Подобно на „getServerSideProps“

Когато заявката за изпращане използва getServerSideProps., трябва да се кешира „no-store“.

fetch(URL, { cache: 'no-store' });

Подобно на ‘getStaticProps’

Когато заявката за изпращане използва getServerSideProps, трябва да се кешира „force-cache“.

fetch(URL, { cache: 'force-cache' });

Подобно на „getStaticProps с опция за повторно валидиране“

Когато се кешира с живот от секунди

fetch(URL, { next: { revalidate: 30 } });

Турбопакет (алфа)

Turbopack е по-бърз пакет в сравнение с Webpack, Vite. Освен това Turbopack използва интелигентни техники за кеширане, за да подобри обработката на промените в източника по оптимизиран начин. Turbopack притежава модел на промените, които вече са изградени, и изгражда само тези въз основа на текущи промени. Можете да изпробвате Turbopack, ако стартирате „next dev — — turbo’.

Turbopack води до:

700 пъти по-бързи актуализации от Webpack

10 пъти по-бързи актуализации от Vite

4 пъти по-бърз студен старт от Webpack

„използване на клиент“

Компонентите могат автоматично да бъдат рендирани като сървърни компоненти и ако искаме да използваме клиентски куки ‘useState’ и ‘useEffect’, е необходимо да напишем ‘use client’ в началото на файла.

'use client';

import { useState } from 'react';

export default function Navbar() {
  const [title, setTitle] = useState('React');

  return (
    <div>
      <p>{title}</p>
    </div>
  );
}

следваща/връзка

В предишните версии на Next.js, ‹a› трябваше да бъде вложено в ‹Link›, за да изобрази правилно връзка. Въпреки това, с пускането на Next.js 13,‹Link› сега винаги изобразява ‹a› по подразбиране.

import Link from 'next/link'

// Next.js 12: 
<Link href="/checkout">
  <a>About</a>
</Link>

// Next.js 13
<Link href="/checkout">
  About
</Link>

следващо/изображение

В предишните версии на Next.js се изискваше да се посочи атрибутът „alt“ за изображението, за да се избегне грешка. Въпреки това, с пускането на Next.js 13, вече нямате нужда от атрибута „alt“.

import Image from 'next/image';
import logo from './logo.png';

function Navbar() {
  return <Image alt="logo" src={logo} />;
}

@следващ/шрифт

Според новата система за шрифтове Next.js 13 можете да оптимизирате персонализираните си шрифтове и също така да използвате шрифтове на Google без никаква заявка от браузъра. Единственото нещо, което трябва да направите, е да инсталирате пакета @next/font. Можете да го използвате така:

import { Inter } from '@next/font/google';

const inter = Inter();

ресурси:

Благодарим Ви, Ще се видим в следващата статия!!

Можете да се свържете с мен тук,

LinkedIn:https://www.linkedin.com/in/cerensolpan/

GitHub:https://github.com/cerensolpan

Twitter: https://twitter.com/cerensolpanture