Next.js 14.0.1编译报错：无法解析next/font/google/target.css

可能的原因及对应修复步骤 #

1. 项目路径包含特殊字符（#） #

你的项目路径 /var/www/html/C#/nextApp 中包含 # 符号，这是URL保留字符，会导致Next.js解析文件路径时出现异常，无法正确生成或读取 target.css 文件。

修复：

• 将项目迁移至不含特殊字符（如#、空格、中文等）的路径，例如 /var/www/html/CSharp/nextApp。
• 迁移后删除 node_modules、.next 文件夹，重新执行：

  npm install
  npm run dev
  

2. 缓存或依赖损坏 #

即使删除了 node_modules，Next.js构建缓存（.next 文件夹）或npm本地缓存仍可能存在损坏文件，导致 target.css 生成异常。

修复：

1. 删除项目目录下的 .next 文件夹：

   rm -rf .next
   

2. 清除npm缓存：

   npm cache clean --force
   

3. 重新安装依赖并启动：

   rm -rf node_modules package-lock.json
   npm install
   npm run dev
   

3. 检查 next/font 导入语法 #

确认 app/layout.js 中对 next/font/google 的导入符合Next.js 14规范，错误语法可能导致生成的 target.css 为空。

正确示例：

import { Inter } from 'next/font/google';
import './globals.css';

const inter = Inter({ subsets: ['latin'] });

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  );
}

若代码与此不符，调整为标准语法后重新启动项目。

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