如何在Next.js应用程序中获取共享数据？在app.js中编写getInitialProps会使使用Next.js的目的失去意义。

在Next.js中，我们可以使用get Server SideProps和getStaticProps来动态获取数据。这些方法可以在任何页面组件中使用。如果您想在多个页面组件中获取相同的数据，最好将其封装在一个单独的函数中，并在需要时调用该函数。下面是一个使用get Server SideProps获取数据并将其保存在组件props中的示例：

import axios from 'axios';
export async function fetchSomeData() {
  const response = await axios.get('https://api.example.com/data');
  return response.data;
export default function Home({ data }) {
  return (
      {data.map((item) => (
        <div key={item.id}>{item.title}</div>
export async function getServerSideProps() {
  const data = await fetchSomeData();
  return {
    props: {
      data,
在这个例子中，我们定义了一个独立的函数fetchSomeData()，用于获取数据。我们在页面组件中使用该函数的返回值来渲染数据。我们使用getServerSideProps方法来获取数据，并将其传递给组件作为props。这将确保我们在每个页面组件中都使用相同的数据，避免了在多个组件中重复获取数据的问题。