logo

Přidání Bootstrap do Next.js

Podle mého názoru Bootstrap je stále OG rámců CSS. Miluji to kvůli jeho jednoduchosti a hotovým komponentům, jako je Navbar, karty, modály a mnoho dalšího. Dokonce i s Tailwindem, Chakra tam Bootstrap stále používá mnoho vývojářů frontendu. Nyní je Bootstrap s verzí 5 ještě výkonnější.

Přidání Bootstrapu do vašeho Reactu nebo základního HTML souboru byl jednoduchý a přímočarý úkol. Instalaci spustíte pomocí npm nebo stačí přidat odkazy CDN do souboru HTML. V Next.js však tento proces není tak jednoduchý .

Bootstrap lze do vaší aplikace Next.js přidat dvěma různými způsoby. Vyberte si ten, který se vám líbí

  1. Pomocí sítě CDN
  2. Instalace pomocí NPM

Použití odkazů CDN:

Bootstrap 5 se zbavil jquery takže musíme přidat pouze JS, Popper a CSS.

Pokračujte a otevřete svůj projekt Next.js ve svém oblíbeném editoru kódu.

Next.js nyní nemá index.html soubor na rozdíl od běžné aplikace reagovat, kde můžete přidat značky Link a Script. Zde tedy musíme použít _app.js a _document.js soubory. Jedná se o vlastní komponenty aplikace a dokumentu, které se používají k inicializaci stránek. _app.js je již ve vašem souboru vytvořen, stačí vytvořit _document.js vedle _app.js ve složce stránek. Nyní vložte následující kód do _document.js soubor. 

import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html>
      <Head>
        <link
          href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
          crossOrigin="anonymous"
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Jak můžete vidět, přidali jsme zde šablonu stylů Bootstrap. <Head /> je vlastní komponenta od Next.js, která se zkompiluje až na <head/> našeho prostého HTML. Pokud máte jiné styly CSS nebo externí odkazy na ikony, můžete je sem přidat, jak jsem ukázal v příkladu níže. 

import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html>
      <Head>
        <link
          href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
          crossOrigin="anonymous"
        />
                {* Bootstrap Icons *}
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"></link>
                    {* Google Fonts *}
                <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
        <link href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"></link>
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Nyní můžete svou aplikaci otestovat pomocí několika jednoduchých tříd Bootstrap. Bude fungovat bez problémů. Ale komponenty Bootstrap jako Modal, Navbar atd. nebudou fungovat, protože vyžadují JS a Popper a ještě jsme je neimportovali.

Nemůžeme sem přidat skript Bootstrap, který obsahuje JS a Popper v _document.js soubor, protože Next.js nám doporučuje přidávat pouze šablony stylů do vlastní komponenty dokumentu a všechny externí skripty by měly být přidány pouze do vlastní komponenty aplikace. Považujte to za osvědčený postup.

Pokud si chcete o tématu přečíst více, podívejte se na jejich dokumentaci zde.

stylesheets-in-head-component | Next.js

Změňte _app.js kód k tomuto. 

import Head from "next/head";
import Script from "next/script";
function MyApp({ Component, pageProps }) {
  return (
    <>
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
      </Head>

      <Script
        src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
        crossOrigin="anonymous"
      />
      <Component {...pageProps} />
    </>
  );
}
export default MyApp;

A vše hotovo, nyní můžete začít používat Bootstrap ve svém projektu!

Instalace Bootstrap pomocí NPM

Druhým způsobem instalace bootstrapu je použití npm (Správce balíčků uzlů). Otevřete terminál ve svém projektu a nainstalujte Bootstrap 5 pomocí tohoto příkazu. 

npm i bootstrap

Jakmile je bootstrap nainstalován, musíme importovat Bootstrap CSS v _app.js . Importujeme komponentu CSS v aplikaci, protože komponenta aplikace se vykresluje pro každou stránku. Nemusíte tedy importovat CSS na každou stránku. 

import 'bootstrap/dist/css/bootstrap.css';

Nyní můžete pokračovat a používat funkce CSS bootstrapu, ale nebudete moci používat JS, protože jsme jej ještě neimportovali!

Import JS není jednoduchý jako CSS. Pokud přímo importujeme JS jako CSS, narazíme na chybu, která říká, že okno a dokument nejsou definovány. Je to proto, že okno a dokument jsou objekty na straně klienta, zatímco Next.js vykresluje HTML na straně klienta i na straně serveru. Abychom se vyhnuli takovým chybám, budeme dynamicky importovat JS pomocí useEffect() háček. Podívejte se na níže uvedený kód. 

useEffect(()=>{
        import("bootstrap/dist/js/bootstrap");
},[])

Přidejte následující kód do _app.js soubor. Nyní budete importovat JS pouze tehdy, když je stránka načtena v prohlížeči.

To vše bylo o přidání Bootstrapu do vaší aplikace Next.js.
Děkuji za přečtení! Pokud máte rádi takový obsah, nezapomeňte mě sledovat na twitteru. Pravidelně zveřejňuji obsah o vývoji webu a programování.