Next.js部署到Netlify后Link标签触发页面全量刷新求助

1. 确认Link组件导入正确 #

必须使用Next.js自带的Link组件，别错用其他路由库的：

// 正确写法
import Link from 'next/link';
// 禁止使用：react-router-dom的Link会触发原生页面跳转
// import { Link } from 'react-router-dom';

2. 检查Link的使用格式 #

Next.js 13+的App Router和旧版Pages Router用法有区别，别混用：

• Pages Router 需嵌套<a>标签：

<Link href="/about">
  <a>关于我们</a>
</Link>

• App Router 直接写内容，无需嵌套<a>：

<Link href="/about">关于我们</Link>

如果在App Router中强行嵌套<a>，会触发全页面刷新。

3. 配置Netlify的Next.js适配插件 #

Netlify需要专门插件适配Next.js路由，在项目根目录创建或检查netlify.toml配置：

[build]
  command = "npm run build"
  publish = ".next"

[[plugins]]
  package = "@netlify/plugin-nextjs"

缺少这个插件，路由行为大概率异常。

4. 检查next.config.js的关键设置 #

如果是静态导出模式（设置了output: 'export'），需补全配置避免路由问题：

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  basePath: '', // 有自定义路径则填写对应值，无则留空
  trailingSlash: true, // 静态导出建议开启，防止路由匹配失败
}

module.exports = nextConfig;

非静态导出场景，不要添加output: 'export'，保持默认SSR模式即可。

5. 验证jsconfig.json的路径别名 #

路径别名写错会导致路由解析错误，示例正确配置：

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

确保Link的href路径拼写正确，不管是相对路径还是别名路径。

6. 清除缓存重新部署 #

• 登录Netlify后台，进入项目的「构建和部署」→「构建缓存」，点击清除缓存
• 本地执行清理命令后重新构建：

rm -rf .next node_modules
npm install
npm run build

缓存导致的异常大多能通过此操作解决。

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