基于数据库文章链接的Next.js博客平滑导航实现问题

• 检查Link组件的正确用法

  • Pages Router（Next.js 12及以下）：必须在Link内部包裹原生<a>标签，href属性仅放在Link上，a标签无需设置href：

    import Link from 'next/link';
    
    // 正确示例
    <Link href={`/posts/${post.slug}`}>
      <a>查看文章</a>
    </Link>
    

  • App Router（Next.js 13+）：可直接使用Link组件，无需强制包裹a标签，href属性仍放在Link上：

    import Link from 'next/link';
    
    // 示例1
    <Link href={`/posts/${post.slug}`}>查看文章</Link>
    
    // 示例2（兼容写法）
    <Link href={`/posts/${post.slug}`}>
      <a>查看文章</a>
    </Link>
    

  若将href放在a标签上、或Link与a的href不匹配，都会触发全页刷新。

• 验证动态路由路径匹配
  确保生成的href路径与你的路由结构完全一致。比如路由为app/posts/[slug]/page.js（App Router）或pages/posts/[slug].js（Pages Router），则href必须是/posts/xxx格式，不能有多余斜杠或路径错误。可在控制台打印生成的href，确认路径有效性。

• 排查自定义点击事件干扰
  若链接或父元素绑定了自定义onClick事件，需确认未调用event.preventDefault()或event.stopPropagation()阻止Link的客户端导航逻辑。如果必须保留自定义事件，可手动触发导航：

  import { useRouter } from 'next/router'; // Pages Router
  // import { useRouter } from 'next/navigation'; // App Router
  
  const router = useRouter();
  const handleClick = (event) => {
    // 自定义逻辑
    router.push(`/posts/${post.slug}`);
  };
  
  <Link href={`/posts/${post.slug}`} onClick={handleClick}>
    查看文章
  </Link>
  

• 确认动态数据有效性
  检查从数据库获取的文章slug/ID是否为空或包含特殊字符，这类问题会导致路径无效，触发全页刷新。渲染前可过滤掉无效数据，避免生成错误链接。

内容的提问来源于stack exchange，提问作者MD. Jahid Hasan