Nxpress LogoNxpressv1.3.8
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}.`
  };
}