使用Create Next App搭建TS项目启动Dev Server时遇全局CSS报错

问题背景 #

使用npx create-next-app@latest --ts搭建项目后，启动开发服务器时触发全局CSS错误，即使已经在_app.tsx中正确导入globals.css；注释该导入后又出现新错误。

错误原因分析 #

1. 路径包含特殊字符：项目路径中的#符号会导致Next.js解析文件路径异常，误判全局CSS的导入位置。
2. 重复导入全局CSS：可能存在其他组件（如index.tsx）也导入了globals.css，违反Next.js全局CSS只能在_app.tsx中导入的规则。

解决方案 #

1. 清理路径中的特殊字符 #

将项目路径里的#Typescript重命名为普通名称（如Typescript），确保整个项目路径不含#、空格等特殊字符，之后重启开发服务器。

2. 检查并移除重复导入 #

遍历所有组件文件（重点检查index.tsx），删除任何除_app.tsx之外的globals.css导入语句，只保留_app.tsx中的如下代码：

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

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

export default MyApp

3. 处理注释导入后的新错误 #

若注释globals.css后出现document is not defined类错误，优先解决上述路径和重复导入问题——路径问题修复后，全局CSS错误消失，后续错误通常也会随之解决。若仍有问题，检查组件中是否存在服务端渲染时调用浏览器API的代码，需用useEffect或动态导入（dynamic）包裹相关代码。

额外验证步骤 #

• 删除.next文件夹和node_modules/.cache目录，清除缓存后重新执行npm run dev。
• 用npx next -v确认Next.js版本，若版本过旧，升级到稳定版（如12.x或13.x Pages Router版本）。

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