`, pero debe especificarse en otros casos.
+
+## Ejemplos
+
+### Responsive
+
+
+
+```jsx
+import Image from 'next/image'
+import mountains from '../public/mountains.jpg'
+
+export default function Responsive() {
+ return (
+
+
+
+ )
+}
+```
+
+### Llenar contenedor
+
+
+
+```jsx
+import Image from 'next/image'
+import mountains from '../public/mountains.jpg'
+
+export default function Fill() {
+ return (
+
+
+
+
+ {/* Y más imágenes en el grid... */}
+
+ )
+}
+```
+
+### Imagen de fondo
+
+
+
+```jsx
+import Image from 'next/image'
+import mountains from '../public/mountains.jpg'
+
+export default function Background() {
+ return (
+
+ )
+}
+```
+
+Para ejemplos del componente Image usado con varios estilos, consulta la [Demostración del Componente de Imagen](https://image-component.nextjs.gallery).
+
+## Otras propiedades
+
+[**Ver todas las propiedades disponibles para el componente `next/image`.**](/docs/app/api-reference/components/image)
+
+## Configuración
+
+El componente `next/image` y la API de Optimización de Imágenes de Next.js se pueden configurar en el archivo [`next.config.js`](/docs/app/api-reference/next-config-js). Estas configuraciones te permiten [habilitar imágenes remotas](/docs/app/api-reference/components/image#remotepatterns), [definir breakpoints personalizados](/docs/app/api-reference/components/image#devicesizes), [cambiar comportamiento de caché](/docs/app/api-reference/components/image#caching-behavior) y más.
+
+[**Lee la documentación completa de configuración de imágenes para más información.**](/docs/app/api-reference/components/image#configuration-options)
\ No newline at end of file
diff --git a/apps/docs/content/es/docs/13/02-app/01-building-your-application/06-optimizing/02-fonts.mdx b/apps/docs/content/es/docs/13/02-app/01-building-your-application/06-optimizing/02-fonts.mdx
new file mode 100644
index 00000000..86322028
--- /dev/null
+++ b/apps/docs/content/es/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:26:44.058Z
+title: Optimización de fuentes
+nav_title: Fuentes
+description: Optimiza las fuentes web de tu aplicación con los cargadores integrados de `next/font`.
+related:
+ title: Referencia de API
+ description: Aprende más sobre la API de next/font.
+ links:
+ - app/api-reference/components/font
+---
+
+{/* El contenido de este documento se comparte entre el enrutador de app y pages. Puedes usar el componente `
Contenido` para agregar contenido específico del Enrutador de Páginas. Cualquier contenido compartido no debe estar envuelto en un componente. */}
+
+[**`next/font`**](/docs/app/api-reference/components/font) optimizará automáticamente tus fuentes (incluyendo fuentes personalizadas) y eliminará las solicitudes de red externas para mejorar la privacidad y el rendimiento.
+
+> **🎥 Mira:** Aprende más sobre cómo usar `next/font` → [YouTube (6 minutos)](https://www.youtube.com/watch?v=L8_98i_bMMA).
+
+`next/font` incluye **autoalojamiento integrado automático** para _cualquier_ archivo de fuente. Esto significa que puedes cargar fuentes web de manera óptima sin cambios de diseño, gracias a la propiedad CSS `size-adjust` subyacente.
+
+Este nuevo sistema de fuentes también te permite usar convenientemente todas las fuentes de Google con rendimiento y privacidad en mente. Los archivos CSS y de fuentes se descargan en tiempo de compilación y se autoalojan con el resto de tus recursos estáticos. **El navegador no envía solicitudes a Google.**
+
+## Fuentes de Google
+
+Autoalojamiento automático de cualquier fuente de Google. Las fuentes se incluyen en el despliegue y se sirven desde el mismo dominio que tu despliegue. **El navegador no envía solicitudes a Google.**
+
+Comienza importando la fuente que deseas usar desde `next/font/google` como una función. Recomendamos usar [fuentes variables](https://fonts.google.com/variablefonts) para el mejor rendimiento y flexibilidad.
+
+
+
+```tsx filename="app/layout.tsx" switcher
+import { Inter } from 'next/font/google'
+
+// Si cargas una fuente variable, no necesitas especificar el peso
+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'
+
+// Si cargas una fuente variable, no necesitas especificar el peso
+const inter = Inter({
+ subsets: ['latin'],
+ display: 'swap',
+})
+
+export default function RootLayout({ children }) {
+ return (
+
+ {children}
+
+ )
+}
+```
+
+Si no puedes usar una fuente variable, **necesitarás especificar un peso**:
+
+```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}
+
+ )
+}
+```
+
+
+
+
+
+Para usar la fuente en todas tus páginas, agrégalo al archivo [`_app.js`](/docs/pages/building-your-application/routing/custom-app) bajo `/pages` como se muestra a continuación:
+
+```jsx filename="pages/_app.js"
+import { Inter } from 'next/font/google'
+
+// Si cargas una fuente variable, no necesitas especificar el peso
+const inter = Inter({ subsets: ['latin'] })
+
+export default function MyApp({ Component, pageProps }) {
+ return (
+
+
+
+ )
+}
+```
+
+Si no puedes usar una fuente variable, **necesitarás especificar un peso**:
+
+```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 (
+
+
+
+ )
+}
+```
+
+
+
+Puedes especificar múltiples pesos y/o estilos usando un array:
+
+```jsx filename="app/layout.js"
+const roboto = Roboto({
+ weight: ['400', '700'],
+ style: ['normal', 'italic'],
+ subsets: ['latin'],
+ display: 'swap',
+})
+```
+
+> **Nota importante:** Usa un guión bajo (_) para nombres de fuente con múltiples palabras. Ej. `Roboto Mono` debe importarse como `Roboto_Mono`.
+
+
+
+### Aplicar la fuente en ``
+
+También puedes usar la fuente sin un envoltorio y `className` inyectándola dentro de `` de la siguiente manera:
+
+```jsx filename="pages/_app.js"
+import { Inter } from 'next/font/google'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export default function MyApp({ Component, pageProps }) {
+ return (
+ <>
+
+
+
+ )
+}
+```
+
+### Uso en una sola página
+
+Para usar la fuente en una sola página, agrégalo a la página específica como se muestra a continuación:
+
+```jsx filename="pages/index.js"
+import { Inter } from 'next/font/google'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export default function Home() {
+ return (
+
+ )
+}
+```
+
+
+
+### Especificar un subconjunto
+
+Las fuentes de Google se [subconjuntan](https://fonts.google.com/knowledge/glossary/subsetting) automáticamente. Esto reduce el tamaño del archivo de fuente y mejora el rendimiento. Deberás definir qué subconjuntos deseas precargar. No especificar ningún subconjunto mientras [`preload`](/docs/app/api-reference/components/font#preload) es `true` resultará en una advertencia.
+
+Esto se puede hacer agregándolo a la llamada de función:
+
+
+
+```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'] })
+```
+
+
+
+Consulta la [Referencia de API de Fuentes](/docs/app/api-reference/components/font) para más información.
+
+### Usar múltiples fuentes
+
+Puedes importar y usar múltiples fuentes en tu aplicación. Hay dos enfoques que puedes tomar.
+
+El primer enfoque es crear una función de utilidad que exporte una fuente, la importe y aplique su `className` donde sea necesario. Esto asegura que la fuente se precargue solo cuando se renderice:
+
+```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 (
+ <>
+ Mi página
+
+ )
+}
+```
+
+```jsx filename="app/page.js" switcher
+import { roboto_mono } from './fonts'
+
+export default function Page() {
+ return (
+ <>
+ Mi página
+
+ )
+}
+```
+
+
+
+En el ejemplo anterior, `Inter` se aplicará globalmente, y `Roboto Mono` puede importarse y aplicarse según sea necesario.
+
+Alternativamente, puedes crear una [variable CSS](/docs/app/api-reference/components/font#variable) y usarla con tu solución CSS preferida:
+
+
+
+```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 (
+
+
+ Mi 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 (
+
+
+ Mi App
+ {children}
+
+
+ )
+}
+```
+
+
+
+```css filename="app/global.css"
+html {
+ font-family: var(--font-inter);
+}
+
+h1 {
+ font-family: var(--font-roboto-mono);
+}
+```
+
+En el ejemplo anterior, `Inter` se aplicará globalmente, y cualquier etiqueta `
` se estilizará con `Roboto Mono`.
+
+> **Recomendación:** Usa múltiples fuentes con moderación, ya que cada nueva fuente es un recurso adicional que el cliente debe descargar.
+
+## Fuentes locales
+
+Importa `next/font/local` y especifica el `src` de tu archivo de fuente local. Recomendamos usar [fuentes variables](https://fonts.google.com/variablefonts) para el mejor rendimiento y flexibilidad.
+
+
+
+```tsx filename="app/layout.tsx" switcher
+import localFont from 'next/font/local'
+
+// Los archivos de fuente pueden ubicarse dentro de `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'
+
+// Los archivos de fuente pueden ubicarse dentro de `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'
+
+// Los archivos de fuente pueden ubicarse dentro de `pages`
+const myFont = localFont({ src: './my-font.woff2' })
+
+export default function MyApp({ Component, pageProps }) {
+ return (
+
+
+
+ )
+}
+```
+
+
+
+Si deseas usar múltiples archivos para una sola familia de fuentes, `src` puede ser un array:
+
+```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',
+ },
+ ],
+})
+```
+
+Consulta la [Referencia de API de Fuentes](/docs/app/api-reference/components/font) para más información.
+
+## Con Tailwind CSS
+
+`next/font` puede usarse con [Tailwind CSS](https://tailwindcss.com/) a través de una [variable CSS](/docs/app/api-reference/components/font#css-variables).
+
+En el ejemplo siguiente, usamos la fuente `Inter` de `next/font/google` (puedes usar cualquier fuente de Google o fuentes locales). Carga tu fuente con la opción `variable` para definir el nombre de tu variable CSS y asígnalo a `inter`. Luego, usa `inter.variable` para agregar la variable CSS a tu documento 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 (
+
+
+
+ )
+}
+```
+
+
+
+Finalmente, agrega la variable CSS a tu [configuración de 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: [],
+}
+```
+
+Ahora puedes usar las clases de utilidad `font-sans` y `font-mono` para aplicar la fuente a tus elementos.
+
+## Precarga
+
+
+Cuando se llama a una función de fuente en una página de tu sitio, no está disponible globalmente ni se precarga en todas las rutas. En cambio, la fuente se precarga solo en las rutas relacionadas según el tipo de archivo donde se usa:
+
+- Si es una [página única](/docs/app/building-your-application/routing/pages-and-layouts#pages), se precarga en la ruta única de esa página.
+- Si es un [layout](/docs/app/building-your-application/routing/pages-and-layouts#layouts), se precarga en todas las rutas envueltas por el layout.
+- Si es el [layout raíz](/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required), se precarga en todas las rutas.
+
+
+
+
+
+Cuando se llama a una función de fuente en una página de tu sitio, no está disponible globalmente ni se precarga en todas las rutas. En cambio, la fuente se precarga solo en las rutas relacionadas según el tipo de archivo donde se usa:
+
+- si es una [página única](/docs/pages/building-your-application/routing/pages-and-layouts), se precarga en la ruta única de esa página
+- si está en la [App personalizada](/docs/pages/building-your-application/routing/custom-app), se precarga en todas las rutas del sitio bajo `/pages`
+
+
+
+## Reutilizar fuentes
+
+Cada vez que llamas a la función `localFont` o de fuente de Google, esa fuente se aloja como una instancia en tu aplicación. Por lo tanto, si cargas la misma función de fuente en múltiples archivos, se alojarán múltiples instancias de la misma fuente. En esta situación, se recomienda hacer lo siguiente:
+
+- Llama a la función de carga de fuente en un archivo compartido
+- Expórtala como una constante
+- Importa la constante en cada archivo donde desees usar esta fuente
\ No newline at end of file
diff --git a/apps/docs/content/es/docs/13/02-app/01-building-your-application/06-optimizing/03-scripts.mdx b/apps/docs/content/es/docs/13/02-app/01-building-your-application/06-optimizing/03-scripts.mdx
new file mode 100644
index 00000000..e3fe92b3
--- /dev/null
+++ b/apps/docs/content/es/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:25:08.783Z
+title: Optimización de Scripts
+nav_title: Scripts
+description: Optimiza scripts de terceros con el componente Script integrado.
+related:
+ title: Referencia de API
+ description: Aprende más sobre la API de next/script.
+ links:
+ - app/api-reference/components/script
+---
+
+{/* El contenido de este documento se comparte entre el enrutador de app y pages. Puedes usar el componente `Contenido` para agregar contenido específico del enrutador Pages. Cualquier contenido compartido no debe estar envuelto en un componente. */}
+
+
+
+### Scripts en Layouts
+
+Para cargar un script de terceros en múltiples rutas, importa `next/script` e incluye el script directamente en tu componente de layout:
+
+```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 (
+ <>
+
+
+
+ )
+}
+```
+
+El script de terceros se cargará cuando el usuario acceda a la ruta de la carpeta (ej. `dashboard/page.js`) o cualquier ruta anidada (ej. `dashboard/settings/page.js`). Next.js asegurará que el script **solo se cargue una vez**, incluso si el usuario navega entre múltiples rutas dentro del mismo layout.
+
+
+
+### Scripts de Aplicación
+
+
+
+Para cargar un script de terceros en todas las rutas, importa `next/script` e incluye el script directamente en tu layout raíz:
+
+```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}
+
+
+ )
+}
+```
+
+
+
+
+
+Para cargar un script de terceros en todas las rutas, importa `next/script` e incluye el script directamente en tu `_app` personalizado:
+
+```jsx filename="pages/_app.js"
+import Script from 'next/script'
+
+export default function MyApp({ Component, pageProps }) {
+ return (
+ <>
+
+
+
+ )
+}
+```
+
+
+
+Este script se cargará y ejecutará cuando se acceda a _cualquier_ ruta de tu aplicación. Next.js asegurará que el script **solo se cargue una vez**, incluso si el usuario navega entre múltiples páginas.
+
+> **Recomendación**: Te recomendamos incluir scripts de terceros solo en páginas o layouts específicos para minimizar el impacto innecesario en el rendimiento.
+
+### Estrategias
+
+Aunque el comportamiento predeterminado de `next/script` te permite cargar scripts de terceros en cualquier página o layout, puedes ajustar su comportamiento de carga usando la propiedad `strategy`:
+
+- `beforeInteractive`: Carga el script antes de cualquier código de Next.js y antes de que ocurra la hidratación de la página.
+- `afterInteractive`: (**predeterminado**) Carga el script temprano pero después de que ocurra cierta hidratación en la página.
+- `lazyOnload`: Carga el script más tarde durante el tiempo de inactividad del navegador.
+- `worker`: (experimental) Carga el script en un web worker.
+
+Consulta la documentación de referencia de la API [`next/script`](/docs/app/api-reference/components/script#strategy) para aprender más sobre cada estrategia y sus casos de uso.
+
+### Descarga de Scripts a un Web Worker (Experimental)
+
+> **Advertencia:** La estrategia `worker` aún no es estable y no funciona con el directorio [`app`](/docs/app/building-your-application/routing/defining-routes). Úsala con precaución.
+
+Los scripts que usan la estrategia `worker` se descargan y ejecutan en un web worker con [Partytown](https://partytown.builder.io/). Esto puede mejorar el rendimiento de tu sitio dedicando el hilo principal al resto del código de tu aplicación.
+
+Esta estrategia sigue siendo experimental y solo puede usarse si la bandera `nextScriptWorkers` está habilitada en `next.config.js`:
+
+```js filename="next.config.js"
+module.exports = {
+ experimental: {
+ nextScriptWorkers: true,
+ },
+}
+```
+
+Luego, ejecuta `next` (normalmente `npm run dev` o `yarn dev`) y Next.js te guiará a través de la instalación de los paquetes necesarios para completar la configuración:
+
+```bash filename="Terminal"
+npm run dev
+```
+
+Verás instrucciones como estas: Por favor instala Partytown ejecutando `npm install @builder.io/partytown`
+
+Una vez completada la configuración, definir `strategy="worker"` instanciará automáticamente Partytown en tu aplicación y descargará el script a un web worker.
+
+```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 (
+ <>
+
+
+ )
+}
+```
+
+Hay varias compensaciones que deben considerarse al cargar un script de terceros en un web worker. Consulta la documentación de [compensaciones](https://partytown.builder.io/trade-offs) de Partytown para más información.
+
+### Scripts en Línea
+
+Los scripts en línea, o scripts no cargados desde un archivo externo, también son compatibles con el componente Script. Se pueden escribir colocando el JavaScript entre llaves:
+
+```jsx
+
+```
+
+O usando la propiedad `dangerouslySetInnerHTML`:
+
+```jsx
+
+```
+
+> **Advertencia**: Se debe asignar una propiedad `id` para los scripts en línea a fin de que Next.js pueda rastrear y optimizar el script.
+
+### Ejecución de Código Adicional
+
+Los manejadores de eventos pueden usarse con el componente Script para ejecutar código adicional después de que ocurra cierto evento:
+
+- `onLoad`: Ejecuta código después de que el script haya terminado de cargarse.
+- `onReady`: Ejecuta código después de que el script haya terminado de cargarse y cada vez que el componente se monte.
+- `onError`: Ejecuta código si el script falla al cargarse.
+
+
+
+Estos manejadores solo funcionarán cuando `next/script` se importe y use dentro de un [Componente Cliente](/docs/app/building-your-application/rendering/client-components) donde `"use client"` esté definido como la primera línea de código:
+
+```tsx filename="app/page.tsx" switcher
+'use client'
+
+import Script from 'next/script'
+
+export default function Page() {
+ return (
+ <>
+
+```
+
+O usando la propiedad `dangerouslySetInnerHTML`:
+
+```jsx
+
+```
+
+> **Advertencia**: Se debe asignar una propiedad `id` a los scripts en línea para que Next.js pueda rastrear y optimizar el script.
+
+### Ejecución de Código Adicional
+
+Los manejadores de eventos pueden usarse con el componente Script para ejecutar código adicional después de que ocurra cierto evento:
+
+- `onLoad`: Ejecuta código después de que el script haya terminado de cargarse.
+- `onReady`: Ejecuta código después de que el script haya terminado de cargarse y cada vez que el componente se monte.
+- `onError`: Ejecuta código si el script falla al cargarse.
+
+
+
+Estos manejadores solo funcionarán cuando `next/script` se importe y use dentro de un [Componente Cliente](/docs/app/building-your-application/rendering/client-components) donde `"use client"` esté definido como la primera línea de código:
+
+```tsx filename="app/page.tsx" switcher
+'use client'
+
+import Script from 'next/script'
+
+export default function Page() {
+ return (
+ <>
+