Next.js & Fluent UI: Link

While working on a React-based application, I needed to use a link for the application title. It’s a relatively easy task. However, there may be potential issues or confusion to encounter.

These are notes on using the Fluent UI Link component with the Next.js Link component.

Use Link component

Next.js provides Link component. FluentUI provides Link component.

To use both, wrap the Fluent UI link with the Next.js one:

// Import the NextLink component from the "next/link" library
import NextLink from "next/link";
// Import the Link component from the "@fluentui/react-components" library
import { Link } from "@fluentui/react-components";

// Define the default exported function called Title.
export default function Title() {
	// Set the siteTitle variable with the value "Web Application"
  const siteTitle = "Web Application";
	
  // Return the JSX containing the main heading element with nested link components.
  return (
   <h1>
     <NextLink href="/" passHref legacyBehavior>
       <Link>{ siteTitle }</Link>
     </NextLink>
   </h1>
  );
}

There are few things to note in the code above:

1. Instead of Link, use NextLink to import Next.js link component.
2. The NextLink component includes passHref and legacyBehavior as props. They are required for proper function.
3. The Link component does not include the href property. Yet, it is rendered as <a> tag instead of <button> because of the properties from parent component.

Use both components to get the linking benefits of the Next.js Link component along with the styling benefits of the FluentUI link component.

Use A tag

It is possible to use <a> element via Link component from Next.js:

// Import the Link component from the "next/link" library
import Link from "next/link";

// Define the default exported function called Title.
export default function Title() {
  // Return the JSX containing the main heading element with a single nested link component.
  return (
   <h1>
     <Link href="/">Web Application</Link>
   </h1>
  );
}

The code above outputs a heading element with an <a> tag, using only the Link component from Next.js. Everything works as expected.

However, issues arise when attempting to modify the styles of the link HTML element.

Custom styles

By default, the link element will have an underline style when using the Fluent UI React library. The underline is beneficial, as it helps indicate a link.

However, there might be cases where a link without an underline is preferred, at least in its initial state.

It is possible to set custom styling via makeStyles function from FluentUI:

// Import the makeStyles function from the "@fluentui/react-components" library
import { makeStyles } from "@fluentui/react-components";

// Create a custom 'useStyles' hook to define the styling for the component.
const useStyles = makeStyles({
  siteTitle: {
    "& > a": {
      textDecoration: "none",
    },
  }
});

However, FluentUI will output an error in console log:

@griffel/react: You are using unsupported shorthand CSS property "textDecoration".

It looks like makeStyles() does not support text decoration in styles definitions. One way to solve the problem is by using global styles, which can be added, for example, to the globals.css file.