Issue1
I import css file in next js component but i can't see it in head tag in browser by inspecting page.
When you import css fie in ou component it not automatically add them in your "head" tag.
Usually, it optimizes CSS delivery by automatically code-splitting and lazy-loading stylesheets. This means that stylesheets are loaded when they're needed, improving performance.
I have implemented this practically in BSMS System.
Example
// components/Layout.js import Head from 'next/head'; import "../../public/styles/globalStyles.css"; const Layout = ({ children }) => { return ( <div className="layout"> <Head> {/* Global styles */} <link rel="stylesheet" href="/styles/globalStyles.css" /> </Head> {children} </div> ); }; export default Layout;
// pages/Home.js import Head from 'next/head'; const Home = () => { return ( <> <Head> {/* Page-specific styles */} <link rel="stylesheet" href="/styles/homeStyles.css" /> </Head> <div className="wrapper"> <h1>Home Page</h1> </div> </> ); }; export default Home;
Comments
Post a Comment