How to show a blog preview from your Ghost CMS Site on NextJS/React

Hey, if you're new here, we're Opinly AI, and we're on a mission to make competitor analysis for online businesses as simple as having your competitors urls. Check it out here.

We recently wanted to show a preview of our first blog post over on our main site. With a bit of help from v0 over at Vercel and the @tryghost/content-api package, it took 10 minutes to get it all setup. Read on to find out how we did it.

First off is setting up the ghost content api package. Run the install command below (pnpm, typescript and zsh on a mac, because what else in 2023)

Then add the client file (nested in the NextJS package in our SST Monorepo) at clients/ghost.ts:

Go ahead and use our public key to query data from our blog if you like, its in our frontend JS bundle anyways 😉.

To set this up we had to go into the Ghost Admin Dashboard and add a custom integration. Just grab your public key and you're good to go.

Once we've got that added we need to query the data on our frontend. We'll use react-query for this:

Now that we've got a reusable hook, we just need a component to use in the website.

We asked v0 to make a blog post preview component. Heres what it initially produced. There was some tweaks to be made to make a responsive design and make the image display nicely (compare from the original url if you like), but it still cut down how long it would have taken from hours to minutes.

Should we have a loading spinner in there? Probably. But its below the initial page view on https://www.opinly.ai/pricing, so thats a problem for another day. Also notice the file is kebab case, because we're all about aesthetics here at Opinly.

Find the Card component over at shadcn.

From there you're good to put it all together:

We'll be implementing this component across the site where possible, and this was just our initial venture into using the Ghost API, so you know as well as we do whats possible. Even reading this post over, the hook should probably be integrated in the component, but again, a problem for another day.

If the sound of getting automated feature and pricing comparison against your competitors (with actionable insights) sounds appealing, check out the site at https://www.opinly.ai.

Thanks for reading 🚀

(Bonus: Song on repeat for writing this post)