Fetching data

We've made it easy for you to fetch the data and content you create with Outstatic by providing a simple API. You should use this API on the front end of your Next.js website.

Fetching collections

To fetch all your collections, without the documents, use the getCollections function. It will return an array of strings, each string being the name of a folder under /outstatic/content/.

Fetching documents

To fetch all the documents from a collection, you should use the getDocuments function inside your getStaticProps or getServerSideProps functions. The getDocuments function accepts two parameters: the name of the collection as a string, and an array with the fields to be retrieved. It returns an array of Documents sorted by date, with the most recent publishedAt documents first.

// Fetching all documents from a collection

export const getStaticProps = async () => {
  const allPosts = getDocuments('posts', [
    'title',
    'publishedAt',
    'slug',
    'coverImage',
    'description',
    'author'
  ])

  return {
    props: { allPosts }
  }
}
javascript

Fetching documents by slug

Documents can be fetched by slug, this is usually helpful when using Next.js' Dynamic Routes. The function getDocumentBySlug takes three parameters: the name of the collection as a string, the slug of the document, and an array with the fields to be retrieved.

// Example of a /pages/posts/[slug].tsx page

export async function getStaticProps({ params }: Params) {
  const post = getDocumentBySlug('posts', params.slug, [
    'title',
    'publishedAt',
    'slug',
    'author',
    'content',
    'coverImage'
  ])
  const content = await markdownToHtml(post.content || '')

  return {
    props: {
      post: {
        ...post,
        content
      }
    }
  }
}
javascript

Keep in mind that the content is returned as Markdown. In order to convert it to HTML you should use a library such as remark. To see an example of how you can use remark to convert Markdown to html, please take a look at our Blog Example template.

Fetching document paths to use with getStaticPaths

We provide a simple helper function so you can easily get all the document paths for a specific collection. This is helpful to feed the array of slugs needed for Next.js to statically generate dynamic routes.

// Fetching document paths

export async function getStaticPaths() {
  return {
    paths: getDocumentPaths('posts'),
    fallback: false
  }
}
javascript

Usage examples:

If you'd like to check out examples of how to use these functions, please refer to our Example Blog repository.