如何使用Next.js获取基本外部数据并将组件导入另一个组件

npx create-next-app my-app

cd my-app

import React from 'react';

const ExternalData = ({ data }) => {
  return (
    <div>
      <h1>外部数据</h1>
      <p>{data}</p>
    </div>
  );
};

export async function getStaticProps() {
  // 在这里获取外部数据
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

export default ExternalData;

import React from 'react';
import ExternalData from './external-data';

const AnotherComponent = () => {
  const externalData = '这是外部数据';

  return (
    <div>
      <h1>另一个组件</h1>
      <ExternalData data={externalData} />
    </div>
  );
};

export default AnotherComponent;