get Screensize on Load in App Component
Unanswered
West African Lion posted this in #help-forum
West African LionOP
Hi everyone. I'm fairly new to nextjs13 but familiar with react.
For an custom scss function, I expect the application to set an css variable --screensize onAppLoad().
In react I would simlpy do this in the App Component in a useEffect hook. With next13 I had the problem, that hooks are not allowed in the default files (which are per default ssr) and I would need to use the 'use client' directive. As I understood, the problem would be that every component that is included in a 'use client' component would automatically be an client component too!
I basicly just want to console.log my window size on application load with nextjs without making the whole application to a client side application.
Any tipps for me?
For an custom scss function, I expect the application to set an css variable --screensize onAppLoad().
In react I would simlpy do this in the App Component in a useEffect hook. With next13 I had the problem, that hooks are not allowed in the default files (which are per default ssr) and I would need to use the 'use client' directive. As I understood, the problem would be that every component that is included in a 'use client' component would automatically be an client component too!
I basicly just want to console.log my window size on application load with nextjs without making the whole application to a client side application.
Any tipps for me?
1 Reply
Even if layout server side rendering works, you can use client component in it.
import PanelLayout from "@/layouts/panel/PanelLayout";
import StartUpRun from "@/hooks/StartupRun";
import "bootstrap/dist/css/bootstrap.css";
import "@/styles/globals.css";
export default function PanelRoot({ children }) {
return (
<html lang="en">
<body className="container-fluid p-0">
<PanelLayout>
{children}
<StartUpRun />
</PanelLayout>
</body>
</html>
);
}
import PanelLayout from "@/layouts/panel/PanelLayout";
import StartUpRun from "@/hooks/StartupRun";
import "bootstrap/dist/css/bootstrap.css";
import "@/styles/globals.css";
export default function PanelRoot({ children }) {
return (
<html lang="en">
<body className="container-fluid p-0">
<PanelLayout>
{children}
<StartUpRun />
</PanelLayout>
</body>
</html>
);
}