出于某种原因，我的图标无法正常工作。
我将 favicon 保存为 favicon.ico 在 /public 目录中，并在<Head>我的页面（位于 /pages 目录中）中引用它，但无济于事。
任何人都可以帮忙吗？
——
这是我的 index.js 代码：
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
dir/pages/index.js
dir/public/favicon.ico
我在 React/Next.js 中为我的组件使用 SCSS 模块，但我不知道如何导入 kebab-case 类。
目前，我只是在 camelCase 中编写我所有的 SCSS 类，但这并不理想，因为这意味着我无法使用 SCSS 级联。
（我仍在学习 React，因为我自己制作动态组件不是很擅长，所以我现在坚持使用 React Strap。）
本质上，我想写
。公司标志
代替：
。公司标志
编辑：className={styles['company-logo']} 导致意外的令牌错误
这是我的组件：
import styles from './styles/Navbar.module.scss'
const NavComponent = (props) => {
const [isOpen, setIsOpen] = useState(false);
const toggle = () => setIsOpen(!isOpen);
return (
<div>
<img src="../ss-logo.png" alt="Logo" className={styles.companyLogo}/>
</div>
);
}
export default NavComponent;
还有我的 SCSS：
.companyLogo {
height: 3rem;
}
我想让弹出模式每次访问仅出现一次（我不希望每次有人返回索引页面时都出现它）。有没有办法使用钩子来做到这一点，或者有更好的方法吗？
export default function Popup() {
const [visible, setVisible] = React.useState(true);
if(!visible) return null;
return (
<div className={styles.popup} onClick={() => setVisible(false)}>
{/* <div className={styles.popupInner}> */}
<div className={styles.popupInner}>
<div className={styles.buttonContainer}><Button color="danger" className={styles.button}>Okay</Button></div>
</div>
{/* </div> */}
</div>
)
}
我在 Next js 站点的索引页上放置了一个 Google Maps API 组件，但它使加载速度大幅减慢（大约 500 毫秒）。
有没有办法让我使用 useEffect 挂钩或其他简洁的方式将组件延迟到页面加载之后？
我想提高网站的加载速度（和性能得分）。
export default function Home() {
return (
<div className={styles.main}>
<Layout>
<main className={styles.content}>
**<div className={styles.mapContainer}>
<Map className={styles.map}/>**
</div>
</main>
</Layout>
</div>
)
}
next.js ×4
reactjs ×4
javascript ×3
css ×1
favicon ×1
html ×1
lazy-loading ×1
react-hooks ×1
sass ×1
vercel ×1