Next.js with FortAwesome and SSR

React-fontawesome has added a section on how to get FontAwesome working with Next.js.

https://github.com/FortAwesome/react-fontawesome#nextjs

Create an ./pages/_app.js file in your project

import React from 'react'
import App, { Container } from 'next/app'
 
import { config } from '@fortawesome/fontawesome-svg-core'
import '@fortawesome/fontawesome-svg-core/styles.css' // Import the CSS
config.autoAddCss = false // Tell Font Awesome to skip adding the CSS automatically since it's being imported above
 
class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props
    return <Component {...pageProps} />
  }
}
 
export default MyApp

or using a function component:

import { config } from '@fortawesome/fontawesome-svg-core'
import '@fortawesome/fontawesome-svg-core/styles.css' // Import the CSS
config.autoAddCss = false // Tell Font Awesome to skip adding the CSS automatically since it's being imported above

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

There are definitely a few ways to take this problem. I solved it in my project by importing the icons I needed directly into my React app. So no Font Awesome libraries sit on the client-side, just the rendered SVGs.

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faAdobe } from '@fortawesome/free-brands-svg-icons/faAdobe'

...

return ( 
  <FontAwesomeIcon icon={faAdobe} />
)

Font Awesome also provides a page to discuss other methods: server-side-rendering