Create and configure static and dynamic pages in OlonJS

Every page in OlonJS starts as a JSON file in src/data/pages/. You compose the page by listing sections with their data and settings, and OlonJS turns that JSON into a fully rendered Next.js route. This guide covers both static pages and dynamic collection routes.

Creating a static page

Creating a dynamic (collection) page

Dynamic pages generate one URL per item in a collection. You create them by naming the file with a [slug] segment and adding a collection field to the JSON. Create a directory under src/data/pages/ whose name matches the collection route prefix, then add a [slug].json template file inside it:

src/data/pages/products/[slug].json

{
  "id": "product-detail-page",
  "slug": "products/[slug]",
  "collection": { "source": "products", "paramKey": "slug" },
  "meta": {
    "title": "Product detail",
    "description": "A single product from the products collection."
  },
  "sections": [
    {
      "id": "product-detail-body",
      "type": "post-detail",
      "data": {
        "backLabel": "All products",
        "item": { "$ref": "collection:current" }
      },
      "settings": { "paddingTop": "xl" }
    }
  ]
}

The special $ref value "collection:current" tells OlonJS to inject the collection item matching the current URL slug. At build time the framework generates individual baked pages for every item in the referenced collection, so each product gets its own pre-rendered route at /products/<id>.

The collection.paramKey must match the bracket name in the filename. If the file is [slug].json, use "paramKey": "slug". If the file is [id].json, use "paramKey": "id".

Here is the real dynamic page template for Inkwell posts as a reference:

src/data/pages/posts/[slug].json

{
  "id": "post-detail-page",
  "slug": "posts/[slug]",
  "collection": { "source": "posts", "paramKey": "slug" },
  "meta": {
    "title": "Post — Inkwell Journal essay detail",
    "description": "A single essay from the Inkwell Journal posts collection."
  },
  "sections": [
    {
      "id": "post-detail-body",
      "type": "post-detail",
      "data": {
        "backLabel": "All posts",
        "item": { "$ref": "collection:current" }
      },
      "settings": { "paddingTop": "xl" }
    },
    {
      "id": "post-detail-related-tags",
      "type": "related-tags",
      "data": {
        "label": "Relations demo",
        "title": "Filed under",
        "emptyLabel": "This post has no topics yet.",
        "item": { "$ref": "collection:current" },
        "tags": { "$ref": "../../collections/tags/tags.json" }
      },
      "settings": {}
    }
  ]
}

Page sections quick reference

OlonJS ships 13 built-in section types. Use the type field in each section entry to select one.

`type`	Typical use
`header`	Site-wide navigation bar
`footer`	Site-wide footer with links
`hero`	Full-width above-the-fold hero with image, title, and CTAs
`page-hero`	Compact interior-page header with label and description
`posts-list`	Grid or timeline of posts pulled from the posts collection
`tags-list`	Card grid of tags pulled from the tags collection
`post-detail`	Full body rendering of a single post item
`related-tags`	Tag chips derived from a post’s `tags` relation field
`tag-detail`	Header block for a single tag item
`tag-posts`	List of posts that carry a given tag (inverse relation)
`content-block`	Rich text section with label, title, paragraphs, and optional image
`stats-band`	Horizontal band of metric / stat tiles with icons
`cta-banner`	Full-width call-to-action band with primary and secondary buttons

SEO metadata

Set meta.title and meta.description on every page file. OlonJS uses these values to populate the Next.js <head> and expose them in the MCP manifest for AI-agent discovery.

{
  "id": "about-page",
  "slug": "about",
  "meta": {
    "title": "About Inkwell Journal and this collections demo",
    "description": "Inkwell Journal is a working OlonJS demo: posts and tags live as separate collections, related through keys on the post side and resolved at render time."
  },
  "sections": []
}

Write meta.description as a standalone sentence that makes sense out of context — it appears in Google snippets, link previews, and the AI-agent site manifest.

Dynamic collection pages share one meta block in the template. If you need per-item metadata (e.g. the post title as the page title), set the value to "collection:current" and OlonJS will resolve it from the current item at render time. Check the section schema for the specific field names your section type supports.

Get Started

Core Concepts

Building Your Site

Configuration

MCP & AI

Create and configure static and dynamic pages in OlonJS

Creating a static page

Creating a dynamic (collection) page

Page sections quick reference

SEO metadata

​Creating a static page

​Creating a dynamic (collection) page

​Page sections quick reference

​SEO metadata

Creating a static page

Creating a dynamic (collection) page

Page sections quick reference

SEO metadata