Pages

​

File convention

src/
└── app/
    └── pages/
        ├── dashboard/
        │   ├── page.tsx            # default-exports Extensions.definePage(...)
        │   └── pipeline-chart.tsx  # helper used by this page
        └── sync-log/
            └── page.tsx

https://app.attio.com/{workspaceSlug}/apps/{appSlug}/{pageSlug}

​

Discovery rules

• Page folders sit directly inside src/app/pages/. Pages do not nest: src/app/pages/reports/weekly/page.tsx is a build error.
• Folder names follow the same format as extension ids: lowercase kebab-case, starting with a letter, containing only lowercase letters, digits and single hyphens, at most 64 characters.
• Each folder contains exactly one definition file, page.tsx or page.ts. Other files in the folder are ignored by discovery; import them from page.tsx like any other module.
• The definePage(...) call must be the file’s default export directly.

​

Example

import React from "react"
import {Extensions, Grid, Card, Typography} from "attio/client"

import {PipelineChart} from "./pipeline-chart"

export default Extensions.definePage({
  name: "Dashboard",
  Page: () => (
    <Grid maxColumns={3}>
      <Card title="Open deals">
        <Typography.Title>42</Typography.Title>
      </Card>
      <Card title="Pipeline">
        <PipelineChart />
      </Card>
    </Grid>
  ),
})

​

Sidebar

​

Loading

​

Errors

​

Build errors

• A folder contains both page.ts and page.tsx. Keep exactly one.
• A page.tsx sits directly in src/app/pages/ rather than in a subfolder.
• A folder name is not a valid slug (see the format above).
• A page.tsx is nested more than one folder deep.
• The file doesn’t default-export an Extensions.definePage() call.