Създаване на скриптове, зареждане на външен JavaScript, пренасочвания и др.
Next.js се развива. С течение на времето той получава все по-готини функции.
Ето 5 трика, които може би още не сте знаели.
1. Стартиране на скриптове в процеса на изграждане или разработка
Този скрипт ще е необходим само когато стартираме npm run build, така че когато започнем процеса на изграждане. Скриптът няма да се изисква и изпълнява, когато сме в режим на разработка. За да бъде този пример пълен, така че да можете да го изпробвате, ето простия generateSitemap.js, който използвах за тестване на това:
Разбира се, можете също да обърнете логиката в next.config.js и да изпълните определен скрипт само в режим на разработка. Всичко зависи от вас.
2. Посочете как да се зареждат външни скриптове
Признайте си, всички ние се опитвахме да използваме <script>tag в React преди.
Next.js го прави възможно сега, тъй като предлага специален компонент за него.
Не само можем да го използваме, за да включим външни скриптове — но можем също да посочим как да се зареждат.
Ние правим това, като предоставяме стратегия за зареждане, като тази:
В този пример скриптът на Google Анализ ще се зареди още преди страницата да е интерактивна. В раздела мрежа можете да го видите ясно:
Друга стратегия е да го заредите, когато всичко останало е готово - тази стратегия се използва за маловажни скриптове в страницата. Когато зададете компонента на скрипта за Google Анализ на strategy='lazyOnload', разделът мрежа ще изглежда така:
Да, скриптът за анализ се зарежда в края.
3. Пренасочване на URL
Този е доста ясен. Когато осъществявате достъп до URL на вашия Next.js сървър, можете да го пренасочите, ако желаете. Това работи както за вътрешни, така и за външни пренасочвания.
В примера можете да видите външно пренасочване.
4. Споделяне на компонентни атрибути
Знам, че има много начини за споделяне на данни между компонентите в React. Ето още един. Както може би знаете, можем да използваме файла _app.js, за да обвием всички страници, които искаме да визуализираме. Например, това може да се използва за инжектиране на глобален CSS.
В рамките на този специален файл можем също така да имаме достъп до данни, подобни на подпори, които можем да посочим във всеки компонент. Ето един пример.
По този начин дефинирахме заглавие изключително за тази страница. В рамките на _app.js вече можем да имаме достъп до тези споделени данни и да ги използваме както искаме:
При отваряне на индексната страница на http://localhost:3000/ (по подразбиране) ще видим следния изход:
5. Основна жизненоважна информация за мрежата
Уеб показателите са колекция от показатели за ефективност на уебсайтове от Google. Ако сте използвали Lighthouse преди, вече знаете малко за него.
Но вместо да изпълняваме ръчно бенчмарк на Lighthouse, можем да отчетем жизнените си резултати в мрежата директно в компонент Next.js. Ето как работи основно, използвайки го в _app.js:
export function reportWebVitals(metric) {
console.log(metric)
}
export default function App({ Component, pageProps }) {
return <Component {…pageProps} />
}
Това ще ви даде обект на уеб показатели, съдържащ много информация в конзолата. За да посочите с кой показател искате да работите, можете да използвате:
export function reportWebVitals(metric) {
switch (metric.name) {
case 'FCP':
console.log(metric)
}
}
В този пример използваме FCP, което означава First Contentful Paint.
Благодаря ви, че прочетохте!
Повече за Next.js:
Повече съдържание в plainenglish.io
