Bootstrap und Sass auf dem Next.js Server in der Google-Cloud installieren und verwenden

Next.js ist für den Einsatz von Sass vorbereitet, mag aber Bootstrap nicht und empfiehlt als CSS-Frameworkt tailwind. Tailwind hat, im Gegensatz zu Bootstrap, keine fertigen Komponenten und kommt so ohne Javascript aus.
Beim Server-Rendering von Next.js ist kein Windows-Objekt vorhanden und das führt das zu Problemen mit Javascript. Abhilfe schafft React Bootstrap, das kommt ohne Javascript aus. React-Bootstrap bietet nicht alle Funktionen von Bootstrap. Ich setze es ungern ein und möchte hier kurz zeigen, wie man Bootstrap (mit Sass) auf dem Next.js-Server ohne Einschränkung nutzen kann.

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

npm install bootstrap @popperjs/core
npm install --save-dev sass

und erstellen im neuen Verzeichnis styles die Datei global.scss mit folgendem Inhalt:

@import '../node_modules/bootstrap/scss/bootstrap'

Zum Importieren des css in die Website muss die layout.js-Datei um folgenden import ergänzt werden:

import '../styles/global.scss';

Damit sind Sass und der css-Teil von Bootstrap eingerichtet.

Delikater ist der Javascript-Teil von Bootstrap. Es gibt die Möglichkeit, die benötigten Pakete nur auf der Client-Seite zu laden. Hierfür erstellen ein neues Verzeichnis components mit der Komponente installBootstrap.js .

'use client';

import { useEffect } from 'react';

export default function InstallBootstrap() {
  useEffect(() => {
    import('@popperjs/core/dist/esm/popper.js');
    import('bootstrap/dist/js/bootstrap.bundle.min.js');
  }, []);
  return null;
}

installBootstrap.js

Laden läßt sich dies Komponente in der Datei layout.js, die dann folgenden Inhalt hat:

import '../styles/global.scss';
import InstallBootstrap from '../components/installBootstrap';

export default function RootLayout({ children }) {
	return (
		<html lang="en">
			<InstallBootstrap />
			<body>{children}</body>
		</html>
	)
}

installBootstrap.js

Damit ist auch Boostrap voll eingebunden.