Trato de entender cómo funciona la etiqueta next.js Script con la estrategia beforeInteractive. Para las pruebas solo usé lodash. Pero sigo recibiendo un error de referencia: _ no está definido . Pensé que cuando se carga un script con beforeInteractive, debería estar disponible globalmente dentro de mi componente de página, ya que se inyecta en el Html inicial del servidor y podría usarlo, por ejemplo, en el enlace useEffect para modificar un div. ¿Alguien puede explicarme por qué no funciona o qué estoy haciendo mal? No lo instalé a través de npm porque estoy tratando de averiguar cómo funciona.
Tengo un _document.js simple y agregué una etiqueta de script Next.js con la estrategia beforeInteractive a este _document.js. Los documentos next.js dicen: Esta estrategia solo funciona dentro de _document.js y está diseñada para cargar secuencias de comandos que necesita todo el sitio (es decir, la secuencia de comandos se cargará cuando cualquier página de la aplicación se haya cargado en el lado del servidor).
import { Html, Head, Main, NextScript } from 'next/document' import Script from 'next/script' export default function Document() { return ( <Html> <Head /> <body> <Main /> <NextScript /> <Script src="https://unpkg.com/lodash@4.17.20" strategy="beforeInteractive" ></Script> </body> </Html> ) }Entonces tengo un componente de página simple dentro de la carpeta de páginas. Agregué la función getServerSideProps para usar ServerSideRendering.
Si exporta una función llamada getServerSideProps (representación del lado del servidor) desde una página, Next.js representará previamente esta página en cada solicitud utilizando los datos devueltos por getServerSideProps.
import Head from 'next/head'; import {useEffect, useState} from 'react'; const TestComponent = () => { const [change,setChange] = useState('not changed'); useEffect(()=> { console.log(_); setChange(_.join(['one','two'],' - ')); }); return ( <> <Head> <title>Test</title> </Head> <div>{change}</div> </> ); }; export async function getServerSideProps(context) { return { props: {}, } } export default TestComponent;Actualizar
Parece que es un error que se solucionó pero aún no se publicó https://github.com/vercel/next.js/discussions/37098
Dejando de lado el hecho de que debería importar Lodash como un módulo de nodo, parece haber un problema al usar next/script en _document (sin importar cuál sea realmente el script externo).
Resulta que este es un error de Next.js que se ha abordado en este PR en la versiónpreliminar v12.1.7-canary.8 . Para solucionar el problema en su proyecto, simplemente actualice a la última versión Canary ( npm install next@canary ), o espere la versión estable v12.1.7.
Como alternativa, puede usar la etiqueta <script> directamente en el <Head> del _document con la propiedad defer . Esto coincide estrechamente con lo que generaría next/script .
import { Html, Head, Main, NextScript } from 'next/document' export default function Document() { return ( <Html> <Head> <script type="text/javascript" src="https://unpkg.com/lodash@4.17.20/lodash.js" defer ></script> </Head> <body> <Main /> <NextScript /> </body> </Html> ) }En primer lugar, no veo prácticamente ninguna razón por la que quiera hacer esto, cuando puede (y debe) simplemente usar install it to node_modules . También correrá el riesgo de que el paquete tenga problemas si el tipo de biblioteca no es un módulo y la siguiente configuración requiere un módulo.
Hay dos formas. En primer lugar, vea los documentos sobre esto exactamente.
Utilice el método anterior mencionado en los documentos.
Si esa no es una opción por alguna razón...
La segunda es una solución menos que ideal , pero funcional.
Cree una carpeta para sus archivos estáticos. Ej: <root>/static/js/hello.js . Luego, en su archivo _document ,
<script type="text/javascript" src="/static/hello.js"></script>