TSX pages

Create static, dynamic, and server-rendered pages with React components.

Overview

Use TSX pages for component-heavy pages, dynamic paths, and request-time server rendering.

export default function AboutPage() {
  return (
    <html lang="en">
      <head>
        <title>About</title>
      </head>
      <body>
        <h1>About</h1>
      </body>
    </html>
  )
}

src/pages/about.tsx becomes /about.

Index Pages

index.tsx maps to its parent folder.

src/pages/index.tsx becomes /.
src/pages/blog/index.tsx becomes /blog.

Dynamic Pages

A bracket segment becomes a route parameter. Static dynamic routes export paths.

import type { PageContext } from "@fulldotdev/sitex"

export const paths = [
  {
    params: { slug: "hello-world" },
    props: { title: "Hello world" },
  },
  {
    params: { slug: "second-post" },
    props: { title: "Second post" },
  },
]

export default function BlogPost({
  params,
  props,
}: PageContext<{ title: string }>) {
  return (
    <article>
      <h1>{props.title}</h1>
      <p>Slug: {params.slug}</p>
    </article>
  )
}

src/pages/blog/[slug].tsx can render /blog/hello-world and /blog/second-post.

Server Pages

Export render = "server" when a page needs request-time data.

import type { PageContext } from "@fulldotdev/sitex"

export const render = "server"

export default function PreviewPage({ request }: PageContext) {
  const url = request ? new URL(request.url) : undefined

  return (
    <html lang="en">
      <body>
        <h1>Preview</h1>
        <p>{url?.searchParams.get("token")}</p>
      </body>
    </html>
  )
}

Keep pages static unless they need the request.

Page Data

Static TSX pages can export data for indexes, cards, and navigation.

export const data = {
  title: "About",
  description: "Learn about our team.",
}

export default function AboutPage() {
  return <h1>{data.title}</h1>
}

Read Pages API for getPages and getPage.