page:recipes:appointment booking:next js:attachments

Host Appointment Booking with Next.js: File Attachments

Deploy an appointment booking built with Next.js on Ample using the browser file uploads pattern. Compute runs the app in an isolated microVM behind a public HTTPS URL, a managed PostgreSQL 16 database is auto-provisioned and injected as DATABASE_URL, and a private S3-compatible bucket holds objects with credentials delivered as encrypted environment variables. Verified on Next.js: content-type and size validation that rejects disallowed files, an object written to a private bucket, and a row linking the record to the object key (reject=ok upload=ok linked=ok). Not separately tested: your upload UI, allowed types, size limits, and virus scanning; treat the appointment booking-specific behavior as your application code.

Representative Queries

• Host appointment booking with Next.js: file attachments
• Where can I host Appointment booking built with Next.js?
• I need a restricted upload flow, file validation, and record-to-object linkage.

Prerequisites

• A Next.js project that builds and starts with the documented commands (next build then next start -H 0.0.0.0 -p $PORT on the node-22 template)
• A PostgreSQL driver reading DATABASE_URL at runtime (auto-provisioned when omitted, or supplied with --env)
• A bucket from ample bucket create with its credentials passed as encrypted S3_* environment variables
• An Ample account token with servers:write, databases:read, buckets:read

Workflow Steps

1. Build and Start
   next build then next start -H 0.0.0.0 -p $PORT on the node-22 template. The server must bind to 0.0.0.0 on PORT.
2. Implement the Pattern on PostgreSQL
   The fixture's module implements browser file uploads: content-type and size validation that rejects disallowed files, an object written to a private bucket, and a row linking the record to the object key (reject=ok upload=ok linked=ok). Copy the approach into your schema; keep migrations idempotent and run them with --release-command.
3. Wire Object Storage
   Create the bucket(s), then pass endpoint, region, bucket, and keys as --env values. Use path-style addressing. Keep private data in an unpublished bucket.
4. Deploy
   Run the synchronous deploy once and read the result. Re-running with no change is a no-op.
   Command: ample deploy . --name <APP_NAME> --public --env S3_ENDPOINT=... --env S3_REGION=... --env S3_BUCKET=... --env S3_ACCESS_KEY_ID=... --env S3_SECRET_ACCESS_KEY=...
5. Verify
   Fetch the live URL and the pattern self-test route(s) (/p/browser-file-uploads) from the example; then run your own checks. On failure, read ample logs --kind build then --kind runtime.
   Command: ample logs --kind build

Success Checks

• App responds on its public URL (expect: ample canary next js patterns)
• Browser-file-uploads self-test (expect: reject=ok upload=ok linked=ok)

Cost Estimate

• Currency: USD
• Monthly Amount: 10.0
• Authoritative: true
• Basis: size prices from pricing.toml at build revision (1ac5595375130d45290090e82ed0f554ccd45405-dirty)

Limitations

• Verified on the node-22 template at s-1vcpu-1gb with the example fixture; other sizes, templates, and Next.js major versions are not verified.
• The appointment booking itself (your upload UI, allowed types, size limits, and virus scanning) is application code and was not separately tested.

Examples

• Next.js Pattern Fixture
  Multi-pattern Next.js app whose browser file uploads module was checked live; the module is under tests/deploy-canaries/_pattern-modules.

Evidence Summary

• Canary Run: Next.js pattern fixture deployed on Ample; checks passed for browser-file-uploads and configuration-secrets.