Pages

Every URL in your application is powered by a page component. These a special React Server Components that serve as the entry points into your application.

Page components

Page components are responsible for rendering the content users see when visiting URLs in your application. These components are exported from a module in the src/pages directory that ends with .page.tsx.

// src/pages/about.page.tsx

export default function AboutPage() {
  return <div>Welcome to my application!</div>;
}

Visiting /about renders the above AboutPage component.

Index pages

Pages nested under directories create a hierarchy of URLs. When a directory contains an index.page.tsx file, the page will be rendered when visiting the directory's URL.

// src/pages/posts/index.page.tsx

export default function PostsIndexPage() {
  return <div>Posts Index Page</div>;
}

Visiting /posts will render the PostsIndexPage component.

Dynamic pages

Pages can contain dynamic params in their URLs. These params are denoted by a $ followed by the name of the param.

// src/pages/posts/$slug.page.tsx

import { PageProps } from "@twofold/framework/types";

export default function PostsSlugPage({ params }: PageProps<"slug">) {
  return <div>You are viewing: {params.slug}</div>;
}

The above PostsSlugPage component will be rendered when visiting /posts/hello-world, /posts/another-post, or any other URL that matches the pattern /posts/:slug.

Props

Every page component is given a handful of props when rendered.

It is important to note that these params are immutable and should not be modified. Changing these values does not have any effect on the URL or the page's state and can lead to unexpected behavior.

Types

A special PageProps type can be imported from @twofold/framework/types that provides types for the props passed to pages.

This type can take a type argument that represents the dynamic params in the URL.

// src/pages/posts/$slug.page.tsx

import { PageProps } from "@twofold/framework/types";

export default function PostsSlugPage(props: PageProps<"slug">) {
  // ...
}

And for pages without dynamic params, the PageProps type can be used without any type arguments.

// src/pages/posts/index.page.tsx

import { PageProps } from "@twofold/framework/types";

export default function PostsSlugPage(props: PageProps) {
  // ...
}

URL mapping

The table below serves as a reference for how URLs map to page components. Each page in the src/pages directory is listed with the URL it will render.