下面是一个使用Apollo Client和GraphQL在Next.js上创建静态页面的示例：

首先，安装所需的依赖项：

npm install apollo-boost graphql

接下来，创建一个lib/apollo.js文件，用于初始化Apollo Client：

import ApolloClient from 'apollo-boost';

const client = new ApolloClient({
  uri: 'https://api.example.com/graphql', // 替换为您的GraphQL API地址
});

export default client;

然后，创建页面文件pages/index.js，并使用getStaticProps获取数据：

import { gql } from 'apollo-boost';
import { ApolloProvider, useQuery } from '@apollo/react-hooks';
import client from '../lib/apollo';

const GET_DATA = gql`
  query {
    // 在这里编写你的GraphQL查询
  }
`;

const IndexPage = () => {
  const { loading, error, data } = useQuery(GET_DATA);

  if (loading) {
    return 
Loading...
;
  }

  if (error) {
    return 
Error: {error.message}
;
  }

  return (
    

      {/* 在这里使用数据渲染页面 */}
    
  );
};

export async function getStaticProps() {
  const { data } = await client.query({
    query: GET_DATA,
  });

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

export default function Index(props) {
  return (
    
      
    
  );
}

在上面的示例中，我们使用ApolloProvider将Apollo Client提供给应用程序，并使用useQuery钩子从GraphQL API获取数据。我们还使用getStaticProps函数在构建时预取数据并将其作为属性传递给页面组件。

请注意，上述示例是基于Apollo Client 3.0和Next.js 10.0编写的。如果您使用的是不同版本的这些库，请根据需要进行调整。

希望这可以帮助到您！