nextjs项目搭建——头部导航

Header.tsx

在src/app/component路径下，创建Header.tsx

'use client';import Link from 'next/link';
import { usePathname } from 'next/navigation';
import Logo from './Logo';const Header = () => {const pathname = usePathname();const navItems = [{ label: '首页', href: '/' },{ label: '量表测试', href: '/test' },{ label: 'AI咨询', href: '/ai-consultation' },{ label: '名师咨询', href: '/expert-consultation' },{ label: '直播', href: '/live' },{ label: '团体方案', href: '/group-solutions' },];return (<header className="w-full bg-white shadow-sm"><div className="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between"><div className="flex items-center"><Link href="/" className="flex items-center"><Logo /><span className="text-[#40a9ff] text-lg font-medium ml-2">MindAI</span><span className="text-gray-500 text-sm ml-2">您身边的心理医生</span></Link></div><nav className="flex items-center space-x-8">{navItems.map((item) => (<Linkkey={item.href}href={item.href}className={`text-base ${pathname === item.href? 'text-[#40a9ff] font-medium': 'text-gray-600 hover:text-[#40a9ff]'}`}>{item.label}</Link>))}</nav><div className="flex items-center space-x-4"><div className="relative"><Link href="/notifications"><div className="text-gray-600 hover:text-[#40a9ff]"><svgxmlns="http://www.w3.org/2000/svg"className="h-6 w-6"fill="none"viewBox="0 0 24 24"stroke="currentColor"><pathstrokeLinecap="round"strokeLinejoin="round"strokeWidth={2}d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg></div></Link><span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">1</span></div><Linkhref="/login"className="px-4 py-2 rounded bg-[#40a9ff] text-white hover:bg-[#1890ff] transition-colors">登录/注册</Link></div></div></header>);
};export default Header;

logo

这里有我自己创建的logo

const Logo = () => {return (<svgwidth="40"height="40"viewBox="0 0 40 40"fill="none"xmlns="http://www.w3.org/2000/svg"><pathd="M20 35C20 35 33 26 33 16.7059C33 10.5882 28.0294 7 23.8235 7C21.0588 7 20 8.76471 20 8.76471C20 8.76471 18.9412 7 16.1765 7C11.9706 7 7 10.5882 7 16.7059C7 26 20 35 20 35Z"fill="#40a9ff"stroke="#40a9ff"strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/><circlecx="28"cy="28"r="8"fill="white"stroke="#40a9ff"strokeWidth="2"/><pathd="M28 24V32M24 28H32"stroke="#40a9ff"strokeWidth="2"strokeLinecap="round"/></svg>);
};export default Logo;