Here are a few common examples of using the Ghost Content API in a Next.js web application.

The flexibility of the Ghost Content API allows you to feed posts, pages and any other pieces of content from Ghost site into a Next.js JavaScript app.

Below are a few examples of how content from Ghost can be passed into a Next.js project. If you just landed here, see the Next.js page for more context!

Getting pages

Pages can be generated in the same fashion as posts, and can even use the same dynamic route file.

export async function getPages() {
  return await api.pages
    .browse({
      limit: "all"
    })
    .catch(err => {
      console.error(err);
    });
}

Adding post attribute data

Using the include option within the Ghost Content API means that attribute data, such as tags and authors, will be included in the post object data:

export async function getPosts() {
  return await api.posts
    .browse({
      include: "tags,authors",
      limit: "all"
    })
    .catch(err => {
      console.error(err);
    });
}

Rendering author pages

An author can be requested using the authors.read() endpoint.

export async function getAuthor(authorSlug) {
  return await api.authors
    .read({
      slug: authorSlug
    })
    .catch(err => {
      console.error(err);
    });
}

A custom author template file can be created at pages/authors/[slug].js, which will also prevent author URLs colliding with post and page URLs:

import { getAuthor } from '../../api/authors';

const AuthorPage = (props) => {
  return (
    <div>
      <h1>{props.author.name}</h1>
      <div dangerouslySetInnerHTML={{ __html: props.author.bio }} />
    </div>
  )
}

AuthorPage.getInitialProps = async (params) => {
  const author = await getAuthor(params.query.slug);
  return { author: author }
};

export default AuthorPage;

Further reading

Check out the extensive Next.js documentation and learning courses for more information and to get more familiar when working with Next.js.