Пошук уроків, статей та іншого контенту
Ознайомитеся з компонентом next/script і способами безпечно додавати сторонні скрипти до застосунку.
next/scriptnext/script — це компонент Next.js для підключення сторонніх JavaScript-скриптів. Він допомагає:
визначити, коли саме завантажувати скрипт;
не блокувати завантаження сторінки без потреби;
виконати код після успішного завантаження;
обробити помилку завантаження.
Компонент імпортується з next/script:
import Script from 'next/script'Зазвичай сторонні скрипти потрібні для:
аналітики;
платіжних сервісів;
віджетів підтримки;
карт;
рекламних платформ.
Важливо: next/script керує завантаженням скрипта, але не робить сторонній код автоматично безпечним. Підключайте лише відомі джерела, використовуйте HTTPS і перевіряйте політику конфіденційності сервісу.
import Script from 'next/script'
export default function Page() {
return (
<main>
<h1>Головна сторінка</h1>
<Script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js" />
</main>
)
}Якщо strategy не вказано, використовується стратегія afterInteractive.
У прикладі сторонній скрипт завантажується після того, як сторінка стає інтерактивною. Це не блокує початкове відображення інтерфейсу.
Компонент Script має властивість strategy. Вона визначає момент завантаження скрипта.
afterInteractiveЦе стратегія за замовчуванням.
Скрипт завантажується після того, як сторінка стає інтерактивною. Вона підходить для більшості сторонніх скриптів:
аналітики;
чатів;
віджетів;
сервісів, які не потрібні для першого відображення сторінки.
<Script
src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"
strategy="afterInteractive"
/>lazyOnloadСкрипт завантажується після повного завантаження сторінки, коли браузер має вільні ресурси.
Цю стратегію варто використовувати для низькопріоритетних скриптів, які не потрібні одразу:
<Script
src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"
strategy="lazyOnload"
/>Наприклад, це може бути додатковий маркетинговий віджет, який не впливає на основну функціональність сторінки.
beforeInteractiveСкрипт завантажується до того, як Next.js завершить гідрацію сторінки.
Ця стратегія призначена лише для скриптів, які справді потрібні ще до взаємодії користувача зі сторінкою. Використовуйте її обережно, оскільки такі скрипти можуть впливати на початкове завантаження.
В App Router скрипти з цією стратегією потрібно розміщувати в кореневому app/layout.jsx або app/layout.tsx:
import Script from 'next/script'
export default function RootLayout({ children }) {
return (
<html lang="uk">
<body>
{children}
<Script
src="https://cdn.example.com/important-script.js"
strategy="beforeInteractive"
/>
</body>
</html>
)
}Не використовуйте beforeInteractive лише тому, що скрипт має завантажитися «швидше». Для більшості сторонніх сервісів достатньо afterInteractive.
Для стороннього скрипта можна вказати обробники подій:
onLoad — скрипт успішно завантажився;
onError — під час завантаження сталася помилка;
onReady — скрипт завантажений і готовий до використання.
Обробники подій потрібно використовувати в клієнтському компоненті. В App Router для цього додають директиву 'use client'.
onLoadНижче наведено приклад сторінки, яка завантажує бібліотеку Day.js і показує поточну дату після її завантаження.
'use client'
import { useState } from 'react'
import Script from 'next/script'
export default function Page() {
const [isReady, setIsReady] = useState(false)
const [hasError, setHasError] = useState(false)
function handleLoad() {
setIsReady(true)
}
function handleError() {
setHasError(true)
}
return (
<main>
<h1>Сторонній скрипт</h1>
<Script
src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"
strategy="afterInteractive"
onLoad={handleLoad}
onError={handleError}
/>
{hasError && <p>Не вдалося завантажити бібліотеку.</p>}
{!isReady && !hasError && <p>Завантаження...</p>}
{isReady && (
<p>
Поточна дата: {window.dayjs().format('DD.MM.YYYY')}
</p>
)}
</main>
)
}У цьому прикладі:
Script завантажує зовнішню бібліотеку.
onLoad змінює стан після успішного завантаження.
onError показує повідомлення про помилку.
window.dayjs використовується лише після того, як бібліотека стала доступною.
Зверніть увагу: стороння бібліотека може додати об’єкт до window, але це залежить від конкретної бібліотеки. Перед використанням потрібно перевірити її документацію.
next/script можна використовувати не лише з src, а й для невеликого вбудованого скрипта:
import Script from 'next/script'
export default function Page() {
return (
<main>
<h1>Сторінка</h1>
<Script id="page-settings" strategy="afterInteractive">
{`
window.pageSettings = {
language: 'uk'
};
`}
</Script>
</main>
)
}Для вбудованого скрипта потрібно вказати унікальний id.
Не вставляйте в такий скрипт дані, отримані від користувача, без належної перевірки. Наприклад, не можна безпечно додавати довільний текст користувача безпосередньо всередину JavaScript-коду.
Скрипт можна розмістити:
у конкретній сторінці — якщо він потрібен лише на цій сторінці;
у спільному layout — якщо він потрібен для всього розділу або застосунку;
у кореневому layout — якщо він має бути доступним на всіх сторінках.
Наприклад, скрипт у app/layout.jsx буде доступним у всьому застосунку:
import Script from 'next/script'
export default function RootLayout({ children }) {
return (
<html lang="uk">
<body>
{children}
<Script
src="https://cdn.example.com/analytics.js"
strategy="afterInteractive"
/>
</body>
</html>
)
}Якщо скрипт потрібен лише для однієї сторінки, краще не додавати його до глобального layout. Це зменшує кількість непотрібного коду для інших сторінок.
Під час роботи зі сторонніми скриптами дотримуйтеся таких правил:
Використовуйте лише джерела, яким довіряєте.
Використовуйте URL із https://.
Не передавайте секретні ключі та паролі в JavaScript-код браузера.
Не вставляйте дані користувача у вбудований скрипт без перевірки.
Завантажуйте скрипт лише там, де він потрібен.
Враховуйте згоду користувача, якщо сервіс збирає персональні дані або використовує cookies.
Обробляйте помилки завантаження, якщо без скрипта частина інтерфейсу не працює.
next/script допомагає оптимізувати момент завантаження, але не перевіряє вміст стороннього JavaScript-коду. Підключений скрипт виконується у браузері з такими самими можливостями, як і код вашого застосунку.
scriptТакий варіант працює, але Next.js не отримує інформації про пріоритет і момент завантаження скрипта:
<script src="https://cdn.example.com/widget.js"></script>Для сторонніх скриптів у Next.js зазвичай краще використовувати next/script:
import Script from 'next/script'
<Script
src="https://cdn.example.com/widget.js"
strategy="afterInteractive"
/>beforeInteractivebeforeInteractive не є універсальним способом прискорити завантаження. Якщо скрипт не потрібен до початку взаємодії з користувачем, використовуйте afterInteractive або lazyOnload.
Цей код може виконатися раніше, ніж стороння бібліотека стане доступною:
const formattedDate = window.dayjs().format('DD.MM.YYYY')Спочатку потрібно дочекатися onLoad, а вже потім використовувати глобальний об’єкт бібліотеки.
Обробники onLoad, onError та подібні клієнтські події не можна напряму використовувати в серверному компоненті App Router. Компонент із такими обробниками має бути клієнтським і містити:
'use client'Не підключайте скрипти з невідомих доменів або випадкових CDN. Навіть невеликий сторонній скрипт може читати дані сторінки, змінювати інтерфейс або надсилати інформацію на зовнішній сервер.
next/script призначений для підключення сторонніх JavaScript-скриптів у Next.js.
Скрипт можна підключити через src або вставити як вбудований код.
afterInteractive — стандартний вибір для більшості сторонніх скриптів.
lazyOnload підходить для низькопріоритетних скриптів.
beforeInteractive потрібно використовувати лише для критично важливих скриптів.
onLoad і onError допомагають реагувати на результат завантаження.
Усі сторонні скрипти потрібно підключати обережно: next/script оптимізує завантаження, але не гарантує безпеку самого стороннього коду.