Next.js单页项目中使用getStaticProps如何拆分index.tsx？

核心思路 #

Next.js 的 getStaticProps 仅对 pages 目录下的页面入口文件（比如 pages/index.tsx）生效，普通组件无法直接使用该方法获取数据。要拆分代码同时保持单页结构，核心是把UI模块和数据逻辑拆分，通过props传递数据。

1. 拆分UI组件，通过props传递数据 #

把 index.tsx 中不同功能模块拆成独立组件，放在 components 目录下（不要放在 pages 目录，避免被解析成独立路由），然后在 index.tsx 的 getStaticProps 中统一获取所有需要的数据，再传递给对应子组件。

示例代码：

• 新建 components/Options.tsx：

interface OptionsProps {
  optionsData: Array<{ id: number; name: string }>;
}

export default function Options({ optionsData }: OptionsProps) {
  return (
    <div className="options-container">
      {optionsData.map(option => (
        <div key={option.id} className="option-item">
          {option.name}
        </div>
      ))}
    </div>
  );
}

• 修改 pages/index.tsx：

import Options from '../components/Options';

// 统一在页面入口获取所有需要的数据
export async function getStaticProps() {
  // 获取Options组件需要的数据
  const optionsData = await fetch('https://your-api-endpoint/options')
    .then(res => res.json());
  
  // 可以同时获取其他模块的数据
  const otherModuleData = await fetch('https://your-api-endpoint/other')
    .then(res => res.json());

  return {
    props: {
      optionsData,
      otherModuleData
    }
  };
}

export default function Home({ optionsData, otherModuleData }) {
  return (
    <div className="app-container">
      {/* 传递数据给子组件 */}
      <Options optionsData={optionsData} />
      {/* 其他子组件 */}
      {/* <OtherModule data={otherModuleData} /> */}
    </div>
  );
}

2. 拆分数据获取逻辑（可选） #

如果 getStaticProps 里的数据获取代码过多，可以把这部分逻辑抽成单独的工具函数，放在 lib 目录下，让代码结构更清晰。

示例：

• 新建 lib/data-fetchers.ts：

export async function fetchOptionsData() {
  const res = await fetch('https://your-api-endpoint/options');
  if (!res.ok) throw new Error('Failed to fetch options data');
  return res.json();
}

export async function fetchOtherModuleData() {
  const res = await fetch('https://your-api-endpoint/other');
  if (!res.ok) throw new Error('Failed to fetch other data');
  return res.json();
}

• 修改 pages/index.tsx：

import Options from '../components/Options';
import { fetchOptionsData, fetchOtherModuleData } from '../lib/data-fetchers';

export async function getStaticProps() {
  const optionsData = await fetchOptionsData();
  const otherModuleData = await fetchOtherModuleData();

  return {
    props: { optionsData, otherModuleData }
  };
}

export default function Home({ optionsData, otherModuleData }) {
  return (
    <div className="app-container">
      <Options optionsData={optionsData} />
      {/* <OtherModule data={otherModuleData} /> */}
    </div>
  );
}

为什么之前的方法无效？ #

pages 目录下的文件会被Next.js自动解析为路由页面，比如 pages/options.tsx 会对应 /options 路由。你在这个文件里使用 getStaticProps，数据只会传递给 /options 页面，而不是 index.tsx 中渲染的该组件，所以数据无法显示，这确实不符合Next.js的规范用法。

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