---
title: "Next.js demo"
description: "Explore a Next.js storefront and mobile checkout backend built with Inttegro."
canonical: "https://studio.inttegro.com/demos/nextjs"
format: inttegro-machine-docs/v1
language: "C#"
sdk_version: "v10.3.0"
reader_profile: optional
reader_manifest: "https://studio.inttegro.com/machine/csharp/readers/index.json"
reader_identification: "Optional: declare your client only if known and your current-session capabilities; use reader_manifest for supplemental recommendations."
preamble_estimated_tokens: 369
model_token_report: "https://studio.inttegro.com/machine/token-report.json"
preamble_questions: 5
preamble_source: "general"
recommended_mcp_tools: []
estimated_tokens: 1223
token_estimate_method: "utf8_bytes_divided_by_4"
---

## Machine preamble

**Summary:** Explore a Next.js storefront and mobile checkout backend built with Inttegro. This C# representation uses the selected SDK's native names wherever Studio has a verified mapping.

### Five questions

#### Q1. When should the reader use Next.js demo?

Use this demo guide to inspect a complete working integration and compare it with the application being built.

#### Q2. What is authoritative on this page?

The demo proves one working composition, not the only supported architecture. Follow its linked SDK and API pages for current contracts.

#### Q3. What page-specific constraint matters most?

Do not copy demo credentials, identifiers, or deployment assumptions. Recreate configuration through supported public setup paths.

#### Q4. Can Inttegro MCP materially help with this task?

No catalog ability is sufficiently specific to recommend for this page. Use the documentation directly; consult the MCP catalog only if the task later requires governed live account context or a supported operation.

#### Q5. How should the reader verify the answer and continue?

Open the hosted experience, trace the corresponding source, and verify that its SDK and API usage still matches the current linked documentation. Continue with [Read the Orders API](https://studio.inttegro.com/machine/csharp/api/orders.md) and [Review the mobile demos](https://studio.inttegro.com/machine/csharp/demos.md#mobile-demos) when those concerns enter scope.

## Document content

# Next.js demo

Build a Next.js storefront and the backend used by all four mobile demos. Web
Checkout can be embedded, modal, or hosted.

> Demo Release is interactive content. Use the canonical page to view it.

## What you’ll build

- A [Next.js App Router](https://nextjs.org/docs/app) storefront with a
  server-only checkout route
- Typed order creation with the [Inttegro TypeScript SDK](https://studio.inttegro.com/machine/csharp/sdks/typescript.md)
- React integration through [`@inttegro/react`](https://studio.inttegro.com/machine/csharp/web/react.md)
- One web order used in all three Checkout presentations
- A narrow `POST /mobile/orders` backend that returns only a finalized order ID
- Explicit completion and cancellation URLs for hosted checkout

## See the flow

The gallery shows the web order in each Checkout presentation. Order creation
and the API key stay in a server-only route.

> Demo Presentation Gallery is interactive content. Use the canonical page to view it.

## Run the demo

Install a supported [Node.js release](https://nodejs.org/en/about/previous-releases),
set the server environment values, and start Next.js. Never use `NEXT_PUBLIC_`
for the API key. The
[released README](https://github.com/inttegro/inttegro-demos/blob/nextjs-v1.8.3/nextjs/README.md)
has the exact commands.

## Key files

1. [`lib/checkout.ts`](https://github.com/inttegro/inttegro-demos/blob/nextjs-v1.8.3/nextjs/lib/checkout.ts)
   creates web and mobile orders.
2. [`app/checkout/route.ts`](https://github.com/inttegro/inttegro-demos/blob/nextjs-v1.8.3/nextjs/app/checkout/route.ts)
   validates checkout and returns JSON or a `303` redirect.
3. [`app/inttegro-demo-checkout.tsx`](https://github.com/inttegro/inttegro-demos/blob/nextjs-v1.8.3/nextjs/app/inttegro-demo-checkout.tsx)
   manages the React Checkout surface.
4. [`public/checkout-presentations.js`](https://github.com/inttegro/inttegro-demos/blob/nextjs-v1.8.3/nextjs/public/checkout-presentations.js)
   coordinates the three Checkout modes.
5. [`app/mobile/orders/route.ts`](https://github.com/inttegro/inttegro-demos/blob/nextjs-v1.8.3/nextjs/app/mobile/orders/route.ts)
   returns finalized order IDs to mobile apps.

## Before you ship

Authenticate the mobile route. Keep prices, currency, customer identity, and
fulfillment decisions on the server.

## Next

- [Browse the released source](https://github.com/inttegro/inttegro-demos/tree/nextjs-v1.8.3/nextjs)
- [Review the mobile demos](https://studio.inttegro.com/machine/csharp/demos.md#mobile-demos)
- [Read the Orders API](https://studio.inttegro.com/machine/csharp/api/orders.md)