Next.js SSR项目中如何测试Babel及styled-components插件有效性

我之前也踩过这个坑，结合你的配置和描述的症状，给你梳理一下排查思路和具体的解决方法：

先回顾下你的问题 #

你用Next.js做SSR集成styled-components，启动命令cross-env NODE_ENV=development concurrently "tsc --watch" next显示已加载.babelrc，但开发者工具里的类名是sc-iyvyFf gGaJAt这种随机串，而不是预期的Title-xxxx xxxx（对应你定义的const Title = styled.div），怀疑只有服务端代码被Babel转译，客户端没生效。

你的配置如下：

.babelrc

{ 
  "env": { 
    "development": { 
      "presets": ["next/babel"], 
      "plugins": [ 
        [ "babel-plugin-styled-components", { 
          "ssr": true, 
          "displayName": true, 
          "preprocess": false 
        } ] 
      ] 
    }, 
    "production": { 
      "presets": "next/babel", 
      "plugins": [ 
        [ "babel-plugin-styled-components", { 
          "displayName": false, 
          "ssr": true 
        } ] 
      ] 
    }, 
    "test": { 
      "presets": [ 
        [ "env", { "modules": "commonjs" } ], 
        "next/babel" 
      ] 
    } 
  } 
}

next.config.js

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
const { ANALYZE } = process.env
const path = require('path')
module.exports = {
 exportPathMap: function() {
 return { '/': { page: '/' } }
 },
 webpack: function(config) {
 if (ANALYZE) {
 config.plugins.push(
 new BundleAnalyzerPlugin({ analyzerMode: 'server', analyzerPort: 8888, openAnalyzer: true })
 )
 }
 config.resolve.alias = {
 'styled-components': path.resolve('./node_modules/styled-components/')
 }
 return config
 }
}

一、如何测试Babel是否正常工作？ #

给你几个实用的验证方法，能快速定位问题：

• 直接用Babel转译单个组件文件
  找一个包含styled-components的组件（比如你的Title组件所在文件），执行命令：

  npx babel components/Title.tsx --out-file test-output.js
  

  打开生成的test-output.js，如果能看到类似/*#__PURE__*/_styled.default.div.withConfig({ displayName: "Title", ... })的代码，说明Babel插件是生效的；如果没有displayName这部分，那插件肯定没起作用。

• 检查Next.js的编译输出
  开发模式下，Next.js会把编译后的文件存在.next目录：

  • 去.next/server/pages看服务端编译的页面文件，搜索组件名称（比如Title），看有没有displayName的配置
  • 再去.next/static/chunks/pages看客户端编译的文件，做同样的搜索
    如果服务端有但客户端没有，那就是客户端的Babel配置没生效。

• 在组件里打印displayName
  在你的styled组件下面加一行代码：

  console.log('Title displayName:', Title.displayName)
  

  启动项目后看浏览器控制台，如果打印出Title，说明插件生效；如果是undefined或者随机字符串，那就是没生效。

二、排查你的配置问题 #

从你的配置来看，有几个可能的坑：

1. Next.js的Babel配置格式问题
   Next.js对babel.config.js（项目级配置）的支持比.babelrc（文件级配置）更可靠，尤其是在混合TypeScript的项目里。.babelrc可能会被Next.js在处理客户端代码时忽略。
   建议你把.babelrc改成babel.config.js，内容改成CommonJS格式：

   module.exports = {
     env: {
       development: {
         presets: ["next/babel"],
         plugins: [
           ["babel-plugin-styled-components", {
             ssr: true,
             displayName: true,
             preprocess: false
           }]
         ]
       },
       production: {
         presets: "next/babel",
         plugins: [
           ["babel-plugin-styled-components", {
             displayName: false,
             ssr: true
           }]
         ]
       },
       test: {
         presets: [
           ["env", { modules: "commonjs" }],
           "next/babel"
         ]
       }
     }
   }
   

2. TypeScript编译和Next.js编译的冲突
   你用concurrently "tsc --watch" next，这里要确保tsc只做类型检查，不要输出编译后的JS文件。如果tsc输出了JS文件，Next.js可能会优先读取这些未经过Babel处理的文件，自然不会生成带组件名称的类名。
   检查你的tsconfig.json，确保设置了：

   "noEmit": true
   

3. 不必要的webpack别名可能导致问题
   你在next.config.js里加的styled-components别名其实没必要，Next.js默认会正确解析依赖，这个别名甚至可能导致客户端和服务端使用的styled-components版本不一致，进而影响SSR和类名生成。建议先把这部分删掉：

   // 删掉这段
   config.resolve.alias = {
     'styled-components': path.resolve('./node_modules/styled-components/')
   }
   

4. 版本兼容性问题
   确保styled-components和babel-plugin-styled-components的版本匹配，比如如果你用的是styled-components v5，那babel插件也要对应v5的版本，版本不兼容会导致插件功能失效。

三、额外的验证步骤 #

• 完全重启开发服务器：修改Babel配置后一定要彻底关闭服务器再重启，热重载不会重新加载Babel配置。
• 确认NODE_ENV是否正确：在next.config.js里加一行console.log('NODE_ENV:', process.env.NODE_ENV)，启动时看控制台是不是输出development，如果是其他值，Babel会用对应环境的配置（比如production环境下你设置了displayName: false）。

按照上面的步骤调整后，应该就能解决类名不显示组件名称的问题了。

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