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.
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
To fetch all the documents from a collection, you should use the
getDocuments function inside your
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.
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.
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.
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.
If you'd like to check out examples of how to use these functions, please refer to our Example Blog repository.