如何配置Next.js静态站点生成（SSG）实现环境差异化样式？

针对静态站点生成（SSG）的Next.js项目，以下是几种在构建阶段根据开发/生产环境切换样式的最佳实现方案：

方案1：全局样式条件导入（最直接） #

利用Next.js内置的process.env.NODE_ENV环境变量，在全局入口文件（_app.js/_app.tsx）中判断环境并导入对应样式文件。

步骤： #

• 在项目根目录创建两套全局样式文件：styles/dev.global.css（开发环境样式）和styles/prod.global.css（生产环境样式）
• 在_app.js中添加条件导入逻辑：

import '@/styles/globals.css' // 基础通用样式
import type { AppProps } from 'next/app'

if (process.env.NODE_ENV === 'development') {
  import('@/styles/dev.global.css')
} else {
  import('@/styles/prod.global.css')
}

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

优势： #

• 实现简单，无需额外配置
• 样式在构建阶段就已注入，符合SSG的静态生成特性
• 全局生效，适合整体主题切换

方案2：CSS模块动态切换类名（组件级控制） #

如果需要针对特定组件做环境差异化样式，可使用CSS模块结合环境变量动态选择类名。

步骤： #

• 创建两套组件样式模块：components/MyComponent.dev.module.css和components/MyComponent.prod.module.css
• 在组件中根据环境变量导入对应模块并应用类名：

import devStyles from './MyComponent.dev.module.css'
import prodStyles from './MyComponent.prod.module.css'

const styles = process.env.NODE_ENV === 'development' ? devStyles : prodStyles

export default function MyComponent() {
  return <div className={styles.container}>环境差异化内容</div>
}

优势： #

• 粒度更细，可针对单个组件定制样式
• CSS模块自带作用域，避免样式冲突
• 构建阶段即可确定最终样式，不影响SSG渲染

方案3：Tailwind CSS 环境变体（适配Tailwind项目） #

如果项目使用Tailwind CSS，可以通过配置自定义变体，直接在模板中使用环境专属类名。

步骤： #

1. 在tailwind.config.js中添加环境变体：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [
    function({ addVariant }) {
      addVariant('dev', ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          return `.dev${separator}${className}`
        })
      })
      addVariant('prod', ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          return `.prod${separator}${className}`
        })
      })
    },
  ],
}

2. 在_app.js中根据环境给根元素添加对应的类：

import '@/styles/globals.css'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  const rootClass = process.env.NODE_ENV === 'development' ? 'dev' : 'prod'
  return <div className={rootClass}><Component {...pageProps} /></div>
}

3. 在组件中直接使用环境变体类：

export default function Home() {
  return (
    <div className="dev:bg-yellow-100 prod:bg-gray-100 p-4">
      <h1 className="dev:text-red-600 prod:text-blue-600">Hello World</h1>
    </div>
  )
}

优势： #

• 完全适配Tailwind的原子化样式体系
• 模板中直观区分环境样式，无需额外逻辑
• 构建阶段会自动移除未使用的环境样式，体积优化友好

注意事项 #

• 所有方案均依赖process.env.NODE_ENV，Next.js在npm run dev时自动设为development，npm run build时设为production，无需手动配置
• 若使用自定义环境变量，需在next.config.js中通过env字段或NEXT_PUBLIC_前缀暴露，但针对开发/生产环境的判断，优先使用内置的NODE_ENV

内容的提问来源于stack exchange，提问作者Nick Jonas