Cách dùng Bootstrap 5 chính xác trong Next.js

Bài viết này sẽ cho bạn biết cách dùng Bootstrap 5 chính xác trong dự án Next.js. Kết thúc bài viết, bạn có thể:

• Dùng tất cả các class CSS được cung cấp bởi Bootstrap 5 ở mọi vị trí mong muốn.
• Dùng tất cả tính năng Javascript của Bootstrap 5 mà không gặp lỗi.

Hướng dẫn từng bước dùng Bootstrap 5 trong Next.js

Cài đặt

Bạn có thể thêm Bootstrap 5 vào dự án Next.js bằng cách triển khai lệnh sau:

npm i bootstrap

Thêm CSS

Để dùng các kiểu trên Bootstrap, bạn cần tự tay nhập file CSS của nó vào tệp pages/_app.js (tạo mới nếu chưa có):

import 'bootstrap/dist/css/bootstrap.css'; // Add this line
import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

Tại thời điểm này, bạn đã sẵn sàng dùng các tính năng CSS của Bootstrap, như thế này:

<button className="btn btn-primary m-3">Button Primary</button>

Tuy nhiên, các phần tử cần Javascript như dropdown, collapse, accordion, carousel… sẽ không hoạt động nên gây lỗi ngay cả khi bạn nhập file Javascript của Bootstrap như thế này:

import "bootstrap/dist/js/bootstrap";

Để khắc phục vấn đề, bạn cần làm thêm một bước.

Dùng các tính năng Javascript

Bootstrap dùng một số đối tượng chỉ bên phía client (window, document) để xử lý các sự kiện. Mặt khác, Next.js kết xuất ứng dụng ở cả hai bên server và client. Không có cửa sổ, tài liệu ở bên server, vì thế, bạn có thể thấy một số thông báo lỗi như sau:

document is not defined
windows is not defiend

Để tránh các lỗi trên, bạn phải đảm bảo đối tượng window và document chỉ được dùng ở bên client. Bạn có thể thực hiện việc đó với hook useEffect:

// Place this in the pages/_app.js file
useEffect(() => {
    import("bootstrap/dist/js/bootstrap");
}, []);

File _app.js hoàn thiện như sau:

import 'bootstrap/dist/css/bootstrap.css'; // Add this line
import '../styles/globals.css';

import { useEffect } from 'react';

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    import('bootstrap/dist/js/bootstrap');
  }, []);

  return <Component {...pageProps} />;
}

export default MyApp;

Để hiểu rõ hơn, hãy cùng xem ví dụ bên dưới.

Ví dụ cách dùng Bootstrap 5 trong Next.js

Ở bản demo này, bạn thấy có một số nút bấm đẹp mắt với Bootstrap. Nút bấm chọn menu thả xuống là nhân tố cần Javascript để hoạt động.

Code:

1. pages/_app.js:

import "bootstrap/dist/css/bootstrap.css";
import "../styles/globals.css";

import { useEffect } from "react";

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

  return <Component {...pageProps} />;
}

export default MyApp;
// KindaCode.com

2. pages/index.js:

// KindaCode.com
export default function Home() {
  return (
    <div className="container p-3">
      <button className="btn btn-primary m-3">KindaCode.com</button>
      <button className="btn btn-warning m-3">Hello</button>

      <div className="dropdown m-3">
        <button
          className="btn btn-secondary dropdown-toggle"
          type="button"
          data-bs-toggle="dropdown"
          id="dropdownMenuButton1"
          aria-expanded="false"
        >
          Dropdown button
        </button>
        <ul className="dropdown-menu" aria-labelledby="dropdownMenuButton1">
          <li>
            <a className="dropdown-item" href="#">
              Option 1
            </a>
          </li>
          <li>
            <a className="dropdown-item" href="#">
              Option 2
            </a>
          </li>
          <li>
            <a className="dropdown-item" href="#">
              Option 3
            </a>
          </li>
        </ul>
      </div>
    </div>
  );
}

Trên đây là cách dùng Bootstrap 5 trong Next.js. Hi vọng bài viết hữu ích với các bạn.