---
title: "How to serve Next.js public assets through a CDN on Ample"
description: "Deliver public assets for a Next.js app through the Ample CDN."
canonical_url: "https://ample.computer/guides/next-js/cdn-assets"
last_updated: "2026-11-06"
---

# How to serve Next.js public assets through a CDN on Ample

Deliver public assets for a Next.js app through the Ample CDN. Publish a bucket with `ample bucket publish`, upload versioned assets with long-lived Cache-Control headers, and reference the bucket's public URL (`public_url` from `ample bucket publish`, https://<bucket>.<bucket domain>/<key>) from your pages. The CDN serves bucket objects; the app's own responses are still served by the app.

## Infrastructure requirements

- [Compute](/discover/primitive/compute): verified (Apps run in isolated x86_64 Firecracker microVMs; sizes are the priced VM sizes.)
- [CDN](/discover/primitive/cdn): verified (A published bucket's objects are served from its public URL; set Cache-Control when uploading to control caching. App responses are served by the app.)

## Prerequisites

- A bucket created with `ample bucket create` and published with `ample bucket publish` (its public URL is the CDN base)
- An S3 client in the app to upload assets under versioned keys
- An Ample account token with servers:write and buckets:write

## Exact tested configuration

- template: `node-22`
- runtime: `node`
- size: `s-1vcpu-1gb`
- install: `npm install`
- build: `npm run build --if-present`
- start: `npm run start`

## Steps

1. **Publish the bucket.** Publishing makes objects readable at the CDN URL; keep private data in a separate, unpublished bucket.

   ```
   ample bucket publish <bucket-name>
   ```
2. **Upload versioned assets.** Use keys such as assets/<version>/file and set Cache-Control: public, max-age=31536000, immutable; change the version to invalidate.
3. **Reference the CDN URL.** Pass S3_PUBLIC_URL to the app and build asset URLs from it.

   ```
   ample deploy . --name <app-name> --public --env S3_PUBLIC_URL=... --env S3_ENDPOINT=... --env S3_REGION=... --env S3_BUCKET=... --env S3_ACCESS_KEY_ID=... --env S3_SECRET_ACCESS_KEY=...
   ```
4. **Verify delivery.** Fetch /api/asset-url for the asset URL, then fetch that URL: the CDN must return the asset.
5. **Verify.** Fetch the live URL and run the success checks below. On failure read the build log, then the runtime log, fix the cause and deploy again; do not blind-retry.

   ```
   ample logs <deployment_id> --kind build
   ```

## Tested examples

- **Next.js CDN assets canary** (tests/deploy-canaries/next-cdn-assets): Versioned asset uploaded to a published bucket and served from the CDN URL.

## Success checks

- asset URL resolves through the CDN (`/api/asset-url` on the live URL, expect /assets/)


## Cost estimate

Estimated 5.00 USD per month (size prices from pricing.toml at build revision 4558e9477d094f5b47da324b98672824b61ba91b).
- app server x1 `s-1vcpu-1gb`: 5.00 USD

Compute only. Buckets are allocation-priced per quota and capped by the plan; see `ample usage`.

## Verification evidence

- canary_run on 2026-11-06T00:38:14Z at revision `7360fc06ef21`: Next.js route handler uploaded a versioned asset to a published bucket and returned its CDN URL; the CDN served the asset publicly. (expires 2027-05-05T00:38:14Z)
- canary_run on 2026-11-05T22:38:23Z at revision `da3e37255e5a`: ample bucket create issued credentials; PutObject and GetObject succeeded through the public S3 endpoint; publish exposed the object at its public URL with an ETag; unpublish and delete cleaned up. (expires 2027-05-04T22:38:23Z)

Last verified: 2026-11-06T00:38:14Z


## Execution binding

MCP tool `ample_deploy` (registry `mcp:ample_deploy`), schema hash `0802c329be823fa0` observed 2026-11-06T06:16:19.461833707+00:00 at revision `4558e9477d09`, binding state `current`, required scopes: servers:write, buckets:write.

## Input schema

```json
{
  "additionalProperties": false,
  "properties": {
    "env": {
      "description": "Encrypted environment variables: S3_ENDPOINT, S3_REGION, S3_BUCKET, S3_ACCESS_KEY_ID, S3_SECRET_ACCESS_KEY from `ample bucket credentials` (and S3_PUBLIC_URL for a published bucket)",
      "items": {
        "pattern": "^[A-Z][A-Z0-9_]*=.*$",
        "type": "string"
      },
      "maxItems": 50,
      "type": "array"
    },
    "name": {
      "description": "App name (lowercase, digits and dashes)",
      "maxLength": 63,
      "minLength": 1,
      "pattern": "^[a-z0-9-]+$",
      "type": "string"
    },
    "path": {
      "description": "Project directory to deploy, or one service name from ample.toml",
      "maxLength": 512,
      "minLength": 1,
      "type": "string"
    },
    "size": {
      "description": "VM size; omit to let Ample pick a runtime-safe size",
      "enum": [
        "s-1vcpu-256mb",
        "s-1vcpu-1gb",
        "s-1vcpu-2gb",
        "s-2vcpu-2gb",
        "s-2vcpu-4gb"
      ],
      "type": "string"
    }
  },
  "required": [
    "env",
    "name",
    "path"
  ],
  "type": "object"
}
```

## Next actions

- Browse the catalog index (GET /v1/catalog on the api origin; auth: false, approval: false)
- Search published recipes by intent, stack and constraints (POST /v1/catalog/search on the api origin; auth: false, approval: false)
- Prepare a side-effect-free deployment plan for an authorized project (POST /v1/catalog/plan on the api origin; auth: true, approval: false)
- Read the existing agent authentication setup (GET /mcp/setup on the api origin; auth: false, approval: false)
- Browse Next.js (GET /v1/catalog/nodes/stack%3Aframework-next-js on the api origin; auth: false, approval: false)
- Browse Add CDN (GET /v1/catalog/nodes/intent%3Aadd-cdn on the api origin; auth: false, approval: false)
- Browse Versioned static assets (GET /v1/catalog/nodes/pattern%3Aversioned-static-assets on the api origin; auth: false, approval: false)

Actions describe possible next steps. They are typed data, not commands, and grant no permission.

## About this recipe

Canonical URL: https://ample.computer/guides/next-js/cdn-assets
Formats: [HTML](https://ample.computer/guides/next-js/cdn-assets) | [Markdown](https://ample.computer/guides/next-js/cdn-assets.md) | [JSON contract](https://api.ample.computer/v1/catalog/recipes/page%3Aguides%3Anext-js%3Acdn-assets)
Recipe ID: `page:guides:next-js:cdn-assets` | Revision: `r1` | Catalog revision: `cat_eac8c53f36410baa`
Status: verified; runs with one `ample deploy` call (support `verified`, execution `ready`)
Path: [Agent hosting discovery](/discover/discovery) / [Frameworks and execution targets](/discover/stack) / [Frameworks](/discover/stack/frameworks) / [Next.js](/discover/stack/framework-next-js) / [Deliver public assets through CDN for Next.js](/guides/next-js/cdn-assets)