Next.js mit Bootstrap und Sass

Next.js ist für den Einsatz vonSassvorbereitet. FürBootstrapliest man unterschiedlichste Dinge. Fakt ist, dass bis einschl. Bootstrap 4.x jQuery benötigt wurde. Da beim Server-Rendering kein Windows-Objekt vorhanden ist, das führt das zu Problemen. Abhilfe schafftReact Bootstrapbei dem jQuery ersetzt wird. React Bootstrap ist schwieriger zu manipulieren, ich setze es ungern ein und möchte hier kurz zeigen, wie man Bootstrap (mit Sass) auf dem Next.js-Server benutzen kann.

Hierfür installieren wir zunächst die notwendigen Pakete:

npm install bootstrap@4.5.3 jquery popper.js sass

und erstellen im Basisverzeichnis des Servers die Datei ./index.scss mit folgendem Inhalt:

@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins/_breakpoints';
@import '~bootstrap/scss/bootstrap';
#main {
  h1 {
    color: red;
  }
}

Benötigt wird noch im Verzeichnis pages die Datei ./pages/_app.js, die das JavaScript von Bootstrap einbindet:

import '../index.scss';
function MyApp({ Component, pageProps }) {
  if (typeof window !== 'undefined') {
    require('jquery');
    require('popper.js');
    require('bootstrap/dist/js/bootstrap');
  }
  return <Component {...pageProps} />;
}
export default MyApp;

Um den Effekt zu sehen, kann man die Homepage ./pages/index.js geringfügig erweitern:

function HomePage() {
  return (
    <div id="main" className="container-fluid">
      <h1>Welcome to Next.js!</h1>;
    </div>
  );
}
export default HomePage;