next.js getInitialProps内でPrismic APIを呼び出すにはどうすればよいですか？

Question

Prismic (CMS) APIの呼び出し方法：next.js application？プリズミック呼び出すための

npm install prismic-javascript prismic-dom --save 

in their documentation.とコードを説明するように、

import React from 'react' 
import Link from 'next/link' 
import 'isomorphic-fetch' 

export default class Index extends React.Component { 
    static async getInitialProps() { 
    const res = await fetch('https://myAPI_URL') 
    const json = await res.json() 
    return { cars: json.results } 
    } 

    render() { 
    return (
     <div> 
     <p>I can see the data {this.props.cars} </p> 
     </div> 
    ) 
    } 
} 

しかし、私は依存関係としてプリズミック開発キットを使用したい：next.jsでは私が前に持っていた

const Prismic = require('prismic-javascript'); 

const apiEndpoint = "https://your-repository-name.prismic.io/api/v2"; 
const apiToken = "this_is_a_fake_token_M1NrQUFDWUE0RYvQnvv70"; 

Prismic.getApi(apiEndpoint, {accessToken: apiToken}).then(function(api) { 
    return api.query(""); // An empty query will return all the documents 
}).then(function(response) { 
    console.log("Documents: ", response.results); 
}, function(err) { 
    console.log("Something went wrong: ", err); 
}); 

しかし、私はプリズミックAPI呼び出しをgetInitialProps内のnext.jsと一緒に使用するにはどうすればよいですか？例：

import React from 'react' 
import Link from 'next/link' 
import 'isomorphic-fetch' 

export default class Index extends React.Component { 
    static async getInitialProps() { 
    // fetch Prismic API and return the results 
    } 

    render() { 
    return (
     <div> 
     <p>Showing data fetched from API here</p> 
     </div> 
    ) 
    } 
} 

Answer 1

すでに準備が整っています。 fetchの代わりに、Prismicリクエストを待ちます。その後、結果を返します。

import React from 'react'; 
import Prismic from 'prismic-javascript'; 

const apiEndpoint = 'https://project.prismic.io/api/v2'; 
const apiToken = 'TOKEN'; 

export default class Index extends React.Component { 
    static async getInitialProps({ req, query }) { 
    const data = await Prismic.getApi(apiEndpoint, { accessToken: apiToken }) 
     .then(api => { 
     return api.query(''); // An empty query will return all the documents 
     }) 
     .catch(err => console.log(err)); 

    return { cars: data.results }; 
    } 

    render() { 
    return <div>Example car id: {this.props.cars[0].id}</div>; 
    } 
}