Fomantic UI + NextJS (Version 13) #2836
-
|
Hello Everyone, My Goal: Fomantic UI with NextJS (version 13) I have been scowering the web and fumbling through my own attempts to get Fomantic UI and NextJS to work together. Everything I have come across for getting these two to work together keeps referencing Next versions 12 or earlier, but I am wanting to use the latest version (13 at time of post). I have been able to get all the way to having components to display correctly on the webpage but have failed to get any functionality to work. Here is my bit of started code I've got going and what I've done. I'm hoping to have a post of how I got this to work (when I eventually do) for others who may be giving this a go. Bash commands I've done, anything with npm init next-app <app-name>
cd <app-name>
npm i --save-dev fomantic-ui
cd node_modules/fomantic-ui
npx gulp install
cd ../../public/semantic
npx gulp build
cd ..
curl https://code.jquery.com/jquery-3.7.0.min.js --output jquery-3.7.0.min.jsThat is how I setup Fomantic-UI import Script from 'next/script'
import './globals.css'
import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] })
export const metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
export default function RootLayout({ children }) {
return (
<html lang="en">
<head>
<Script src='/jquery-3.7.0.min.js'></Script>
<Script src='/semantic/dist/semantic.min.js'></Script>
<link rel='stylesheet' href='/semantic/dist/semantic.min.css' />
</head>
<body className={inter.className}>{children}</body>
</html>
)
}Then I took the menu code from the first sample on this page https://fomantic-ui.com/collections/menu.html#menu added it to a layout in a folder called workspace so I could access it at localhost:3000/workspace. The menu rendered correctly, but when I go to click on the wrench icon, nothing happens. Is there anything I've missed or should do differently for the functionality to work as expected? I have looked at these two sites with no success System: Windows 11 |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
|
Ooop, I found a way forward. Looks I need a better understanding of the 'use client' directive. How I got this to work: Also I removed the two script tags from RootLayout section. Finally switched all the divs that I copied from the fomantic-ui website to the react component from Semantic UI React. |
Beta Was this translation helpful? Give feedback.
Ooop, I found a way forward.
Looks I need a better understanding of the 'use client' directive.
How I got this to work:
npm install --save semantic-ui-reactThen in any component that I want to have a component from semantic ui react, make sure to have the 'use client' directive at the top of the component (so far just have it in the layout.js file but I presume it would also work in the page.js file?)
Also I removed the two script tags from RootLayout section.
Finally switched all the divs that I copied from the fomantic-ui website to the react component from Semantic UI React.