Next.js作品集项目路径路由失效，请求修复导航跳转问题

问题描述 #

在Next.js作品集中配置路由时，已在data/index.ts定义页面链接数组，使用Aceternity UI悬浮导航映射该数组，但导入page.tsx后仅首页/可正常跳转，项目链接失效；同时Hero组件内的「Show my projects」按钮跳转也无法生效，需实现悬浮导航与该按钮的项目路径跳转功能。

问题根源 #

1. 悬浮导航中Projects链接硬编码为/，与首页路径重复，无法定位到项目区域/页面
2. Hero组件使用原生<a>标签跳转锚点，Next.js中需用专属Link组件处理路由/锚点跳转
3. 当前悬浮导航未复用data/index.ts中定义的navItems数组，存在代码冗余且易出错

修复步骤及代码示例 #

1. 修正page.tsx导航配置 #

复用data/index.ts中的导航数组，添加对应图标并修正项目链接：

import Hero from "@/components/Hero";
import { FloatingNav } from "@/components/ui/FloatingNav";
import { FaHome, FaLocationArrow } from 'react-icons/fa'
import Grid from '@/components/Grid'
import Footer from "@/components/Footer";
import Experience from "@/components/Experience";
import Clients from "@/components/Clients";
import RecentProjects from "@/components/RecentProjects";
import { navItems } from "@/data";
import Approach from "@/components/Approach";

export default function Home() {
  // 给data中的导航项添加图标，整合首页项
  const navItemsWithIcons = [
    {name: 'Home', link: '/', icon: <FaHome />},
    ...navItems.map(item => 
      item.name === 'Projects' 
        ? {...item, icon: <FaLocationArrow />} 
        : item
    )
  ];

  return (
  <main className="relative bg-black-100 flex justify-center items-center flex-col overflow-hidden
  mx-auto sm:px-10 px-5">
    <div className="max-w-7xl w-full">
      {/* 使用整合后的导航数组 */}
      <FloatingNav navItems={navItemsWithIcons} />
      <Hero />
      <Grid />
      {/* 给项目组件添加锚点ID，对应导航链接 */}
      <RecentProjects id="projects" />
      <Clients />
      <Approach />
      <Experience />
      <Footer />
      
    </div>
  </main>
  );
}

2. 替换Hero组件中的跳转标签 #

使用Next.js的Link组件替代原生<a>标签，处理锚点跳转：

import Link from 'next/link';
// 导入MagicButton及其他依赖

// 替换原<a>标签
<Link href="#projects">
  <MagicButton
    title='Show my projects'
    icon={<FaLocationArrow />}
    position='right'
  />
</Link>

3. 确保悬浮导航组件支持Next.js路由 #

修改components/ui/FloatingNav.tsx内部，将原生<a>替换为Link：

import Link from 'next/link';
// 其他导入及组件逻辑

// 渲染导航项的部分
{navItems.map((item) => (
  <Link
    key={item.name}
    href={item.link}
    className="flex items-center gap-2 px-3 py-2 rounded-md hover:bg-white/10 transition-colors"
  >
    {item.icon && <span className="text-xl">{item.icon}</span>}
    <span>{item.name}</span>
  </Link>
))}

（可选）跳转到独立项目页面 #

若需跳转到单独的项目页面而非锚点，需：

1. 修改导航链接为/projects
2. 在app/projects目录下创建page.tsx页面文件

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