NNexusDocumentation
Live demo
GuideCustomize

Layouts & New Pages

Create dashboard and standalone pages using the correct App Router layout and public URL.

9 min readCustomizeUpdated for Nexus 0.1
On this page 5

What you will learn

  • Create a dashboard page.
  • Choose dashboard or standalone layout.
  • Keep route metadata and navigation aligned.

Create a dashboard page

Place workspace pages below app/app so app/app/layout.tsx wraps them with AppShell.

tsx
export default function ReportsPage() {
  return (
    <div className="page-stack reports-page">
      <section className="panel">
        <div className="section-header">
          <div>
            <h1>Reports</h1>
            <p>Review the latest operating metrics.</p>
          </div>
        </div>
      </section>
    </div>
  );
}

Register a clean public route

When strip-app routing is enabled, add new workspace route families to workspaceRoutes in next.config.ts. Then visit the clean URL such as /reports.

tsx
const workspaceRoutes = [
  "/dashboard",
  "/reports/:path*"
];

Choose standalone rendering

Place sign-in, maintenance, error, or marketing-style pages outside app/app when they should not show the dashboard shell. Add a local layout only when those pages share a separate shell.

Page completion checklist

A new route should integrate with the complete template.

  • Navigation label and active state are correct.
  • Topbar search opens the public route.
  • Page title uses the correct heading hierarchy.
  • Empty, loading, error, and populated states are represented.
  • Mobile layout does not create horizontal clipping.
  • pnpm check succeeds.

Continue learning