Читатели като вас помагат в подкрепа на MUO. Когато правите покупка чрез връзки на нашия сайт, ние може да спечелим комисионна за партньор. Прочетете още.

Next.js 13 въведе нова система за маршрутизиране, използвайки директорията на приложението. Next.js 12 вече предостави лесен начин за обработка на маршрути чрез базирани на файлове маршрути. Добавянето на компонент към папката със страници автоматично ще го превърне в маршрут. В тази нова версия рутерът, базиран на файловата система, идва с вградена настройка за оформления, вложено маршрутизиране на шаблони, потребителски интерфейс за зареждане, обработка на грешки и поддръжка за сървърни компоненти и стрийминг.

Тази статия обяснява тези нови функции и защо са важни.

Първи стъпки с Next.js 13

Създайте свой собствен проект Next.js 13, като изпълните следната команда в терминала.

npx създавам-следващия-app@най-новото следващо13 --experimental-app

Това трябва да създаде нова папка, наречена next13 с новата директория на приложението.

Разбиране на новата директория на приложения

instagram viewer

Next.js 12 използва страници директория за маршрутизиране, но тя е заменена с приложение/ директория в Next.js 13. The страници/ директорията все още работи в Next 13, за да позволи постепенно приемане. Трябва само да се уверите, че не създавате файлове в двете директории за един и същи маршрут, тъй като ще получите грешка.

Ето текущата структура на директорията с приложения.

В директорията на приложението използвате папки, за да дефинирате маршрути, а файловете в тези папки се използват за дефиниране на потребителския интерфейс. Има и специални файлове като:

  • page.tsx - Файлът, използван за създаване на потребителския интерфейс за определен маршрут.
  • оформление.tsx - Съдържа дефиницията на оформлението на маршрута и може да се споделя на множество страници. Те са идеални за навигационни менюта и странични ленти. При навигация оформленията запазват състоянието си и не се изобразяват повторно. Това означава, че когато навигирате между страници, които споделят оформление, състоянието остава същото. Едно нещо, което трябва да се отбележи, е, че трябва да има най-горно оформление (основното оформление), съдържащо всички HTML и основни тагове, споделени в цялото приложение.
  • template.tsx - Шаблоните са като оформления, но те не запазват състоянието и се изобразяват отново всеки път, когато се използват за създаване на страница. Шаблоните са идеални за ситуации, в които се нуждаете от определен код, който да се изпълнява всеки път, когато компонентът се монтира, например анимации за влизане и излизане.
  • error.tsx - Този файл се използва за обработка на грешки в приложението. Той обгръща маршрут с класа на границата на грешката на React, така че когато възникне грешка в този маршрут или неговите деца, той се опитва да се възстанови от нея, като рендира удобна за потребителя страница за грешка.
  • зареждане.tsx - Потребителският интерфейс за зареждане се зарежда моментално от сървъра, докато потребителският интерфейс на маршрута се зарежда във фонов режим. Потребителският интерфейс за зареждане може да бъде въртящ се или скелетен екран. След като съдържанието на маршрута се зареди, то замества потребителския интерфейс за зареждане.
  • not-found.tsx - Ненамереният файл се изобразява, когато Next.js срещне a 404 грешка за тази страница. В Next.js 12 ще трябва ръчно да създадете и настроите страница 404.
  • head.tsx - Този файл указва началния таг за сегмента от маршрута, в който е дефиниран.

Как да създадете маршрут в Next.js 13

Както споменахме по-горе, маршрутите се създават с помощта на папки в приложение/ указател. В тази папка трябва да създадете файл, наречен page.tsx който дефинира потребителския интерфейс на този конкретен маршрут.

Например, за да създадете маршрут с пътя /products, ще трябва да създадете приложение/продукти/страница.tsx файл.

За вложени маршрути като /products/sale, влагат папките една в друга, така че структурата на папките да изглежда така app/products/sale/page.tsx.

Освен нов начин за маршрутизиране, други интересни функции, поддържани от директорията на приложението, са сървърни компоненти и стрийминг.

Използване на сървърни компоненти в директорията на приложенията

Директорията на приложението използва сървърни компоненти по подразбиране. Този подход намалява количеството JavaScript, изпратено до браузъра, докато компонентът се изобразява на сървъра. Това подобрява производителността.

Вижте тази статия на различни методи за изобразяване в Next.js за по-задълбочено обяснение.

Сървърният компонент означава, че можете безопасно да получите достъп до тайните на средата, без те да бъдат разкривани от страна на клиента. Например, можете да използвате process.env.

Можете също така да взаимодействате директно с бекенда. Няма нужда от използване getServerSideProps или getStaticProps тъй като можете да използвате async/await в сървърния компонент за извличане на данни.

Помислете за тази асинхронна функция, която извлича данни от API.

асинхроненфункцияgetData() {
опитвам{
конст res = изчакайте извличане (' https://api.example.com/...');
връщане res.json();
 } улов(грешка) {
хвърлямновГрешка(„Не може да извлече данни“)
 }
}

Можете да го извикате директно на страница, както следва:

износпо подразбиранеасинхроненфункцияСтраница() {
конст данни = изчакайте getData();
връщане<див>див>;
}

Сървърните компоненти са чудесни за изобразяване на неинтерактивно съдържание. Ако трябва използвайте куки React, слушатели на събития или API само за браузър, използват клиентски компонент, като добавят директивата „използване на клиент“ в горната част на компонента преди всяко импортиране.

Постепенно поточно предаване на компоненти в директорията на приложенията

Поточното предаване се отнася до изпращане на части от потребителския интерфейс към клиента постепенно, докато всички компоненти бъдат изобразени. Това позволява на потребителя да разглежда част от съдържанието, докато останалата част се изобразява. За да предоставите на потребителите по-добро изживяване, изобразете компонент за зареждане като въртящ се бутон, докато сървърът завърши изобразяването на съдържанието. Правите това по два начина:

  • Създаване на a зареждане.tsx файл, който ще бъде изобразен за целия сегмент от маршрута. 
износпо подразбиранефункцияЗареждане() {
връщане<стр>Зареждане...стр>
}
  • Обвиване на отделни компоненти с граница на React Suspense и указване на резервен потребителски интерфейс. 
импортиране {Напрежение} от"реагира";
импортиране { Продукти } от"./Компоненти";
износпо подразбиранефункцияРазпродажба() {
връщане (
<раздел>
Продукти...
}>
<Продукти />
Съспенс>
раздел>
 );
}

Преди компонентът „Продукти“ да бъде изобразен, потребителят ще види „Продукти…“. Това е по-добре от празен екран по отношение на потребителското изживяване.

Надграждане до Next.js 13

Новата директория с приложения определено е подобрение от предишната директория със страници. Той включва специални файлове като оформление, глава, шаблон, грешка, не е намерено и зареждане, които обработват различни състояния при рендиране на маршрут, без да е необходима ръчна настройка.

Освен това директорията на приложенията също поддържа стрийминг и сървърни компоненти, което води до подобрена производителност. Въпреки че тези функции са чудесни както за потребители, така и за разработчици, повечето от тях в момента са в бета версия.

Все пак можете да надстроите до Next.js 13, тъй като директорията на страницата все още работи, след което започнете да използвате директорията на приложението със собствено темпо.