根据 official docs，我已经阅读了一些关于此的不同来源。 :
Consequently, there are a bunch of practical issues to consider with traditional CSS-file-based styling (especially with SSR), so we suggest avoiding this method when styling for Next.js.
Instead we recommend CSS in JS, which you can use to style individual components rather than importing CSS files.
Next.js comes preloaded with a CSS in JS framework called styled-jsx, specifically designed to make your life easier. It allows you to write familiar CSS rules for your components; rules will have no impact on anything other than the components (not even child components).
但是我已经看到那里的教程表明您可以加载 css 文件，例如:
import Head from "next/head";
const Layout = props => (
<>
<Head>
<link href="theme.css" rel="stylesheet" />
</Head>
<Header />
<main>{props.children}</main>
</>
);
这将使我的生活更轻松，因为我使用的是我正在移植到 next.js 元素的 html 主题。并且theme.css 文件有23000 行代码。想象一下，现在我必须尝试找到所有这些 css 类，提取它们并将它们放入各自的组件中。那将需要永远!
所以，实际的问题是，仅仅拉入整个样式表并“全局”使用它真的那么糟糕吗？
最佳答案
我实际上也在试图找出在下一个 js 元素中加载 css 的最佳方法，我最近决定导入我所有的 页数 _app.js 中的样式表但后来我发现我的 灯塔分数从 70% 上升到 42%。我总是使用 jsx 方法，我想它会更好地获得更好的性能。
像这样例如:
const ReVerifyLink = () => (
<div>
<p>
Click
<Link href={{ pathname: routes.RE_VERIFY }}>
<a>here</a>
</Link>
to re-verify your email.
</p>
<style jsx scoped>{`
a {
font-weight: bold;
color: #ed8f1f;
margin: 0 5px;
}
`}</style>
</div>
);
关于css - 以正确的方式将 css 加载到 Next.js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59218894/