Rendering Pages

Fetch and display dynamic pages on your storefront.

Updated March 29, 2026

On this page

Overview

Render content type items on your storefront using the SDK and your own components.

Dynamic Pages

typescript

// app/[...slug]/page.tsx
import dash from "@/lib/dash"

export default async function DynamicPage({ params }) {
  const path = "/" + params.slug.join("/")
  const page = await dash.pages.getByPath(path)

  if (!page) return <div>Page not found</div>

  return (
    <div>
      <h1>{page.page.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: page.page.content }} />
    </div>
  )
}

typescript

// app/team/page.tsx
import dash from "@/lib/dash"

export default async function TeamPage() {
  const { items } = await dash.contentTypes.listItems("team-members")

  return (
    <div className="grid md:grid-cols-3 gap-6">
      {items.map(member => (
        <div key={member.slug} className="text-center">
          <img src={member.fields?.photo} alt={member.title} className="rounded-full" />
          <h3>{member.title}</h3>
          <p>{member.fields?.role}</p>
        </div>
      ))}
    </div>
  )
}

typescript

// Fetch page data by name
const page = await dash.pages.getByName("about-us")

// Fetch page data by path
const page = await dash.pages.getByPath("/about")

// List all pages
const { pages } = await dash.pages.list()

Rendering Pages

Rendering Pages

Overview

Dynamic Pages

Content Type Listing

Page Builder Data

Next Steps