This website you're currently looking at is built with NextJS and Pokko.
You can see the code repository here - https://github.com/pokkocms/website
Data modelling
As with most projects, a solid data structure is key.
When using Pokko to develop websites, I try to find the lowest common denominator amongst various page types and build my data model in layers.
Metadata is something that's common for all types of content that will represent a page on a website, so we have a model for that. This model just has the "Meta title" and "Meta description" fields.
Then we have a generic "Modular content" page that inherits the Metadata model and adds fields for housing content - in this case a "modular content" multi-value field. We call this field "Body". Our home page is one of these modular pages.
Going up another level there's "generic content" pages, they can live anywhere and can be dynamically listed using the taxonomy feature of Pokko. This model inherits the Modular content model (and the Metadata model by extension) and extends it with an "Alias" (used for URL slugs) and "Title" fields.
Finally (for now) we have a Blog post page, this inherits the generic content page and simply adds a date field.
Then we have the modules that are added into the modular content field. Most of them can be found on the home page - the hero banner, various "tiles", the early access form. Most of these modules are housed in containers that have a title and summary, so there's a model we inherit from called Section that includes these fields to save repetition.
With that we have all the data models we need to build our site.
Taxonomy
With the taxonomy function in Pokko we can give some structure to our data to not only make it easier to visualise the layout of the website, but to also make it easier to query the content when connecting it to NextJS.
We start with a root node called website just to make it obvious what we're doing here.
Then we add a child node called home which is configured as a dynamically node where it itself points at the Home entry (which is a Modular page), and configured to list beneath it all Content pages using their Alias field to define their URL slug.
This means that any published entry of the model Content will represent a page on our website.
Although Blog posts inherit Content - they will not appear here as taxonomy does not traverse the hierarchy of models... yet.
Under the home node we add a news node that is another dynamic node which targets the Blog post model, building the URL slug from the Alias field (inherited from Content) fragmented by the Date field in the format yyyy/mm. So a blog post with the alias "hello" and date January 2nd, 2021 will have the URL 2021/01/hello. This will dynamically build out our site structure for blog posts.
Deploying
This website is hosted on Vercel.
After modelling the data, setting up the taxonomy, populating the content and building the NextJS website it was a simple matter of connecting vercel.com to my Github repository, configuring the environment variables and triggering a build.