`, но его нужно указывать явно в других случаях.
+
+## Примеры
+
+### Адаптивность
+
+
+
+```jsx
+import Image from 'next/image'
+import mountains from '../public/mountains.jpg'
+
+export default function Responsive() {
+ return (
+
+
+
+ )
+}
+```
+
+### Заполнение контейнера
+
+
+
+```jsx
+import Image from 'next/image'
+import mountains from '../public/mountains.jpg'
+
+export default function Fill() {
+ return (
+
+
+
+
+ {/* И другие изображения в сетке... */}
+
+ )
+}
+```
+
+### Фоновое изображение
+
+
+
+```jsx
+import Image from 'next/image'
+import mountains from '../public/mountains.jpg'
+
+export default function Background() {
+ return (
+
+ )
+}
+```
+
+Другие примеры использования компонента Image с различными стилями можно найти в [демонстрации компонента Image](https://image-component.nextjs.gallery).
+
+## Другие свойства
+
+[**Все доступные свойства компонента `next/image`.**](/docs/app/api-reference/components/image)
+
+## Конфигурация
+
+Компонент `next/image` и API оптимизации изображений Next.js можно настроить в файле [`next.config.js`](/docs/app/api-reference/next-config-js). Эти настройки позволяют [разрешить удаленные изображения](/docs/app/api-reference/components/image#remotepatterns), [определить пользовательские брейкпоинты](/docs/app/api-reference/components/image#devicesizes), [изменить поведение кэширования](/docs/app/api-reference/components/image#caching-behavior) и многое другое.
+
+[**Подробнее о настройке изображений.**](/docs/app/api-reference/components/image#configuration-options)
\ No newline at end of file
diff --git a/apps/docs/content/ru/docs/13/02-app/01-building-your-application/06-optimizing/02-fonts.mdx b/apps/docs/content/ru/docs/13/02-app/01-building-your-application/06-optimizing/02-fonts.mdx
new file mode 100644
index 00000000..a3c023aa
--- /dev/null
+++ b/apps/docs/content/ru/docs/13/02-app/01-building-your-application/06-optimizing/02-fonts.mdx
@@ -0,0 +1,644 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:34:00.048Z
+title: Оптимизация шрифтов
+nav_title: Шрифты
+description: Оптимизируйте веб-шрифты вашего приложения с помощью встроенных загрузчиков `next/font`.
+related:
+ title: Справочник API
+ description: Узнайте больше об API next/font.
+ links:
+ - app/api-reference/components/font
+---
+
+{/* Содержание этого документа используется как в маршрутизаторе app, так и pages. Вы можете использовать компонент `
Content` для добавления контента, специфичного для маршрутизатора Pages. Общий контент не должен быть обёрнут в компонент. */}
+
+[**`next/font`**](/docs/app/api-reference/components/font) автоматически оптимизирует ваши шрифты (включая пользовательские) и исключает внешние сетевые запросы для улучшения конфиденциальности и производительности.
+
+> **🎥 Видео:** Узнайте больше об использовании `next/font` → [YouTube (6 минут)](https://www.youtube.com/watch?v=L8_98i_bMMA).
+
+`next/font` включает **встроенную автоматическую самозагрузку** для _любых_ файлов шрифтов. Это означает, что вы можете оптимально загружать веб-шрифты без сдвигов макета благодаря использованию свойства CSS `size-adjust`.
+
+Эта новая система шрифтов также позволяет удобно использовать все шрифты Google с учётом производительности и конфиденциальности. CSS и файлы шрифтов загружаются во время сборки и размещаются вместе с остальными статическими ресурсами. **Браузер не отправляет запросы к Google.**
+
+## Шрифты Google
+
+Автоматическая самозагрузка любых шрифтов Google. Шрифты включаются в развёртывание и обслуживаются с того же домена, что и ваше приложение. **Браузер не отправляет запросы к Google.**
+
+Начните с импорта нужного шрифта из `next/font/google` как функции. Рекомендуем использовать [вариативные шрифты](https://fonts.google.com/variablefonts) для лучшей производительности и гибкости.
+
+
+
+```tsx filename="app/layout.tsx" switcher
+import { Inter } from 'next/font/google'
+
+// Для вариативных шрифтов не нужно указывать вес
+const inter = Inter({
+ subsets: ['latin'],
+ display: 'swap',
+})
+
+export default function RootLayout({
+ children,
+}: {
+ children: React.ReactNode
+}) {
+ return (
+
+ {children}
+
+ )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+import { Inter } from 'next/font/google'
+
+// Для вариативных шрифтов не нужно указывать вес
+const inter = Inter({
+ subsets: ['latin'],
+ display: 'swap',
+})
+
+export default function RootLayout({ children }) {
+ return (
+
+ {children}
+
+ )
+}
+```
+
+Если вы не можете использовать вариативный шрифт, **необходимо указать вес**:
+
+```tsx filename="app/layout.tsx" switcher
+import { Roboto } from 'next/font/google'
+
+const roboto = Roboto({
+ weight: '400',
+ subsets: ['latin'],
+ display: 'swap',
+})
+
+export default function RootLayout({
+ children,
+}: {
+ children: React.ReactNode
+}) {
+ return (
+
+ {children}
+
+ )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+import { Roboto } from 'next/font/google'
+
+const roboto = Roboto({
+ weight: '400',
+ subsets: ['latin'],
+ display: 'swap',
+})
+
+export default function RootLayout({ children }) {
+ return (
+
+ {children}
+
+ )
+}
+```
+
+
+
+
+
+Чтобы использовать шрифт на всех страницах, добавьте его в файл [`_app.js`](/docs/pages/building-your-application/routing/custom-app) в директории `/pages`, как показано ниже:
+
+```jsx filename="pages/_app.js"
+import { Inter } from 'next/font/google'
+
+// Для вариативных шрифтов не нужно указывать вес
+const inter = Inter({ subsets: ['latin'] })
+
+export default function MyApp({ Component, pageProps }) {
+ return (
+
+
+
+ )
+}
+```
+
+Если вы не можете использовать вариативный шрифт, **необходимо указать вес**:
+
+```jsx filename="pages/_app.js"
+import { Roboto } from 'next/font/google'
+
+const roboto = Roboto({
+ weight: '400',
+ subsets: ['latin'],
+})
+
+export default function MyApp({ Component, pageProps }) {
+ return (
+
+
+
+ )
+}
+```
+
+
+
+Вы можете указать несколько весов и/или стилей, используя массив:
+
+```jsx filename="app/layout.js"
+const roboto = Roboto({
+ weight: ['400', '700'],
+ style: ['normal', 'italic'],
+ subsets: ['latin'],
+ display: 'swap',
+})
+```
+
+> **Полезно знать:** Используйте подчёркивание (_) для названий шрифтов из нескольких слов. Например, `Roboto Mono` следует импортировать как `Roboto_Mono`.
+
+
+
+### Применение шрифта в ``
+
+Вы также можете использовать шрифт без обёртки и `className`, внедрив его в `` следующим образом:
+
+```jsx filename="pages/_app.js"
+import { Inter } from 'next/font/google'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export default function MyApp({ Component, pageProps }) {
+ return (
+ <>
+
+
+ >
+ )
+}
+```
+
+### Использование на одной странице
+
+Чтобы использовать шрифт на одной странице, добавьте его на конкретную страницу, как показано ниже:
+
+```jsx filename="pages/index.js"
+import { Inter } from 'next/font/google'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export default function Home() {
+ return (
+
+ )
+}
+```
+
+
+
+### Указание подмножества
+
+Шрифты Google автоматически [субсетятся](https://fonts.google.com/knowledge/glossary/subsetting). Это уменьшает размер файла шрифта и повышает производительность. Вам нужно определить, какие подмножества вы хотите предзагрузить. Если не указать подмножества при включённом [`preload`](/docs/app/api-reference/components/font#preload), будет выдано предупреждение.
+
+Это можно сделать, добавив их в вызов функции:
+
+
+
+```tsx filename="app/layout.tsx" switcher
+const inter = Inter({ subsets: ['latin'] })
+```
+
+```jsx filename="app/layout.js" switcher
+const inter = Inter({ subsets: ['latin'] })
+```
+
+
+
+
+
+```jsx filename="pages/_app.js"
+const inter = Inter({ subsets: ['latin'] })
+```
+
+
+
+Подробнее см. в [справочнике API шрифтов](/docs/app/api-reference/components/font).
+
+### Использование нескольких шрифтов
+
+Вы можете импортировать и использовать несколько шрифтов в вашем приложении. Есть два подхода.
+
+Первый подход — создать служебную функцию, которая экспортирует шрифт, импортирует его и применяет `className` там, где нужно. Это гарантирует, что шрифт будет предзагружен только при его отображении:
+
+```ts filename="app/fonts.ts" switcher
+import { Inter, Roboto_Mono } from 'next/font/google'
+
+export const inter = Inter({
+ subsets: ['latin'],
+ display: 'swap',
+})
+
+export const roboto_mono = Roboto_Mono({
+ subsets: ['latin'],
+ display: 'swap',
+})
+```
+
+```js filename="app/fonts.js" switcher
+import { Inter, Roboto_Mono } from 'next/font/google'
+
+export const inter = Inter({
+ subsets: ['latin'],
+ display: 'swap',
+})
+
+export const roboto_mono = Roboto_Mono({
+ subsets: ['latin'],
+ display: 'swap',
+})
+```
+
+
+
+```tsx filename="app/layout.tsx" switcher
+import { inter } from './fonts'
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+ return (
+
+
+ {children}
+
+
+ )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+import { inter } from './fonts'
+
+export default function Layout({ children }) {
+ return (
+
+
+ {children}
+
+
+ )
+}
+```
+
+```tsx filename="app/page.tsx" switcher
+import { roboto_mono } from './fonts'
+
+export default function Page() {
+ return (
+ <>
+ My page
+ >
+ )
+}
+```
+
+```jsx filename="app/page.js" switcher
+import { roboto_mono } from './fonts'
+
+export default function Page() {
+ return (
+ <>
+ My page
+ >
+ )
+}
+```
+
+
+
+В примере выше `Inter` будет применён глобально, а `Roboto Mono` можно импортировать и применять по необходимости.
+
+Альтернативно, вы можете создать [CSS-переменную](/docs/app/api-reference/components/font#variable) и использовать её с предпочитаемым CSS-решением:
+
+
+
+```tsx filename="app/layout.tsx" switcher
+import { Inter, Roboto_Mono } from 'next/font/google'
+import styles from './global.css'
+
+const inter = Inter({
+ subsets: ['latin'],
+ variable: '--font-inter',
+ display: 'swap',
+})
+
+const roboto_mono = Roboto_Mono({
+ subsets: ['latin'],
+ variable: '--font-roboto-mono',
+ display: 'swap',
+})
+
+export default function RootLayout({
+ children,
+}: {
+ children: React.ReactNode
+}) {
+ return (
+
+
+ My App
+ {children}
+
+
+ )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+import { Inter, Roboto_Mono } from 'next/font/google'
+
+const inter = Inter({
+ subsets: ['latin'],
+ variable: '--font-inter',
+ display: 'swap',
+})
+
+const roboto_mono = Roboto_Mono({
+ subsets: ['latin'],
+ variable: '--font-roboto-mono',
+ display: 'swap',
+})
+
+export default function RootLayout({ children }) {
+ return (
+
+
+ My App
+ {children}
+
+
+ )
+}
+```
+
+
+
+```css filename="app/global.css"
+html {
+ font-family: var(--font-inter);
+}
+
+h1 {
+ font-family: var(--font-roboto-mono);
+}
+```
+
+В примере выше `Inter` будет применён глобально, а все теги `
` будут стилизованы с `Roboto Mono`.
+
+> **Рекомендация:** Используйте несколько шрифтов умеренно, так как каждый новый шрифт — это дополнительный ресурс, который клиент должен загрузить.
+
+## Локальные шрифты
+
+Импортируйте `next/font/local` и укажите `src` вашего локального файла шрифта. Рекомендуем использовать [вариативные шрифты](https://fonts.google.com/variablefonts) для лучшей производительности и гибкости.
+
+
+
+```tsx filename="app/layout.tsx" switcher
+import localFont from 'next/font/local'
+
+// Файлы шрифтов могут находиться внутри `app`
+const myFont = localFont({
+ src: './my-font.woff2',
+ display: 'swap',
+})
+
+export default function RootLayout({
+ children,
+}: {
+ children: React.ReactNode
+}) {
+ return (
+
+ {children}
+
+ )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+import localFont from 'next/font/local'
+
+// Файлы шрифтов могут находиться внутри `app`
+const myFont = localFont({
+ src: './my-font.woff2',
+ display: 'swap',
+})
+
+export default function RootLayout({ children }) {
+ return (
+
+ {children}
+
+ )
+}
+```
+
+
+
+
+
+```jsx filename="pages/_app.js"
+import localFont from 'next/font/local'
+
+// Файлы шрифтов могут находиться внутри `pages`
+const myFont = localFont({ src: './my-font.woff2' })
+
+export default function MyApp({ Component, pageProps }) {
+ return (
+
+
+
+ )
+}
+```
+
+
+
+Если вы хотите использовать несколько файлов для одного семейства шрифтов, `src` может быть массивом:
+
+```js
+const roboto = localFont({
+ src: [
+ {
+ path: './Roboto-Regular.woff2',
+ weight: '400',
+ style: 'normal',
+ },
+ {
+ path: './Roboto-Italic.woff2',
+ weight: '400',
+ style: 'italic',
+ },
+ {
+ path: './Roboto-Bold.woff2',
+ weight: '700',
+ style: 'normal',
+ },
+ {
+ path: './Roboto-BoldItalic.woff2',
+ weight: '700',
+ style: 'italic',
+ },
+ ],
+})
+```
+
+Подробнее см. в [справочнике API шрифтов](/docs/app/api-reference/components/font).
+
+## С Tailwind CSS
+
+`next/font` можно использовать с [Tailwind CSS](https://tailwindcss.com/) через [CSS-переменные](/docs/app/api-reference/components/font#css-variables).
+
+В примере ниже мы используем шрифт `Inter` из `next/font/google` (вы можете использовать любой шрифт Google или локальный). Загрузите ваш шрифт с опцией `variable`, чтобы определить имя CSS-переменной, и присвойте его `inter`. Затем используйте `inter.variable`, чтобы добавить CSS-переменную в ваш HTML-документ.
+
+
+
+```tsx filename="app/layout.tsx" switcher
+import { Inter, Roboto_Mono } from 'next/font/google'
+
+const inter = Inter({
+ subsets: ['latin'],
+ display: 'swap',
+ variable: '--font-inter',
+})
+
+const roboto_mono = Roboto_Mono({
+ subsets: ['latin'],
+ display: 'swap',
+ variable: '--font-roboto-mono',
+})
+
+export default function RootLayout({
+ children,
+}: {
+ children: React.ReactNode
+}) {
+ return (
+
+ {children}
+
+ )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+import { Inter, Roboto_Mono } from 'next/font/google'
+
+const inter = Inter({
+ subsets: ['latin'],
+ display: 'swap',
+ variable: '--font-inter',
+})
+
+const roboto_mono = Roboto_Mono({
+ subsets: ['latin'],
+ display: 'swap',
+ variable: '--font-roboto-mono',
+})
+
+export default function RootLayout({ children }) {
+ return (
+
+ {children}
+
+ )
+}
+```
+
+
+
+
+
+```jsx filename="pages/_app.js"
+import { Inter } from 'next/font/google'
+
+const inter = Inter({
+ subsets: ['latin'],
+ variable: '--font-inter',
+})
+
+export default function MyApp({ Component, pageProps }) {
+ return (
+
+
+
+ )
+}
+```
+
+
+
+Наконец, добавьте CSS-переменную в [конфигурацию Tailwind CSS](/docs/app/building-your-application/styling/tailwind-css#configuring-tailwind):
+
+```js filename="tailwind.config.js"
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: [
+ './pages/**/*.{js,ts,jsx,tsx}',
+ './components/**/*.{js,ts,jsx,tsx}',
+ './app/**/*.{js,ts,jsx,tsx}',
+ ],
+ theme: {
+ extend: {
+ fontFamily: {
+ sans: ['var(--font-inter)'],
+ mono: ['var(--font-roboto-mono)'],
+ },
+ },
+ },
+ plugins: [],
+}
+```
+
+Теперь вы можете использовать классы `font-sans` и `font-mono` для применения шрифтов к элементам.
+
+## Предзагрузка
+
+
+Когда функция шрифта вызывается на странице вашего сайта, шрифт не становится глобально доступным и предзагруженным на всех маршрутах. Вместо этого он предзагружается только на связанных маршрутах в зависимости от типа файла, в котором он используется:
+
+- Если это [уникальная страница](/docs/app/building-your-application/routing/pages-and-layouts#pages), шрифт предзагружается на уникальном маршруте этой страницы.
+- Если это [макет](/docs/app/building-your-application/routing/pages-and-layouts#layouts), шрифт предзагружается на всех маршрутах, обёрнутых этим макетом.
+- Если это [корневой макет](/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required), шрифт предзагружается на всех маршрутах.
+
+
+
+
+
+Когда функция шрифта вызывается на странице вашего сайта, шрифт не становится глобально доступным и предзагруженным на всех маршрутах. Вместо этого он предзагружается только на связанных маршрутах в зависимости от типа файла, в котором он используется:
+
+- если это [уникальная страница](/docs/pages/building-your-application/routing/pages-and-layouts), шрифт предзагружается на уникальном маршруте этой страницы
+- если он находится в [пользовательском App](/docs/pages/building-your-application/routing/custom-app), шрифт предзагружается на всех маршрутах сайта в `/pages`
+
+
+
+## Повторное использование шрифтов
+
+Каждый раз, когда вы вызываете функцию `localFont` или шрифта Google, этот шрифт размещается как один экземпляр в вашем приложении. Поэтому, если вы загружаете одну и ту же функцию шрифта в нескольких файлах, размещается несколько экземпляров одного шрифта. В этой ситуации рекомендуется сделать следующее:
+
+- Вызовите функцию загрузки шрифта в одном общем файле
+- Экспортируйте её как константу
+- Импортируйте константу в каждый файл, где вы хотите использовать этот шрифт
\ No newline at end of file
diff --git a/apps/docs/content/ru/docs/13/02-app/01-building-your-application/06-optimizing/03-scripts.mdx b/apps/docs/content/ru/docs/13/02-app/01-building-your-application/06-optimizing/03-scripts.mdx
new file mode 100644
index 00000000..07e8b431
--- /dev/null
+++ b/apps/docs/content/ru/docs/13/02-app/01-building-your-application/06-optimizing/03-scripts.mdx
@@ -0,0 +1,377 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-06-06T17:32:52.079Z
+title: Оптимизация скриптов
+nav_title: Скрипты
+description: Оптимизация сторонних скриптов с помощью встроенного компонента Script.
+related:
+ title: Справочник API
+ description: Узнайте больше о next/script API.
+ links:
+ - app/api-reference/components/script
+---
+
+{/* Содержание этого документа используется как в App Router, так и в Pages Router. Для добавления контента, специфичного для Pages Router, используйте компонент `Контент`. Общий контент не должен быть обёрнут в компонент. */}
+
+
+
+### Скрипты в макетах (Layouts)
+
+Для загрузки стороннего скрипта на нескольких маршрутах импортируйте `next/script` и включите скрипт непосредственно в ваш компонент макета:
+
+```tsx filename="app/dashboard/layout.tsx" switcher
+import Script from 'next/script'
+
+export default function DashboardLayout({
+ children,
+}: {
+ children: React.ReactNode
+}) {
+ return (
+ <>
+
+
+ >
+ )
+}
+```
+
+```jsx filename="app/dashboard/layout.js" switcher
+import Script from 'next/script'
+
+export default function DashboardLayout({ children }) {
+ return (
+ <>
+
+
+ >
+ )
+}
+```
+
+Сторонний скрипт будет загружен при обращении пользователя к маршруту папки (например, `dashboard/page.js`) или любому вложенному маршруту (например, `dashboard/settings/page.js`). Next.js гарантирует, что скрипт **загрузится только один раз**, даже если пользователь переходит между несколькими маршрутами в одном макете.
+
+
+
+### Скрипты для всего приложения
+
+
+
+Для загрузки стороннего скрипта на всех маршрутах импортируйте `next/script` и включите скрипт непосредственно в корневой макет:
+
+```tsx filename="app/layout.tsx" switcher
+import Script from 'next/script'
+
+export default function RootLayout({
+ children,
+}: {
+ children: React.ReactNode
+}) {
+ return (
+
+ {children}
+
+
+ )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+import Script from 'next/script'
+
+export default function RootLayout({ children }) {
+ return (
+
+ {children}
+
+
+ )
+}
+```
+
+
+
+
+
+Для загрузки стороннего скрипта на всех маршрутах импортируйте `next/script` и включите скрипт непосредственно в ваш кастомный `_app`:
+
+```jsx filename="pages/_app.js"
+import Script from 'next/script'
+
+export default function MyApp({ Component, pageProps }) {
+ return (
+ <>
+
+
+ >
+ )
+}
+```
+
+
+
+Этот скрипт будет загружаться и выполняться при обращении к _любому_ маршруту вашего приложения. Next.js гарантирует, что скрипт **загрузится только один раз**, даже если пользователь переходит между несколькими страницами.
+
+> **Рекомендация**: Мы рекомендуем включать сторонние скрипты только на конкретных страницах или в макетах, чтобы минимизировать влияние на производительность.
+
+### Стратегии загрузки
+
+Хотя поведение `next/script` по умолчанию позволяет загружать сторонние скрипты на любой странице или в макете, вы можете точно настроить его поведение с помощью свойства `strategy`:
+
+- `beforeInteractive`: Загружает скрипт до любого кода Next.js и до гидратации страницы.
+- `afterInteractive`: (**по умолчанию**) Загружает скрипт рано, но после частичной гидратации страницы.
+- `lazyOnload`: Загружает скрипт позже, во время простоя браузера.
+- `worker`: (экспериментально) Загружает скрипт в веб-воркере.
+
+Обратитесь к документации [`next/script`](/docs/app/api-reference/components/script#strategy) для получения подробной информации о каждой стратегии и случаях их использования.
+
+### Выгрузка скриптов в веб-воркер (Экспериментально)
+
+> **Предупреждение:** Стратегия `worker` пока нестабильна и не работает с [`app`](/docs/app/building-your-application/routing/defining-routes) директорией. Используйте с осторожностью.
+
+Скрипты, использующие стратегию `worker`, выгружаются и выполняются в веб-воркере с помощью [Partytown](https://partytown.builder.io/). Это может улучшить производительность вашего сайта, освободив основной поток для остального кода приложения.
+
+Эта стратегия всё ещё экспериментальная и может использоваться только при включении флага `nextScriptWorkers` в `next.config.js`:
+
+```js filename="next.config.js"
+module.exports = {
+ experimental: {
+ nextScriptWorkers: true,
+ },
+}
+```
+
+Затем запустите `next` (обычно `npm run dev` или `yarn dev`), и Next.js проведёт вас через установку необходимых пакетов для завершения настройки:
+
+```bash filename="Terminal"
+npm run dev
+```
+
+Вы увидите инструкции типа: Установите Partytown, выполнив `npm install @builder.io/partytown`
+
+После завершения настройки определение `strategy="worker"` автоматически инициализирует Partytown в вашем приложении и выгрузит скрипт в веб-воркер.
+
+```tsx filename="pages/home.tsx" switcher
+import Script from 'next/script'
+
+export default function Home() {
+ return (
+ <>
+
+ >
+ )
+}
+```
+
+```jsx filename="pages/home.js" switcher
+import Script from 'next/script'
+
+export default function Home() {
+ return (
+ <>
+
+ >
+ )
+}
+```
+
+При загрузке сторонних скриптов в веб-воркере следует учитывать ряд компромиссов. Подробнее см. документацию Partytown о [компромиссах](https://partytown.builder.io/trade-offs).
+
+### Встроенные скрипты
+
+Встроенные скрипты (скрипты, не загружаемые из внешнего файла) также поддерживаются компонентом Script. Их можно написать, поместив JavaScript в фигурные скобки:
+
+```jsx
+
+```
+
+Или с помощью свойства `dangerouslySetInnerHTML`:
+
+```jsx
+
+```
+
+> **Важно**: Для встроенных скриптов необходимо указать свойство `id`, чтобы Next.js мог отслеживать и оптимизировать скрипт.
+
+### Выполнение дополнительного кода
+
+С компонентом Script можно использовать обработчики событий для выполнения дополнительного кода после определённых событий:
+
+- `onLoad`: Выполняет код после завершения загрузки скрипта.
+- `onReady`: Выполняет код после загрузки скрипта и при каждом монтировании компонента.
+- `onError`: Выполняет код при ошибке загрузки скрипта.
+
+
+
+Эти обработчики будут работать только при импорте `next/script` и использовании внутри [Клиентского компонента](/docs/app/building-your-application/rendering/client-components), где первой строкой кода указано `"use client"`:
+
+```tsx filename="app/page.tsx" switcher
+'use client'
+
+import Script from 'next/script'
+
+export default function Page() {
+ return (
+ <>
+
+```
+
+Или с помощью свойства `dangerouslySetInnerHTML`:
+
+```jsx
+
+```
+
+> **Важно**: Для встроенных скриптов необходимо указать свойство `id`, чтобы Next.js мог отслеживать и оптимизировать скрипт.
+
+### Выполнение дополнительного кода
+
+С компонентом Script можно использовать обработчики событий для выполнения дополнительного кода после определённых событий:
+
+- `onLoad`: Выполняет код после завершения загрузки скрипта.
+- `onReady`: Выполняет код после загрузки скрипта и при каждом монтировании компонента.
+- `onError`: Выполняет код при ошибке загрузки скрипта.
+
+
+
+Эти обработчики будут работать только при импорте `next/script` и использовании внутри [Клиентского компонента](/docs/app/building-your-application/rendering/client-components), где первой строкой кода указано `"use client"`:
+
+```tsx filename="app/page.tsx" switcher
+'use client'
+
+import Script from 'next/script'
+
+export default function Page() {
+ return (
+ <>
+