如何在不同路由复用含getServerSideProps的同页面组件

方法一：直接复用组件与服务端逻辑 #

在pages/extra/main.tsx中，不仅导入目标组件，同时导出从../info/main引入的getServerSideProps：

// pages/extra/main.tsx
import MainCmp, { getServerSideProps } from '../info/main';

export default MainCmp;
export { getServerSideProps };

Next.js会识别每个路由文件中导出的getServerSideProps，这样两个路由会执行完全相同的服务端逻辑，渲染内容一致，且各自保持原有URL路径。

方法二：抽离公共逻辑到独立模块 #

如果后续有更多路由需要复用该逻辑，建议将组件和服务端代码拆分到单独文件：

1. 创建公共组件文件components/MainContent.tsx：

// components/MainContent.tsx
export default function MainContent(props) {
  // 组件渲染逻辑
  return <div>{/* 页面内容 */}</div>;
}

2. 创建服务端逻辑文件utils/getMainServerSideProps.ts：

// utils/getMainServerSideProps.ts
export async function getMainServerSideProps(context) {
  // 共享的getServerSideProps逻辑
  const data = await fetch('你的数据源地址');
  return { props: { data } };
}

3. 在两个路由文件中分别导入并使用：

// pages/info/main.tsx
import MainContent from '../../components/MainContent';
import { getMainServerSideProps } from '../../utils/getMainServerSideProps';

export default MainContent;
export const getServerSideProps = getMainServerSideProps;

// pages/extra/main.tsx
import MainContent from '../../components/MainContent';
import { getMainServerSideProps } from '../../utils/getMainServerSideProps';

export default MainContent;
export const getServerSideProps = getMainServerSideProps;

关于rewrites方案的URL异常问题 #

你之前使用rewrites后地址栏URL变为/info/main，大概率是因为组件内部的跳转链接（比如next/link）直接指向了/info/main，而非当前路由路径。解决办法：

• 使用相对路径跳转，比如<Link href="./">代替<Link href="/info/main">
• 通过useRouter获取当前路由路径，动态生成跳转链接：

import { useRouter } from 'next/router';

function MainContent() {
  const router = useRouter();
  return <Link href={router.asPath}>跳转</Link>;
}

注意：Next.js的rewrites属于内部重写，默认不会修改浏览器地址栏URL，若仍出现URL变化，检查是否误将配置写为redirect而非rewrites。

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