我在下一个 js 13 中使用新的应用程序目录，当使用 bootstrap 下拉菜单时，只有 UI 可以工作，bootstrap 的 js 功能在其中不起作用。
我尝试在layout.tsx中导入js文件，但它抛出了这个错误=>
文档未定义
布局.tsx
import 'bootstrap/dist/js/bootstrap.min.js';
import './globals.css';
import './styles/index.scss';
export const metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang='en'>
<body>{children}</body>
</html>
);
}
我发现使用“动态”函数可以始终导入 Bootstrap CSS，而仅在客户端的 Next.js 13 的layout.tsx 文件中导入 Bootstrap JS：
import './globals.css'
import { Inter } from 'next/font/google'
import 'bootstrap/dist/css/bootstrap.css';
// import '../styles/globals.css';
import '@fortawesome/fontawesome-free/css/all.min.css';
import dynamic from 'next/dynamic';
const DynamicBootstrap = dynamic(
() => require('bootstrap/dist/js/bootstrap.min.js'),
{ ssr: false }
);
const inter = Inter({ subsets: ['latin'] })
export const metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
)
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
