05
Page Companion Files
Every view template page can be paired with a TypeScript or JavaScript companion file to fetch data and define SEO metadata before rendering.
Props Export
Companion files can return page data via a default function, named props function, or direct export (objects, arrays, primitives).
- Supported Export Formats: Async/Sync function (default or named props), direct plain object export, or direct array / primitive export (e.g. export default [1, 2, 3]).
- Template Access: Plain object properties are destructured into template locals (<%= title %>) and also accessible via props (<%= props.title %>). Primitives and arrays are accessible directly through props (<%= props %>). If no companion file or export exists, props is null.
app/products/[id].ts (Page Companion)
import type { Request, Response } from '@nxpress/core';
export default async function props(req: Request, res: Response) {
const products = [
{ id: 1, name: 'Laptop', price: 999 }
];
return {
title: 'Store',
products
};
}Metadata and SEO Export (metadata)
Companion files can export page-level metadata as a static object or an async dynamic function.
- Using Globals in Metadata: If you need global configuration or constants inside metadata(), directly import your config (e.g. @/nxpress.config.json) or custom constants module.
Static Metadata Object
import type { NxpressMetadata } from '@nxpress/core';
export const metadata: NxpressMetadata = {
title: 'Store Products - Nxpress',
description: 'Explore our wide selection of electronics.',
keywords: ['shop', 'store', 'electronics'],
openGraph: {
title: 'Store Products',
description: 'Explore our wide selection of electronics.',
image: '/og-image.png'
},
twitter: {
card: 'summary_large_image',
creator: '@nxpress'
}
};Dynamic Metadata Function
import type { NxpressMetadata, Request, Response } from '@nxpress/core';
export async function metadata(req: Request, res: Response): Promise {
return {
title: `Product #${req.params.id}`,
description: `Dynamic product details page.`
};
} Using App Globals / Config in Metadata
import type { NxpressMetadata, Request, Response } from '@nxpress/core';
import config from '@/nxpress.config.json';
export async function metadata(req: Request, res: Response): Promise {
const siteTitle = config.globals?.title || 'Nxpress Store';
return {
title: `${siteTitle} - Product #${req.params.id}`,
description: `View details for product #${req.params.id}.`
};
}