My upcoming project involves server-side rendering with Next.js, and I plan to incorporate Bootstrap into it. After some research, I decided to import Bootstrap into my root layout like this:
import { Inter } from "next/font/google";
import "./globals.css";
import { useEffect } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
const inter = Inter({ subsets: ["latin"] });
export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({ children }) {
useEffect(() => {
if (typeof window !== "undefined") {
require("bootstrap/dist/js/bootstrap.min.js");
}
}, []);
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
);
}
However, I encountered a warning stating that useEffect can only be used in a Client Component with the "use client" mode.
You're importing a component that needs useEffect. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.
Learn more: https://nextjs.org/docs/getting-started/react-essentials
Since I want the web application to render on the server side, I am hesitant to add the "use client" mode in the root component. How can I effectively import the JavaScript library without compromising server-side rendering?