Bài viết này hướng dẫn bạn cách sử dụng đúng Bootstrap 5 (phiên bản mới nhất tại thời điểm viết bài) trong Next. dự án js
Đến cuối bài viết này, chúng ta sẽ có thể
- Sử dụng tất cả các lớp CSS do Bootstrap 5 cung cấp ở bất cứ đâu bạn muốn
- Sử dụng tất cả chức năng Javascript do Bootstrap 5 cung cấp mà không gặp lỗi
Không chần chừ gì nữa, chúng ta hãy làm bẩn tay
Các bước
cài đặt
Bạn có thể thêm Bootstrap 5 vào Next. js bằng cách thực hiện lệnh sau
npm i bootstrapThêm CSS
Để sử dụng các kiểu từ Bootstrap, chúng ta cần nhập thủ công tệp CSS của nó vào pages/_app. js (tạo một cái nếu nó không tồn tại)
import 'bootstrap/dist/css/bootstrap.css'; // Add this line import '../styles/globals.css' function MyApp({ Component, pageProps }) { return } export default MyAppTại thời điểm này, bạn đã sẵn sàng để sử dụng các tính năng CSS của Bootstrap như thế này
Button PrimaryTuy nhiên các thành phần cần Javascript như dropdown, crash, accordion, carousel… sẽ KHÔNG hoạt động bình thường và sẽ gây ra lỗi ngay cả khi bạn import file Javascript của Bootstrap như thế này
import "bootstrap/dist/js/bootstrap";Để khắc phục điều này, chúng ta phải làm thêm một bước
Sử dụng các tính năng Javascript
Bootstrap chỉ sử dụng một số đối tượng phía máy khách (cửa sổ, tài liệu) để xử lý các sự kiện. Mặt khác, Tiếp theo. js hiển thị ứng dụng ở cả phía máy chủ và phía máy khách. Không có cửa sổ hoặc tài liệu nào ở phía máy chủ;
document is not defined windows is not defiendĐể tránh các lỗi đã đề cập, chúng tôi phải đảm bảo rằng các đối tượng cửa sổ và tài liệu chỉ được sử dụng ở phía máy khách. Điều đó có thể được thực hiện với hook useEffect
// Place this in the pages/_app.js file useEffect(() => { import("bootstrap/dist/js/bootstrap"); }, []);_ứng dụng hoàn chỉnh. tập tin js
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 ; } export default MyApp;Để rõ hơn, hãy xem ví dụ đầy đủ bên dưới
ví dụ
Xem trước
Trong bản demo này, chúng tôi có một số nút đẹp được tạo bằng Bootstrap. Nút chọn thả xuống là thứ cần Javascript để hoạt động
Ghi chú. Kế tiếp. js 13 giới thiệu thư mục app/ (beta). Thư mục mới này có hỗ trợ bố cục, tuyến đường lồng nhau và sử dụng Cấu phần máy chủ theo mặc định. Bên trong app/, bạn có thể sửa đổi các thẻ html và body ban đầu bằng cách sử dụng bố cục gốc
Tìm hiểu thêm về việc áp dụng dần dần app/
Một Document tùy chỉnh có thể cập nhật và các thẻ được sử dụng để hiển thị Trang. Tệp này chỉ được hiển thị trên máy chủ, do đó, các trình xử lý sự kiện như onClick không thể được sử dụng trong 0
Để override mặc định Document, tạo file 2 như hình bên dưới
import { Html, Head, Main, NextScript } from 'next/document' export default function Document() { return ( ) }Đoạn mã trên là mặc định Document được thêm bởi Next. js. Thuộc tính tùy chỉnh được phép làm đạo cụ. Ví dụ: chúng tôi có thể muốn thêm 4 vào thẻ
Đây là cách khắc phục “lỗi tham chiếu. lỗi tài liệu không được xác định” mà bạn có thể gặp phải trong Node. js hoặc bằng công cụ như Next. js
document là một đối tượng được trình duyệt cung cấp và không có sẵn trong môi trường JavaScript phía máy chủ
Tôi mô tả đối tượng document là chi tiết trong phần mở rộng của tôi
với nút. js nói riêng, không có cách nào để giải quyết vấn đề - bạn phải tìm vị trí cụ thể mà document được sử dụng và xem lại mã để tìm ra lý do tại sao bạn truy cập đối tượng document
Bạn đang chạy mã giao diện người dùng trong môi trường phụ trợ
Trong Tiếp theo. js, bạn có thể khắc phục sự cố này bằng cách gói mã bạn chạy trong điều kiện
Mã có thể đang chạy trong cả hai trường hợp - giao diện người dùng, khi bạn điều hướng đến một trang bằng liên kết và phía máy chủ nếu bạn yêu cầu phía máy chủ vào trang của mình, chẳng hạn bằng cách chạy getServerSideProps()
Trong trường hợp này, bạn có thể giới hạn tham chiếu đến document thành một điều kiện để kiểm tra xem đối tượng window có sẵn hay không, như thế này
if (typeof window !== 'undefined') { //here `window` is available, so `window.document` (or simply `document`) is available too }Và điều này sẽ khắc phục sự cố của bạn, vì bạn chỉ chạy mọi thứ bên trong điều kiện trong môi trường trình duyệt