Next.js 使用 FortAwesome 和 SSR

Question

我正在构建一个 Next.js 应用程序并寻找一个与其 SSR 范例一起工作的图标包。

尝试了几个库后，我现在正在使用 FortAwesome/react-fontawesome，看起来很有前途。

问题是当页面加载时图标很大（无样式），然后突然它们的样式正确了。我正在尝试弄清楚如何让这些设置为服务器端样式。

我看到人们 talk about 导入了 FortAwesome 提供的样式表：

import '@fortawesome/fontawesome-svg-core/styles.css';

但是，我不确定应该在哪个文件中完成此操作，而且，当我尝试此操作时，Next 抱怨：

[ error ] ./node_modules/@fortawesome/fontawesome-svg-core/styles.css 1:8 Module parse failed: Unexpected token (1:8) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file

我看过CSS plugin，但这也好像是一个转移话题。

如何使用 Next.js 在服务器上设置此包中的超赞字体图标？

Answer 1

我打算把这个作为答案，因为这是一种方式，但是我觉得有更好的解决方案，所以我不会接受这个.

我创建了一个 static/css 文件夹，然后复制了问题中引用的 css 文件

cp node_modules/@fortawesome/fontawesome-svg-core/styles.css static/css/fortawesome.css

然后在 _document.js 我通过 link 标签加载文件：

<link
    rel="stylesheet"
    type="text/css"
    href="/static/css/fortawesome.css"
/>

我认为这是权宜之计。一个明显的问题是，当底层库更新时，我需要手动复制最新版本的 css 文件。

Answer 2

以下是我迄今为止在我的项目中尝试解决此问题的方法：

安装@zeit/next-css、@zeit/next-sass[我也需要sass。]
安装 fontawesome 包并导入 CSS

@zeit 包的安装

安装所需的包：

npm i --save @zeit/next-css
npm i --save @zeit/next-less
npm i --save @zeit/next-sass

然后更新 next.config.js 文件，例如下面将支持 CSS 导入的文件，这修复了加载时加载正确样式的问题：

const withCSS = require('@zeit/next-css')
const withLess = require('@zeit/next-less')
const withSass = require("@zeit/next-sass");
module.exports = withLess(withCSS(withSass({
    webpack(config, options) {
        config.module.rules.push({
            test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
            use: {
                loader: 'url-loader',
                options: {
                    limit: 100000
                }
            }
        });
        return config
    }
})));

安装 fontawesome 包并导入 CSS

安装所需的包：

npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/react-fontawesome

然后您可以在页面中使用以下代码扩展位于 pages 目录下的 React.Component：

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons'
import '@fortawesome/fontawesome-svg-core/styles.css';
library.add(fas);

那么你可以这样使用字体：

<FontAwesomeIcon icon={["fas", "user-tie"]} />

我可能错了。

Answer 3

我遇到了同样的问题，并通过手动将 Font Awesome 的 CSS 插入到我知道会正确获得 SSR 的样式中来修复它。

我使用 styled-components，它很容易通过 Next.js SSR 进行设置，我是这样操作的：

import { createGlobalStyle } from "styled-components";
import { config, dom } from "@fortawesome/fontawesome-svg-core";

// Prevent FA from adding the CSS
// (not that it was doing it in the first place but might as well)
config.autoAddCss = false;

// Add the FA CSS as part of Global Styles
const GlobalStyles = createGlobalStyle`
    ${dom.css()}
`;

Answer 4

肯定有几种方法可以解决这个问题。我在我的项目中通过将我需要的图标直接导入我的 React 应用程序解决了这个问题。所以客户端没有 Font Awesome 库，只有渲染的 SVG。

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

...

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

Font Awesome还提供了一个页面来讨论其他方法：server-side-rendering

Answer 5

React-fontawesome 添加了关于如何让 FontAwesome 与 Next.js 一起工作的部分。

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

在您的项目中创建一个 ./pages/_app.js 文件

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

或使用函数组件：

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} />
}

Next.js 使用 FortAwesome 和 SSR

Next.js with FortAwesome and SSR

javascript

css

font-awesome

server-side-rendering

next.js