Next.js: Semantic-UI-React <> Next.js

[Maxhodges]

has anyone worked out a good way to get Semantic-UI-React up and running in Next.JS? SUI-React is a stellar UI framework. I'm just getting started with Next.js but would really like to have Semantic-UI-React components available.

[impronunciable]

@Maxhodges this is a working project https://sui-zyxmuhrbiv.now.sh/ the code is under https://sui-zyxmuhrbiv.now.sh/_src/?f=pages%2Findex.js

[corydeppen]

Curious if anyone has tried using Link within a SUI Menu. Since Link needs an a inside it, I tried including the Menu.Item as a child of Link, but that renders two anchors for each menu item. I've been trying to avoid using click handlers and the imperative approach of Router.push(), but it seems that may be the only way to go.

[arunoda]

@corydeppen currently we expect to have a a inside link.
For SUI and others, you could create a custom link component using Router.push().
That's our recommended way to do it.

next/link is a helping components, which is okay for 80% of use cases. For others, we have to use imperative API.

[malixsys]

Old comment but this worked fine for me:

              <Menu.Item>
                <Link prefetch href="/my/login">
                  <Button inverted labelPosition="left" fluid as="h2" content="Login" icon="sign in" />
                </Link>
              </Menu.Item>

or maybe the use of as="a" can help...

[ryanmeisters]

For future googlers, there is now a with-semantic-ui example

[corydeppen]

Unfortunately, the with-semantic-ui example doesn't utilize the Link component, likely because it's still impossible to use consistently with Semantic UI. This is the closest I've gotten:

<Link href="/contact">
  <Menu.Item as="a">Contact</Menu.Item>
</Link>

Although it's functional, the generated markup doesn't include the href attribute, likely because it's stuck on the Link wrapper instead of on the anchor where it belongs.

You could also do something like this, which generates the href attribute as expected but wraps the anchor in a div, which breaks the styling if it's a Dropdown.Item.

<Menu.Item
  content={
    <Link href="/about">
      <a>About</a>
    </Link>
  }
/>

Bottom line for me is this is way too much work to get two libraries to work together. Maybe it will become more feasible to use these two if/when Next adopts React Router instead of using the odd Link component that has to wrap an anchor with no href. Situations like this is what makes After.js appealing to me.

[joshuamanns]

The best solution at the moment is to invert the relationship between the <Menu.Item /> and the <Link /> and forgo DRY code by repeat the href prop. The following code will yield proper client side SPA style rendering and include the href prop while maintaining the styles from Semantic UI css.

const NavLink = ({ data }) => (
  <Link href={data.location}>
    <Menu.Item as="a" href={data.location}>{data.title}</Menu.Item>
  </Link>
);

[malixsys]

Do you need a?
This works fine:

<Menu.Item>
  <Link href="/login">
    <Button inverted labelPosition="left" fluid as="h2" content={`Login`} icon="sign in" />
   </Link>
</Menu.Item>

[screid123]

FWIW: There is a passHref prop on Next's Link component (see "Forcing the Link to expose href to its child" in the docs):

<Menu>
    <Link href="/" passHref>
        <Menu.Item as="a">Home</Menu.Item>
    </Link>
</Menu>

Results in:

<div class="ui menu">
    <a href="/" class="item">Home</a>
</div>

[k8martian]

Currently using 'next/link' works fine, even with the semantic ui example in next repo.

import Link from 'next/link'

<Link href="/" passHref>
    <Menu.Item 
        name="home"
        active={activeItem === "home"} 
        onClick={this.handleItemClick}
    /> 
</Link>

but the text highlight not working, guess need to customize active myself.