Replies: 1 comment
-
|
Hey! 👋 Great question — I’ve integrated UIKit with a Next.js 15 App Router project recently, and here’s what worked well for me: ✅ Step 1: Install UIKitnpm install uikit
Step 2: Import UIKit CSS in layout.tsx
// app/layout.tsx
import "uikit/dist/css/uikit.min.css";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
// app/layout.tsx
import "uikit/dist/css/uikit.min.css";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
import Script from "next/script";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
{children}
<Script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js"
strategy="afterInteractive"
/>
<Script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit-icons.min.js"
strategy="afterInteractive"
/>
</body>
</html>
);
}
Or you can load it locally if preferred:
<Script src="/uikit.min.js" strategy="afterInteractive" />
💡 Tips & Best Practices
Avoid importing UIKit JS directly (e.g., import "uikit/dist/js/uikit.min.js") — it can cause hydration or SSR issues.
Use next/script with strategy="afterInteractive" to ensure JS loads after hydration.
For components like modals or dropdowns, use useEffect() to safely interact with the DOM on the client side.
Hope this helps and makes your UIKit + Next.js setup a little easier! 🙌 |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
Summary
I’m working on a Next.js 15 project that uses the new
/srcfolder routerI want to integrate UIKit properly, including JS parts.
Could you please provide guidance or best practices on:
layout.tsx(usingnext/script)?I want to make sure I do the integration cleanly and avoid pitfalls related to SSR and hydration.
Thank you very much for your help!
Additional information
No response
Example
No response
Beta Was this translation helpful? Give feedback.
All reactions