如何将Shopify Polaris链接适配为Next.js的Link组件实现无刷新跳转

核心实现思路 #

Shopify Polaris 提供了全局自定义链接组件的配置入口，你只需要将NextJS的<Link />封装适配后注入Polaris的根AppProvider即可，所有内部组件生成的链接都会自动复用你传入的路由组件，完全避免页面重载。

步骤1：封装适配Polaris规范的自定义链接组件 #

你需要封装一个中转组件，把Polaris传入的url属性映射为NextJS Link需要的href属性，同时兼容外部链接的跳转逻辑：

// utils/PolarisNextLink.jsx
import Link from 'next/link';

const PolarisNextLink = ({ url, children, external, onClick, ...restProps }) => {
  // 外部链接走原生a标签逻辑
  if (external) {
    return (
      <a 
        href={url} 
        target="_blank" 
        rel="noopener noreferrer" 
        onClick={onClick}
        {...restProps}
      >
        {children}
      </a>
    );
  }
  // 内部路由走NextJS Link
  return (
    <Link href={url} onClick={onClick} {...restProps}>
      {children}
    </Link>
  );
};

export default PolarisNextLink;

如果你使用的是NextJS 12及更早版本，需要在<Link>内部嵌套一层原生<a>标签，透传所有非href的属性即可。

步骤2：全局注入到Polaris AppProvider #

在项目根层级的Polaris AppProvider配置中，添加linkComponent属性传入你封装好的组件：

// Pages Router 对应 pages/_app.jsx / App Router 对应 app/layout.jsx
import { AppProvider } from '@shopify/polaris';
import '@shopify/polaris/build/esm/styles.css';
import PolarisNextLink from './utils/PolarisNextLink';

export default function RootApp({ Component, pageProps }) {
  return (
    <AppProvider
      linkComponent={PolarisNextLink}
      {/* 其他AppProvider所需配置，如i18n、店铺配置等 */}
    >
      <Component {...pageProps} />
    </AppProvider>
  );
}

生效验证 #

配置完成后，所有Polaris内置组件（如导航项、卡片操作、按钮链接等）生成的跳转都会复用NextJS客户端路由能力，不会再触发全页面重载。

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