能否默认禁用所有NextJS <Link>组件的滚动行为？

嘿，我完全懂你这种每次写<Link>都要手动加scroll="false"的烦躁！刚好之前做页面淡入淡出过渡效果时也碰到了一模一样的问题，给你分享两个实用的解决办法：

方法一：自定义封装Link组件（最推荐） #

这是最直接且灵活的方案，我们自己封装一个默认带scroll=false的Link组件，之后项目里统一用这个自定义组件代替Next.js原生的Link：

// components/CustomLink.js
import Link from 'next/link';
import { ReactNode } from 'react';

type CustomLinkProps = {
  children: ReactNode;
  href: string;
  scroll?: boolean;
  // 可以添加其他你需要的Link属性
} & Omit<React.ComponentProps<typeof Link>, 'scroll'>;

const CustomLink = ({ scroll = false, ...props }: CustomLinkProps) => {
  return <Link scroll={scroll} {...props} />;
};

export default CustomLink;

使用方式 #

之后在项目里所有需要跳转的地方，用CustomLink代替原生Link即可：

// 自动带scroll=false，适配你的页面过渡需求
<CustomLink href="/about">关于我们</CustomLink>

// 如果某个特殊场景需要默认滚动到顶部，手动传scroll=true覆盖默认值
<CustomLink href="/contact" scroll={true}>联系我们</CustomLink>

这个方法的好处是不仅解决了scroll默认值的问题，后续如果需要给Link添加其他全局默认属性（比如统一的样式、prefetch配置等），都可以在这个自定义组件里统一修改，非常方便。

方法二：App Router下的间接控制（仅适用于Next.js 13+） #

如果你用的是Next.js 13+的App Router，也可以通过根layout.js自定义滚动恢复逻辑来配合需求，但这个方法不如封装组件灵活。你可以在页面过渡的淡出阶段手动执行滚动到顶部的操作，同时不依赖默认的ScrollRestoration组件——不过本质上还是配合自定义Link组件的方案更稳妥。

补充说明 #

目前Next.js并没有提供直接全局配置Link组件scroll属性的官方入口，所以自定义封装是社区里最常用的最佳实践，既能满足你的页面过渡需求，又能保持代码的可维护性，避免遗漏设置scroll="false"的情况。

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