Skip to Content
Documentation
Starter kits
Utilities
Get Pro
Open source
Starter kits

Adding pages

How to add new pages to your app

In this guide you'll learn how to add new pages to your application and add some basic data fetching.

For the sake of this guide, let's add a new projects features with a list page and a details page with some tabs to illustrate how you can use layouts and data prefetching.

Project list page

Let's start by creating the list page. Create a new file in apps/web/features/projects/list/list-page.tsx

We group all project list page related files in a list folder to keep things organized.

'use client'

export function ProjectsListPage(props: {
  params: {
    workspace: string
  }
}) {
  return <div>Projects list</div>
}

List page route

The route for this page will be $workspace/projects, let's go ahead and create the route file in apps/web/src/routes/_app/$workspace/_dashboard/projects/index.tsx.

import { createFileRoute } from '@tanstack/react-router'

import { ProjectsListPage } from '#features/projects/list/list-page'

export const Route = createFileRoute('/_app/$workspace/_dashboard/projects/')({
  head: () => ({
    meta: [
      {
        title: 'Projects',
      },
    ],
  }),
  component: RouteComponent,
})

function RouteComponent() {
  const params = Route.useParams()
  return <ProjectsListPage params={params} />
}

List page navigation

Now that the page and route are created, we can add a navigation link to the sidebar.

Open apps/web/features/common/components/app-sidebar.tsx and add a new nav item to the navigation.

<NavGroup>
  // ... other links
  <AppSidebarLink
    to="/$workspace/projects"
    params={{
      workspace,
    }}
    activeOptions={{
      exact: false,
    }}
    label="Projects"
    icon={<LuFolder />}
    hotkey="navigation.projects"
  />
</NavGroup>

Now open the application and navigate to the new projects page.

List page fetching data

Let's assume we already have a projects API endpoint that returns a list of projects.

Open the list-page.tsx file and add a useQuery hook to fetch the projects.

'use client'

import { DataGrid, Page, PageBody, PageHeader } from '@saas-ui-pro/react'
import { LoadingOverlay, LoadingSpinner } from '@saas-ui/react'

import { ProjectDTO } from '@acme/api/types'

import { useCurrentWorkspace } from '#features/common/hooks/use-current-workspace'
import { api } from '#lib/api'

export function ProjectsListPage(props: {
  params: {
    workspace: string
  }
}) {
  const [workspace] = useCurrentWorkspace()

  const { data, isLoading } = api.projects.list.useQuery({
    workspaceId: workspace.id,
  })

  const columns = useColumns<ProjectDTO>(
    (helper) => [
      helper.accessor('name', {
        header: 'Name',
      }),
    ],
    [],
  )

  return (
    <Page>
      <PageHeader title="Projects" />
      <PageBody contentWidth="full">
        {isLoading ? (
          <LoadingOverlay>
            <LoadingSpinner />
          </LoadingOverlay>
        ) : (
          <DataGrid data={data ?? []} columns={columns} />
        )}
      </PageBody>
    </Page>
  )
}

Voila! You've just created your first page with data fetching.

Next

Introduction
Adding pages