Tài liệu js/bootstrap tiếp theo không được xác định

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 bootstrap

Thê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 MyApp

Tạ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 Primary

Tuy 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

Để override mặc định Document, tạo file

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

Đâ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

Tại sao tài liệu không được xác định trong nextjs?

Tại sao cửa sổ không được xác định trong Nextjs?

Nextjs có sử dụng bộ định tuyến phản ứng không?

Tôi có thể sử dụng useEffect trong JS tiếp theo không?