Integrating Ghost into NextJS site: use GhostPro hosting with themes, or consume API? (How hard is it to create a theme?)

Integrations & API
1

We are evaluating Ghost for a large project in which we need to have a section of our site that is a sort of ‘blog’, with curated articles, which we want users to be able to comment on.

  • The site will be built in NextJS and we need to integrate the blog seamlessly into the rest of the site.
  • The client has a very specific style and style guidelines, so ‘seamlessly’ means the blog design would look like just another page of the site
  • We need to be able to integrate a large number of features into the blog – some commenting system (Discourse, Commento, etc), analytics, media (Spotify, etc). This seems relatively straightforward to do if you host with GhostPro: there are a lot of examples of how to modify the theme’s HBS.
  • But if we host with GhostPro, we would need (as per above) to make the blog look exactly like the rest of the site. How easy is it to modify an existing theme, both in terms of look, but also perhaps in terms of functionality? Or to create a custom theme? I read this article that says that either of those is quite difficult
  • If we opted to skip GhostPro hosting and simply consume the JSON API to populate pages in our NextJS site, how easy is it to integrate all the nifty things like Discourse, Commento, Spotify, etc? In particular, commenting systems.

Thanks for any info and recommendations!

2

Hey @fantasma :wave:
The Ghost theming layer is completely customisable, with full control of your HTML, CSS and JavaScript. Additionally the handlebars helpers and template code allow you to access all the content coming from Ghost.
However, it sounds like the seamlessness of switching between areas of the site is pretty important. I would suggest using Ghost as a headless CMS in that case, and using the Ghost Content API to pull content into your NextJS application. This would mean that you could use the same front-end code you’re using for the rest of the site. With regards to commenting tools you’d have to check in the NextJS community for recommended configurations and tooling. Here’s some links to our documentation that will help you inform your decision:
https://ghost.org/docs/api/v3/javascript/content/

https://spectrum.chat/next-js/general/blog-comments-for-next-js~db416bf8-45ad-4f3c-9b02-f6bf7e756f9c

Hope this helps with your decision! :slightly_smiling_face:

1 Like