_app.js

MyApp.getInitialProps = async ({ Component, ctx }) => {
  try {
    // Retrieve content documents
    let pageProps = {};
    let navContent = {};
    let contactContent = {};

    navContent = await Client.getSingle('nav_bar');
    contactContent = await Client.getSingle('contact_form');
    if (Component.getServerSideProps) {
      pageProps = await Component.getServerSideProps(ctx);
      return {
        navContent: navContent.data,
        contactContent: contactContent.data,
        pageProps
      };
    }

    return {
      navContent: navContent.data,
      contactContent: contactContent.data
    };
  } catch (error) {
    console.error(error);
    return error;
  }
};

getStaticProps.js

// You can use any data fetching library
import fetch from 'node-fetch'

// posts will be populated at build time by getStaticProps()
function Blog({ posts }) {
  return (
    <ul>
      {posts.map(post => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

// This function gets called at build time in the Node.js environment.
// It won't be called on client-side, so you can even do
// direct database queries. See the "Technical details" section.
export async function getStaticProps() {
  // Call an external API endpoint to get posts.
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // By returning { props: posts }, the Blog component
  // will receive `posts` as a prop at build time
  return {
    props: {
      posts
    }
  }
}

export default Blog

nextjs-classic.js

import { Home } from '../src/pages'

export default { Home, getStaticProps };

nextjs-new.js

export { Home as default, getStaticProps } from '../src/pages'