您可以导入module.css（import style from 'root/styles/MyStyle.module.css）并按如下方式使用。
这是您的组件：

import style from '../../styles/components/Header.module.css'

export default function Header() {
    return (
        <h1 className={style.header}>
            Hello World
        </h1>
    );
}

字符串
这是你的CSS：

.header{
    color: #fff;
    width: 100%;
    height: 80px;
}

型
注意，CSS类用作组件className;
或者，在react组件中，您可以尝试添加标记<style jsx>{ your_CSS_here }</style>。
根据Next文档，每个页面都使用styled-jsx库。但是你仍然可以使用其他的CSS-in-JS库，比如Styled Components和Emotion。
Next应用程序还支持使用sass，允许您导入.css和.scss文件。
有关更多信息，请查看Vercel Docs。我也建议你检查Learning area。

由于服务器组件的范式转变，我目前面临着Next.js 13的挑战，这使我无法使用CSS-in-JS（如样式组件）。但是，我正在探索CSS模块的使用。我在这里分享这一点，以防有人有类似的疑问。在生产构建中，它们确实是分开的，没有捆绑到一个文件中，这是我的一个问题。此外，Next.js 13中的SCSS支持运行良好，不需要额外的配置，我不确定以前的版本是否如此。我相信，只要有SCSS的支持就是一个很大的优势。

你可以创建单独的css文件，并且在每个需要特定样式的组件上导入该组件所特有的css文件。例如，假设你在文件file1.js中有一个组件，那么你可以在文件file1.css中导入特定于该组件的样式，对于另一个文件file2，css file2.css也会发生同样的情况。

import './file1.css'; //importing the style specific only for this component
function File1(){
      const [processing, setProcessing] = useState(false)

    return (
        <> </>
    )
}
export default File1

字符串
第二个文件也是如此

import './file2.css'; //css file specific to this component 
function File2(){
      const [processing, setProcessing] = useState(false)

    return (
        <> </>
    )
}
export default File2

型