Boundary Layer in Next.js (App Router)

The Boundary layer represents system entry points — places where external input enters your application and is translated into internal calls.

The boundary layer contains all Next.js system entry points, including UI routes (page.tsx), Server Actions, and Route Handlers.

• App Router Pages (page.tsx, layout.tsx) as UI route entry points
• Server Actions (action.ts)
• Route Handlers (route.ts)

Responsibilities:

• External input adaptation and validation
• Authentication resolution
• Tenant and request context resolution
• Authorization enforcement (access control)
• Orchestration of application and domain services

This layer forms the primary trust boundary between external input and internal logic.

✅ 1. App Router Pages

• page.tsx and
• layout.tsx

UI Entry Points

• Triggered by HTTP GET requests
• Represent route-level boundaries

Responsible for:

• Reading params / searchParams
• Calling server components, services, or server actions
• Rendering UI

User Request (GET /products)
        ↓
page.tsx
        ↓
Application / Domain logic

👉 page.tsx is a boundary because it is the first touchpoint between the web and your app logic.

✅ 2. Server Actions

Command Entry Points

• Triggered by form submissions or client events
• Handle mutations
• Translate UI intent → application commands

User clicks "Save"
        ↓
Server Action
        ↓
Application / Domain logic

"use server";
 
export async function createProduct(formData: FormData) {
  // boundary responsibility
}

✅ 3. Route Handlers (route.ts)

API / Protocol Entry Points

• Triggered by HTTP verbs (GET, POST, PUT, etc.)

Used for:

• APIs
• Webhooks
• External integrations

External System / API Client
        ↓
route.ts
        ↓
Application / Domain logic

How They Differ (Important)

💡 All are boundaries, but not all boundaries mutate state.

Recommended Boundary Rules

To keep architecture clean:

page.tsx SHOULD:

• Read params, searchParams
• Call application services
• Pass data to components
• Not contain business logic

Server Actions SHOULD:

• Validate input
• Call application services
• Handle mutations

Route Handlers SHOULD:

• Adapt HTTP → app calls
• Handle auth, headers, status codes

Example Boundary Layer Structure

app/
  api/
    products/
      route.ts        ← API boundary
  products/
    page.tsx          ← UI boundary
    actions.ts        ← Server Actions boundary

Unfixed Diagram

Fixed Diagram