Next.js组件导入报错：无法找到@/Components/NavBar模块求解决方案

针对你遇到的导入报错，以下是具体解决步骤：

1. 配置路径别名 #

Next.js默认不会自动识别@作为src目录的别名，需要手动在项目根目录的tsconfig.json（或jsconfig.json）中添加路径配置：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*"]
}

该配置会让@/xxx映射到项目根目录下src/xxx的路径，完美匹配你Components文件夹位于src/app外部（即src/Components）的目录结构。

2. 验证文件与导出的正确性 #

• 确认Components文件夹下的组件文件名为NavBar.tsx（注意大小写，Next.js在Linux/macOS环境下对文件名大小写敏感）
• 检查组件导出语句：你的代码中export const NavBar写法正确，确保没有拼写错误

3. 重启开发服务器 #

修改tsconfig.json后，必须重启Next.js的开发服务器（停止当前npm run dev进程后重新启动），新的路径配置才会生效。

4. 处理类型声明报错（若仍存在） #

如果配置后仍有类型声明相关报错，可在src目录下创建global.d.ts文件，添加以下内容：

declare module '@/Components/*';

你的NavBar组件代码 #

import React from "react";
export const NavBar = () => {
  return(
    <nav className="bg-white shadow-gray-300 w-100 px-8 ">
      <div className="py-2 px-4 container flex items-center justify-between flex-wrap ">
        <div className="text-main order-1  flex items-center justify-between flex-wrap gap-4">
          
          <svg xmlns="http://www.w3.org/2000/svg" className="h-10 w-10 order-1" fill="none" viewBox="0 0 24 24"
            stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
              d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"/>
          </svg>

          <h1 className="order-2 font-semibold">Klinik Psikologi Sejahtera</h1>
        </div>
        <div className="order-2 gap-10 flex items-center justify-between flex-wrap text-sm font-thin text-main">
          <div className=" hover:text-gray-700"><a href="#">Beranda</a></div>
          <div className=" hover:text-gray-700"><a href="#">Jadwal</a></div>
          <button className="px-4 py-2 bg-main hover:bg-gray-700 text-sm text-gray-50 rounded-full flex items-center gap-2">
              Log in
          </button>
        </div>
      </div>
    </nav>
  )
}

你的page.tsx代码 #

import {NavBar} from '@/Components/NavBar';

export default function Home() {
  return(
    <><NavBar />
        <div className="min-w-full h-auto py-10 pb-16 px-10 md:px-20 bg-gradient-to-b from-bg to-white flex-row items-start justify-center text-main">
            <div className="flex-row justify-center items-center my-10 mb-16">
                <p className="color:#015C92;">Menuju kesehatan Mental yang Lebih Baik</p>
                <h1 className="font-semibold text-4xl text-center my-6">Selamat Datang di Klinik Psikologi Sejahtera</h1>
                <p className="color:#015C92;">Di Klinik Psikologi Sejahtera, kami menawarkan layanan konsultasi psikologi profesional yang dapat Anda pesan sesuai kebutuhan. Platform kami memungkinkan Anda untuk menjadwalkan sesi, melihat profil psikolog, dan menerima pengingat untuk pengalaman yang lebih nyaman.</p>
            </div>
        </div>
    </>
  )
}

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