Next.js Link标签跳转正常但页面内容未更新、锚点跳转异常如何解决？

问题根因 #

你遇到的所有异常都来自 _app.tsx 的写法错误：

• Next.js 中自定义的 App 组件接收的 Component 参数就是当前路由对应的页面组件，你直接写死返回 <HomePage /> 会导致所有路由永远只渲染首页内容，哪怕URL跳转成功，页面内容也不会变化。

修复后的 _app.tsx 代码：

import '../styles/globals.css'
import type { AppProps } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  // 渲染当前路由对应的组件，不要写死HomePage
  return <Component {...pageProps} />
}
export default MyApp

其他需要修正的问题 #

1. friends.tsx 中Link组件的用法错误
   如果你使用的是Next.js 12及更早版本，Link 组件内部必须嵌套 <a> 标签，否则点击跳转功能会异常，修正后代码：

import Link from 'next/link'

const Friends = () => {
    return (
        <div>
            <h1>WELCOME TO FRIENDS</h1>
            <Link href="/">
                <a>RETURN TO HOME</a>
            </Link>
        </div>
    )
}
    
export default Friends;

2. 锚点跳转不要使用Link组件
   next/link 是用于Next.js内部路由跳转的组件，纯锚点跳转直接使用原生 <a> 标签即可，你要的当前页锚点效果可以直接改成：

<li className={styles.li}>
  <a href="#">TEST</a>
</li>

如果确实需要用Link组件跳转到当前页锚点，需要补全完整路径即可，比如 <Link href="/friends#xxx">。

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