Learn how to spin up a JavaScript app using Ghost as a headless CMS and build a completely custom front-end with the Next.js React framework.
posts.js
within an lib/
directory. This file will contain all the functions needed to request Ghost post content, as well as an instance of the Ghost Content API.
Install the official JavaScript Ghost Content API helper using:
posts.js
file using a static import
statement:
url
value to the URL of the Ghost site. For Ghost(Pro) customers, this is the Ghost URL ending in .ghost.io
, and for people using the self-hosted version of Ghost, it’s the same URL used to view the admin panel.
Create a custom integration within Ghost Admin to generate a key and change the key
value.
posts.browse()
endpoint can be used to get all the posts from a Ghost site. This can be done with the following code as an asynchronous function:
export
function means your content will be available throughout the application.
props
. Next.js extends upon that concept with getStaticProps
. This function will load the Ghost site content into the page before it’s rendered in the browser.
Use the following to import the getPosts
function created in previous steps within a page you want to render Ghost posts, like pages/index.js
:
getStaticProps
for the given page:
Home
page in pages/index.js
via the component props
:
pages/
directory. To find out more about how pages work check out the official documentation.
posts.read()
it’s possible to query the Ghost Content API for a particular post using a post id
or slug
.
Reopen the lib/posts.js
file and add the following async function:
postSlug
parameter, which will be passed down by the template file using it. The page slug can then be used to query the Ghost Content API and get the associated post data back.
Next.js provides dynamic routes for pages that don’t have a fixed URL / slug. The name of the js file will be the variable, in this case the post slug
, wrapped in square brackets – [slug].js
.
In order to generate these routes, Next.js needs to know the slug for each post. This is accomplished by using getStaticPaths
in posts/[slug].js
.
Create another function in lib/posts.js
called getAllPostSlugs
. The maximum amount of items that can be fetched from a resource at once is 100, so use pagination to make sure all the slugs are fetched:
getSinglePost()
and getAllPostSlugs()
can be used within the pages/posts/[slug].js
file like so:
<Link/>
component. Calling it can be done with:
Link
component is used like so:
Link
component works and it’s use within Next.js apps check out their documentation.
include
option within the Ghost Content API means that attribute data, such as tags and authors, will be included in the post object data:
authors.read()
endpoint.
pages/authors/[slug].js
, which will also prevent author URLs colliding with post and page URLs:
post.published_at
, is returned as a date timestamp. Modern JavaScript methods can convert this date into a selection of humanly readable formats. To output the published date as “Aug 28, 1963”:
{post.dateFormatted}
.