小编Lee*_*kle的帖子

已解决 - TLDR；添加import '@fortawesome/fontawesome-svg-core/styles.css'到 _app.js / index.js 文件修复了该问题，并且 FontAwesome 按预期工作。我的问题是由于npx-create-next-app默认包含 purgeCSS 引起的，这反过来又删除了 FontAwesome 所需的样式。

我在我的 Next 应用程序中使用 FontAwesome。我按照FA 网站上的React 指南进行操作，图标 SVG 正在页面上输出。问题是，这些功能都不起作用，并且它们不能按照预期的方式随字体大小缩放。

我不想通过手动定位 SVG 并添加大小等方式将其组合在一起，因为它在响应能力方面并不理想。即，如果图标能够与随附的文本一起缩放，并且能够添加“旋转器”、“固定宽度”等，那就太好了。

奇怪的是，他们已经开始工作一两次，但后来又坏了，我似乎无法重现。

// package.json
"dependencies": {
    "@fortawesome/react-fontawesome": "^0.1.14",
    "@fortawesome/fontawesome-svg-core": "^1.2.34",
    "@fortawesome/pro-regular-svg-icons": "^5.15.2",
  }

// _app.js
import { library } from '@fortawesome/fontawesome-svg-core'
import { faHeart } from '@fortawesome/pro-regular-svg-icons'
library.add( faHeart )

// header.js
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

export default function Header() {

  return (
    <header>
      <FontAwesomeIcon icon={['far', …

我正在使用 React/Next 构建一个无头电子商务网站，并有一个[product].js动态路由，用于生成所有产品页面，使用getStaticPaths()和getStaticProps()生成页面。

我正在使用useState挂钩来[product].js管理数字输入（数量）和其他一些事情。

加载的第一个产品页面工作正常，但是当我转到其他产品页面时，它们使用第一个产品的相同状态。

有没有办法让状态在路由更改之间不持续？

通过一些挖掘，我发现这是 next 的一个问题，并且在他们的待办事项中。它本质上源于该组件没有密钥这一事实。这意味着同一动态路由上的路由之间的切换无法正确注册，并导致组件使用陈旧状态。

我发现的一个可能的解决方案是：

export async function getStaticProps({params}) {
    const props = await getData(params);

    // key is needed here
    props.key = data.id; 

    return {
        props: props
    }
}

这是我的实现，对我不起作用：

export default function ProductPage(props) {

  // this state doesn't reset between dynaic route changes
  const [quantity, setQuantity] = useState(1)

  return(
    ...
  )
}

export async function getStaticProps({ params }) {
  const slug = params.product
  const …