getCollection

Load all entries from a content or data collection.

Signature

getCollection<T = Record<string, unknown>>(name: string): CollectionEntry<T>[]

Call getCollection from a page module to load every entry in a named collection. The collection must be declared in your zfb.config under collections. The function is synchronous — it returns a plain array, not a Promise. Schema validation runs against each entry as it is read, so by the time the array reaches your component, frontmatter is already typed and verified.

CollectionEntry shape

Each entry has the following fields:

• slug: string — the filename without its .md extension, normalized to forward-slash paths. Nested files produce path-based slugs (e.g. "2024/hello").
• data: T — the parsed frontmatter, typed by the generic parameter.
• body: string — the raw markdown body with frontmatter stripped.
• module_specifier: string — stable bridge key in the form mdx://<collection>/<slug>. Used internally by the renderer; pass to Content lookup if building a custom bridge.
• Content: (props: ContentProps) => ContentElement — renderable component for this entry. Renders via the renderer bridge when available; falls back to a <pre data-zfb-content-fallback> block in test and dev contexts where the bridge is absent.

ContentProps

type ContentProps = {
  components?: Record<string, unknown>;
};

The components prop mirrors the Astro <Content components={...}> convention: a flat map of element name to override component. Use defaultComponents from "@takazudo/zfb" as a base:

import { defaultComponents } from "@takazudo/zfb";

<entry.Content components={{ ...defaultComponents, h2: MyHeading }} />

Example

A typical use case is rendering a list of blog posts on an index page.

import { getCollection } from "zfb/content";

export default function BlogIndex() {
  const posts = getCollection<{ title: string; date: string }>("blog");

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.slug}>
          <a href={`/blog/${post.slug}`}>{post.data.title}</a>
        </li>
      ))}
    </ul>
  );
}

Note that getCollection returns synchronously — no await needed. For dynamic per-entry pages, combine getCollection with a paths() export — see paginate for the related pattern.