0
2.3K
Views¿Cómo puedo usar Bootstrap 5 con Next.js?
Después de instalar bootstrap con npm install bootstrap , agregué el estilo a /pages/_app.js así:
import 'bootstrap/dist/css/bootstrap.css'; export default function App({ Component, pageProps }) { return <Component {...pageProps} /> }Sin embargo, cualquier cosa que use javascript no funciona en absoluto, por ejemplo, el ejemplo de Colapso de sus documentos.
function App() { return ( <div> <p> <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample"> Link with href </a> <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> Button with data-bs-target </button> </p> <div class="collapse" id="collapseExample"> <div class="card card-body"> Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger. </div> </div> </div> ); } export default App Si agrego import 'bootstrap/dist/js/bootstrap.js' a /pages/_app.js , entonces comienza a "funcionar" como se esperaba, hasta que se vuelve a cargar una página en la que dice ReferenceError: document is not defined (captura de pantalla) , que me lleva a creer que no es posible o que no debería intentar usar boostrap + reaccionar o next.js.
Pensé que dejar caer jquery significaba que debería funcionar simplemente "listo para usar" con marcos como reaccionar (como si ya no necesitara reaccionar-boostrap o reaccionar)
¿Hay alguna manera de usar correctamente boostrap 5 y nextjs? ¿O debería probar algo completamente diferente o volver a usar reactstrap (que actualmente parece solo admitir boostrap 4)?
5 answers
Answer question0
Creo que React Bootstrap (beta a partir de julio de 2021) ahora es compatible con Bootstrap5: https://react-bootstrap.github.io/ Vea la imagen de su sitio web:
0
Solo importó bootstrap.css, debe importar el archivo js de bootstrap si desea usar el colapso. Y los js de bootstrap requieren jquery y popper. Sin embargo, react o nextjs no recomiendan usar jquery.
Puede usar una de las 2 siguientes alternativas de libs:
Para el último bootstrap 5, puede usar BootstrapCDN:
En _document.js, agregue 2 líneas:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" integrity="undefined" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="undefined" crossorigin="anonymous"></script>0
Esto es algo común que la mayoría de nosotros extrañamos al cambiar a NextJS.
Problema: El documento no está definido.
Motivo: NextJS representa su aplicación en el servidor y no hay ninguna ventana, documento, etc. en el servidor, por lo tanto, el document no está definido. incluso puede console.log(typeof window, typeof document) para verificar esto.
AHORA, ¿cuál es la solución?
Usé este código en mi componente de función:
useEffect(() => { typeof document !== undefined ? require('bootstrap/dist/js/bootstrap') : null }, []) useEffect con dependencies vacías funciona como componentDidMount() que se ejecuta después de que el código se ejecuta por segunda vez. Dado que el código se ejecuta primero en el servidor y luego en el cliente, no producirá errores, ya que el cliente tiene documento.
Nunca he usado `componentDidMount(), nunca.
¿Eso funcionó para mí?
Acabo de copiar su Collapse example en mi otra aplicación para verificar esto.
0
Pasos: 1- Instalar bootstrap a través de npm. 2- ahora agregue bootstrap en _app.js.
import Head from 'next/head'; import Script from 'next/script'; import React, { useEffect } from 'react'; import '../styles/global.scss'; import 'bootstrap/dist/css/bootstrap.css'; export default function App({ Component, pageProps }) { useEffect(() => { import("bootstrap/dist/js/bootstrap"); }, []); useEffect(() => { import("jquery/dist/jquery.min.js"); }, []); useEffect(() => { typeof document !== undefined ? require('bootstrap/dist/js/bootstrap') : null }, []) return ( <> <Head> <meta name='viewport' content='width=device-width, initial-scale=1' /> </Head> <Component {...pageProps} /> </> ); }0
los _app.js y _app.tsx son diferentes
function MyApp({ Component, pageProps }: AppProps) { // import bootstrap-js-libs below for _app.js useEffect(() => { import("bootstrap/dist/js/bootstrap"); }, []); useEffect(() => { typeof document !== undefined ? require("bootstrap/dist/js/bootstrap") : null; }, []);¡También podemos usar CDN en el archivo _document!