React-Framework Next.js reached Version 9.5: The inside

Популярний React Framework від домашнього Vercel досяг версії 9.5. Нова версія покращує продуктивність, це також SEO-вдосконалення та підтримка Webpack 5.

Next.js з 2016 року. Фреймворк дозволяє вам створювати реалізовані додатки React на стороні сервера та команди від Netflix, Hulu, Tiktok і, наприклад, у розробниках на рівні t3n.

Поступова статична регенерація

З новою версією функції під назвою «Інкрементальна статична регенерація» залишає бета-фазу. Основний механізм заснований на оновленні попередньо заряджених сторінок, які відображаються у разі трафіку у фоновому режимі знову. Методи статичного створення веб-сайтів були представлені у версії 9.3, метою яких є перевага статичного генерації веб-сайтів – це підтримка світового класу для динамічних даних для возз’єднання для відомого фреймворку.

Про fallback: trueОпцію в getStaticPathsможна зареєструвати на нових статичних Сторінках вже зараз протягом терміну. Для Next.js ви можете зробити необмежену кількість сторінок на замовлення заздалегідь, розмір набору даних не повинен грати жодної ролі. Натхненний режимом state-while-revalidate забезпечує повторний рендеринг, щоб забезпечити безперебійне обслуговування вхідних даних, а нещодавно відтворена Сторінка буде переміщена лише тоді, коли вона буде згенерована. Крім того, доступний також режим попереднього перегляду з версією 9.5 – обидві функції тепер доступні next startяк з платформи Vercel-Edge

Нова опція конфігурації basePath

Проекти Next.js розміщуються не обов’язково, з кореня домену. Хто такий проект шляху, такий як, наприклад, /docsхоче розмістити, повинен був зробити досить багато додаткової роботи з конфігурації. Ця проблема болю розглядається у версії 9.5, новій опції конфігурації, basePathяка має спростити процес.
Для того, щоб скористатися, ви просто повинні next.config.jsдодати:


// next.config.js

module.exports = {
basePath: ‘/ docs’
}

 

І ваш проект буде маршрутизований у послідовності вказаного шляху у наведеному вище прикладі, це буде /docs.

Якщо ваш через next/linkі next/routerна інших сторінках цього team project, і він автоматично пов’язаний із шляхом. Відповідно, це було б /aboutтоді /docs/about.

export default function HomePage() {
return (

<a> Про сторінку </a>

 

)
}

 

Наведений вище код am-Snippet вивів наступний HTML: <a href="https://t3n.de/docs/about">About Page</a>

Підтримка перезаписів, перенаправлення та заголовка

Новим параметром конфігурації для Next.js 9.5 є rewrites– ви дозволили це, шлях вхідного запиту до іншого цільового шляху переспрямування, включаючи зовнішню URL-адресу. Як корисна нова функція, особливо для команд, які хочуть інтегрувати фрагмент Next.js за частиною у ваші проекти.

Крім того, версія 9.5, новий redirectsключ для зміни структури маршрутизації – наприклад, в тому випадку, якщо /blogдля /newsпереміщення як. Щоб перевірити, чи встановлено переадресацію маршруту, ви стикалися з цим, сервер чи сторінка помилок, що може мати значні недоліки в ергономіці. Починаючи з версії 9.5, тепер ви можете перенаправляти-використовувати ключ, щоб отримати список переадресацій для переліку у вашому next.config.js.

Однією з переваг Next.js є те, що Framework дозволяє поєднувати статичні Сторінки з візуалізацією на стороні сервера. Візуалізація на стороні сервера дозволяє встановити заголовки http для вхідних шляхів запитів для статичних Сторінок, що раніше було неможливо. Ключ заголовка, ви можете почати з Властивості власного заголовка версії 9.5 у своєму next.config.jsвизначенні застосовуються всі маршрути next.js.


// next.config.js
module.exports = {
async headers() {
return [
{
source: '/:path*',
headers: [
{
key: 'Feature-Policy',
// Disable microphone and geolocation
value: "microphone 'none'; geolocation 'none'"
}
]
}
]
}
}

Контроль над кінцевими косими рисками

При першому запуску Next.js за замовчуванням було встановлено так званий кінцевий слеш /about/, повертається сторінка 404. Цю поведінку тепер адаптовано для розробників, команд, які мігрують існуючі проекти до next.js,. Новий параметр конфігурації називається trailingSlashу вашій next.config.jsна trueабо falseвстановити банку, ви можете контролювати це поведінка в майбутньому.

Подальші вдосконалення продуктивності та підтримка Webpack-5

З новим випуском наборів хеш-кодів JavaScript у майбутньому, через вміст, а не кеш Build-ID. Між сторінками розгортання, які не були змінені, тому не завантажуються повторно. Покращено у Версії 9.5, а також Швидке оновлення, оскільки у Версії 9.4 існує функція гарячого перезавантаження, яка тепер має нову, переглянутий документацію. Окрім того, Випуск приносить новий --profileпрапор, на який Ви реагуєте в майбутньому у Виробництві у своїх проектах Next.js, який Ви можете контролювати. Інші нові функції переглянули опції Catch-all-Routes та підтримку Webpack 5, яка наразі все ще перебуває у бета-фазі. Всі нові функції в Detail ви можете переглянути на Vercel-Blog у дописі в блозі.

Ready to see us in action:

More To Explore

IWanta.tech
Logo
Enable registration in settings - general
Have any project in mind?

Contact us:

small_c_popup.png