How to Create a Custom Next.js Link Component With Bootstrap Icon

Next.js's next-link component is great for single-page web apps. Using next-link is great for speeding up navigation because instead of reloading the entire page, just the viewport is loaded with the new component(s).

I'm a regular user of react-bootstrap and I wanted a way to preceed my links with an icon. So, I thought I'd share with you a custom component I use regularly in my nav components.

Here's my custom component:

import Link from "next/link";
import * as Icon from 'react-bootstrap-icons';
export default function IconLink(props) {
    const IconInc = Icon[props.icon];
    return (
        <Link href={props.href} passHref>
            <a style=>
                <IconInc style= />
                <div style=>
                    {props.children}
                </div>
            </a>
        </Link>
    );
}

Now we can use this component in our nav components:

import IconLink from "./iconLink";
import { Stack } from 'react-bootstrap'
export default function Nav() {
    return (
        <Stack gap={3}>
            <IconLink href="/" icon="HouseFill">Home</IconLink>
            <IconLink href="/forum" icon="CardList">Forum</IconLink>
        </Stack>
    );
}