Prepared Docs

Prepared Docs

⌘K

    Loading navigation…

User

  1. Working On Features
  3. Your First Page

Your First Page

Creating pages with routing and data fetching.

Quick Reference

Vite apps (dispatch, responder, caller):

  • Use React Router for routing
  • Client-side rendering only
  • Data fetching with Apollo useQuery

Next.js apps (docs, beacon):

  • File-based routing in app/ directory
  • Server Components for data fetching
  • Client Components for interactivity

Vite: Creating a Page

1. Add Route

2. Create Page Component

3. Access Route Params

Next.js: Creating a Page

1. Create File in app/ Directory

2. Dynamic Routes

3. Client Components

For interactivity, use Client Components:

Navigation

Vite: React Router Link

Next.js: Link Component

Layouts

Vite: Layout Component

Next.js: layout.tsx

Data Fetching Patterns

Vite: Apollo Client

Next.js: Server Components

Styling Pages

Use Box props or co-located SCSS:

Error Boundaries

Wrap pages in error boundaries:

Related Documentation

  • Making a Feature - Code splitting and dynamic imports
  • Component Patterns - Component organization
  • GraphQL Operations - Data fetching
  • Styling - SCSS and BEM patterns

Reference Files

For more detailed technical guidance, see these reference files:

  • turbo/AGENTS.md - Project structure and tech stack
  • react-best-practices SKILL.md - Framework-specific patterns

Previous

Working on features / Component Patterns

Next

Working on features / Making a Feature

On this page

Quick Reference
Vite: Creating a Page
1. Add Route
2. Create Page Component
3. Access Route Params
Next.js: Creating a Page
1. Create File in app/ Directory
2. Dynamic Routes
3. Client Components
Navigation
Vite: React Router Link
Next.js: Link Component
Layouts
Vite: Layout Component
Next.js: layout.tsx
Data Fetching Patterns
Vite: Apollo Client
Next.js: Server Components
Styling Pages
Error Boundaries
Related Documentation
Reference Files