How to add Font Awesome to Next.js 13 project error Module not found

Question

I would like to add fontawesome to my nextjs 13 project. I'm trying to implement solution #3 which was asked a long time ago. I've tried the solution in the fontawesome documentation as well. I'm just starting out with nextjs and at first I followed the documentation, but that produced a Module not found error. Then I tried to modify these solutions to work with the new changes in version 13. For reference my project is using the /src/app/pages.tsx file structure. I tried adding /src/app/_app.tsx with the following content:

import { config, library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';
import '@fortawesome/fontawesome-svg-core/styles.css';
config.autoAddCss = false;
library.add(fas);

In my /src/app/page.tsx I added the import and tried to use fontawesome:

import Image from 'next/image'
import Link from "next/link";
import cardStyles from './styles/card.module.css'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

export default function Home() {

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
        <FontAwesomeIcon icon={['fab', 'linkedin']} />LinkedIn
    </main>
  )
}

and I keep getting the same error:

./src/app/page.tsx:4:0
Module not found: Can't resolve '@fortawesome/react-fontawesome'
  2 | import Link from "next/link";
  3 | import cardStyles from './styles/card.module.css'
> 4 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
  5 | 
  6 | 
  7 | export default function Home() {

I do have the package in my package.json and installed in my node_modules:

  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.4.0",
    "@fortawesome/free-brands-svg-icons": "^6.4.0",
    "@fortawesome/free-solid-svg-icons": "^6.4.0",
    "@fortawesome/react-fontawesome": "^0.2.0",

I even reinstalled it to be sure. I'm not sure how to troubleshoot this error. Could it be caused because the pages.tsx is being SSR instead of being done on client side?

Answer 1

in RootLayout

import "@fortawesome/fontawesome-svg-core/styles.css";
import { config } from "@fortawesome/fontawesome-svg-core";
config.autoAddCss = false;

then in Home page

import Image from "next/image";
import styles from "./page.module.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCheck } from "@fortawesome/free-solid-svg-icons";

export default function Home() {
  return (
    <main className={styles.main}>
      <FontAwesomeIcon
        icon={faCheck}
        className="fas fa-check"
        style={{ color: "red", fontSize: 64 }}
      />
      Check
    </main>
  );
}

Proof of work:

Linkedin icon does not exist inside @fortawesome/free-solid-svg-icons. to use linkedin

npm i @fortawesome/free-brands-svg-icons 

then in home page

import { faLinkedin } from "@fortawesome/free-brands-svg-icons";

export default function Home() {
  return (
    <main className={styles.main}>
      <FontAwesomeIcon
        icon={faLinkedin}
        style={{ color: "blue", fontSize: 64 }}
      />
      Linkedin
    </main>
  );
}