在next.js中如何正确引入css样式

next.js中css引入的常见方式

next.js作为主流的react服务端渲染框架，内置了对多种css引入方式的支持，开发者可以根据项目规模和样式需求选择合适的方案。不同的引入方式有不同的适用场景，合理选择能提升样式管理的效率。

全局样式引入

全局样式适合存放项目通用的基础样式，比如重置样式、主题变量、全局字体等。next.js约定全局样式需要在pages/_app.js文件中引入，因为该文件是所有页面的入口组件，在这里引入的样式会作用于整个应用。

首先在项目中创建styles/global.css文件，写入基础样式：

/* 全局重置样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 全局主题变量 */
:root {
  --primary-color: #1677ff;
  --text-color: #333;
}

然后在pages/_app.js中引入该样式文件：

import '../styles/global.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

注意全局样式如果不做特殊处理，所有类名都会作用于全局，容易出现样式冲突，因此不建议在全局样式中编写业务组件的专用样式。

CSS Module使用

CSS Module是next.js默认支持的样式方案，它会自动将类名编译为唯一的哈希字符串，避免样式冲突，非常适合编写组件级别的样式。使用CSS Module时，文件命名需要以.module.css结尾。

创建组件样式文件components/Button.module.css：

/* 按钮组件样式 */
.btn {
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-size: 14px;
}

.primary {
  background-color: var(--primary-color);
  color: #fff;
}

在组件中引入并使用该样式：

import styles from '../components/Button.module.css'

export default function Button() {
  return (
    <button className={`${styles.btn} ${styles.primary}`}>
      确认按钮
    </button>
  )
}

编译后btn和primary类名会被转换为类似Button_btn__abc123的唯一字符串，不会和其他组件的样式产生冲突。

styled-jsx内联样式

next.js内置了styled-jsx支持，允许在组件内部编写作用域限定的css样式，不需要单独创建样式文件。这种方式的样式只会作用于当前组件，同样不会出现样式冲突问题。

使用示例：

export default function Card() {
  return (
    <div className="card">
      <h3>卡片标题</h3>
      <p>卡片内容描述</p>
      {/* 内联样式定义 */}
      <style jsx>{`
        .card {
          padding: 16px;
          border: 1px solid #eee;
          border-radius: 8px;
          max-width: 300px;
        }
        h3 {
          color: var(--primary-color);
          margin-bottom: 8px;
        }
        p {
          color: var(--text-color);
          line-height: 1.5;
        }
      `}</style>
    </div>
  )
}

styled-jsx的样式支持动态属性，比如可以根据组件的props改变样式，灵活性较高。

第三方样式库引入

如果项目需要使用第三方css库，比如antd、tailwindcss等，引入方式和普通react项目类似，但需要注意next.js的配置要求。以引入antd为例，首先安装依赖：

npm install antd

然后在pages/_app.js中引入antd的全局样式：

import 'antd/dist/reset.css'
import '../styles/global.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

如果使用tailwindcss，需要先执行初始化命令生成配置文件，再在全局样式中引入tailwind的基础指令即可。

不同引入方式的选择建议

• 通用基础样式、主题变量使用全局样式引入
• 独立业务组件的样式优先使用CSS Module
• 简单组件、需要动态样式的场景可以使用styled-jsx
• 第三方组件库的样式按照对应库的要求引入

遵循以上规则可以保持项目样式结构清晰，减少样式冲突问题，提升项目的可维护性。

next.jscss_moduleglobal_cssstyled_jsx修改时间：2026-07-13 07:18:10