I have a next app using Bulma, and a ServiceProvider. I import bulma and this provider at the top level of the application. This would be in my layout.js file, however the changes there don’t persist. When you go to a subpage bulmas css stops working and the code errors saying my useSession isnt properly wrapped in the provider.
This is my layout.js
import { Inter } from "next/font/google";
import "bulma/css/bulma.min.css";
import Provider from "@/components/Provider";
const inter = Inter({ subsets: ["latin"] });
export const metadata = {
title: "BD-Util",
description: "",
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={inter.className}>
<Provider>
{children}
</Provider>
</body>
</html >
);
}
This is my page.js
import Navbar from "@/components/Navbar";
export default function Home() {
return (
<>
<section className="hero is-fullheight">
<Navbar />
<div className="hero-body is-flex-direction-column is-justify-content-center">
<h1 className="title">BD-Util</h1>
</div>
</section>
</>
);
}
Ill include a screenshot of my apps structure as well.
App Folder Structure
New contributor
Connor Baltich is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.