index.js

import React from 'react'
import Cosmic from 'cosmicjs'
const config = {
  bucket: {
    slug: 'next-app'
  }
}
export default class extends React.Component {
  static async getInitialProps({ req }) {
    return new Promise((resolve, reject) => {
      Cosmic.getObject(config, { slug: 'home' }, (err, res) => {
        return resolve(res.object)
      })
    })
  }

  render() {
    return (
      <div>
        <div style={{ paddingTop: 100, backgroundImage: `url(${this.props.metadata.hero.imgix_url})`, backgroundSize: 'cover', width: '100%', height: 500 }}>
          <h1 style={{ color: '#fff', textAlign: 'center' }}>{this.props.metadata.headline}</h1>
        </div>
        <div style={{ textAlign: 'center' }} dangerouslySetInnerHTML={{ __html: this.props.content }}></div>
      </div>
    )
  }
}