Font Awesome disables its own CSS injection so icons never flash full-size on first load

The root layout has two lines that solve a problem most Next.js sites with Font Awesome icons never fix. The first line is config.autoAddCss equals false. The second is an import of fontawesome-svg-core slash styles.css. Without those two lines, Font Awesome injects a style tag into the document at runtime. On the server, the icon renders as an inline SVG with no CSS applied. The SVG has an intrinsic size based on the viewBox — often several hundred pixels wide. When the browser receives the server-rendered HTML, it paints those oversized SVGs immediately. A fraction of a second later, the Font Awesome runtime JavaScript executes, injects the style tag, and the icons snap down to their intended size. The visual result is a flash — every icon on the page appears enormous for one frame, then shrinks. It looks broken. The fix is to load the CSS at build time instead of runtime. The manual import of styles.css tells Next.js to include Font Awesome's sizing and positioning rules in the page's CSS bundle. When the browser receives the HTML, the stylesheet is already parsed and the icons render at their correct size from the first paint. Setting autoAddCss to false tells the Font Awesome runtime not to inject its own style tag since the CSS is already present. Two lines of configuration. One import, one boolean. The result is that the service card icons on the homepage, the navigation icons in the mobile menu, the checkmark in the checkout progress bar, and every other Font Awesome icon across the site renders at the right size on the first frame. No flash, no layout shift, no runtime style injection. The same two lines appear in the Font Awesome documentation for server-side rendering but they are easy to miss if you are following a quick-start guide that assumes client-side rendering only.