Читаоци попут вас помажу у подршци МУО. Када обавите куповину користећи везе на нашем сајту, можда ћемо зарадити провизију за партнере. Опширније.

Нект.јс 13 увео је нови систем рутирања користећи директоријум апликације. Нект.јс 12 је већ обезбедио једноставан начин руковања рутама кроз руте засноване на фајловима. Додавање компоненте у фасциклу страница аутоматски би је учинило рутом. У овој новој верзији, рутер заснован на систему датотека долази са уграђеним подешавањем за распореде, угнежђено рутирање шаблона, кориснички интерфејс за учитавање, руковање грешкама и подршку за компоненте сервера и стримовање.

Овај чланак објашњава ове нове функције и зашто су важне.

Почетак рада са Нект.јс 13

Креирајте сопствени Нект.јс 13 пројекат тако што ћете покренути следећу команду у терминалу.

нпк Креирај-следећи-апп@најновија следећа13 --екпериментал-апп

Ово би требало да креира нову фасциклу под називом нект13 са новим директоријумом апликације.

Разумевање новог директоријума апликација

Нект.јс 12 је користио

instagram viewer
странице директоријум за рутирање, али је замењен са апликација/ директоријум у Нект.јс 13. Тхе странице/ директоријум и даље ради у Нект 13 да би омогућио постепено усвајање. Само треба да се уверите да не креирате датотеке у два директоријума за исту руту јер ћете добити грешку.

Ево тренутне структуре директоријума апликација.

У директоријуму апликације користите фасцикле за дефинисање рута, а датотеке унутар ових фасцикли се користе за дефинисање корисничког интерфејса. Постоје и посебне датотеке као што су:

  • паге.тск - Датотека која се користи за креирање корисничког интерфејса за одређену руту.
  • лаиоут.тск - Садржи дефиницију изгледа руте и може се делити на више страница. Савршени су за меније за навигацију и бочне траке. У навигацији, распореди чувају стање и не рендерују се поново. То значи да када се крећете између страница које деле изглед, стање остаје исто. Једна ствар коју треба напоменути је да мора постојати највиши изглед (основни изглед) који садржи све ХТМЛ и ознаке тела које се деле у целој апликацији.
  • темплате.тск - Шаблони су попут изгледа, али не чувају стање и поново се приказују сваки пут када се користе за креирање странице. Шаблони су савршени за ситуације у којима вам је потребан одређени код за покретање сваки пут када се компонента монтира, на пример, анимације за улазак и излаз.
  • еррор.тск - Ова датотека се користи за обраду грешака у апликацији. Обмотава руту са граничном класом грешке Реацт тако да када дође до грешке у тој рути или њеним потомцима, она покушава да се опорави од ње тако што ће приказати страницу са грешком прилагођену кориснику.
  • лоадинг.тск - УИ за учитавање се тренутно учитава са сервера док се кориснички интерфејс руте учитава у позадини. УИ за учитавање може бити спинер или скелет екран. Када се садржај руте учита, он замењује кориснички интерфејс за учитавање.
  • нот-фоунд.тск - Непронађена датотека се приказује када Нект.јс наиђе на а 404 грешка за ту страницу. У Нект.јс 12, морали бисте ручно да креирате и подесите 404 страницу.
  • хеад.тск - Ова датотека специфицира ознаку главе за сегмент руте у којем је дефинисан.

Како направити руту у Нект.јс 13

Као што је раније поменуто, руте се креирају помоћу фасцикли у апликација/ именик. Унутар ове фасцикле морате креирати датотеку под називом паге.тск који дефинише кориснички интерфејс те специфичне руте.

На пример, да креирате руту са путањом /products, мораћете да креирате апп/продуцтс/паге.тск фајл.

За угнежђене руте као што је /products/sale, угнезде фасцикле једну у другу тако да структура фасцикли изгледа апп/продуцтс/сале/паге.тск.

Поред новог начина рутирања, друге занимљиве функције које директоријум апликација подржава су компоненте сервера и стримовање.

Коришћење серверских компоненти у директоријуму апликација

Директоријум апликације подразумевано користи компоненте сервера. Овај приступ смањује количину ЈаваСцрипт-а који се шаље претраживачу док се компонента приказује на серверу. Ово побољшава перформансе.

Погледајте овај чланак на различите методе приказивања у Нект.јс за дубље објашњење.

Серверска компонента значи да можете безбедно да приступите тајнама окружења без да буду изложене на страни клијента. На пример, можете користити процес.енв.

Такође можете директно комуницирати са позадином. Нема потребе за коришћењем гетСерверСидеПропс или гетСтатицПропс као што можете користити асинц/аваит у компоненти сервера за преузимање података.

Размотрите ову асинхронизовану функцију која преузима податке из АПИ-ја.

асинцфункцијагетДата() {
покушати{
конст рес = чекати донеси (' https://api.example.com/...');
повратак рес.јсон();
 } улов(грешка) {
бацитиНоваГрешка(„Није могуће преузети податке“)
 }
}

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

извозУобичајеноасинцфункцијаСтрана() {
конст подаци = чекати гетДата();
повратак<див>див>;
}

Компоненте сервера су одличне за приказивање неинтерактивног садржаја. Ако треба користите Реацт куке, слушаоци догађаја или АПИ-ји само за прегледач, користе компоненту клијента додавањем директиве „усе цлиент“ на врх компоненте пре било каквог увоза.

Постепено стримовање компоненти у директоријуму апликација

Стреаминг се односи на слање делова корисничког интерфејса клијенту прогресивно док се све компоненте не рендерују. Ово омогућава кориснику да види део садржаја док се остатак рендерује. Да бисте корисницима пружили боље искуство, рендерујте компоненту за учитавање као спинер док сервер не заврши приказивање садржаја. То радите на два начина:

  • Креирање а лоадинг.тск фајл који ће бити приказан за цео сегмент руте. 
извозУобичајенофункцијаЛоадинг() {
повратак<стр>Учитавање...стр>
}
  • Омотавање појединачних компоненти са Реацт Суспенсе границом и навођење резервног корисничког интерфејса. 
увоз { Неизвесност } из"реаговати";
увоз { Производи } из"./Цомпонентс";
извозУобичајенофункцијаСале() {
повратак (
<одељак>
Производи...
}>
<Производи />
Неизвесност>
одељак>
 );
}

Пре него што се компонента Производи прикаже, корисник ће видети „Производи…“. Ово је боље од празног екрана у смислу корисничког искуства.

Надоградња на Нект.јс 13

Нови директоријум апликација је дефинитивно побољшање у односу на претходни директоријум страница. Укључује посебне датотеке као што су изглед, глава, шаблон, грешка, није пронађено и учитавање које обрађују различита стања приликом приказивања руте без потребе за ручно подешавањем.

Поред тога, директоријум апликација такође подржава стримовање и компоненте сервера што доводи до побољшаних перформанси. Иако су ове функције одличне и за кориснике и за програмере, већина њих је тренутно у бета верзији.

Међутим, и даље можете да надоградите на Нект.јс 13 пошто директоријум странице и даље ради, а затим почните да користите директоријум апликације сопственим темпом.