Guides

Deployment

Deploy your trink-ui landing page to production. This guide covers Vercel, Netlify, Cloudflare Pages, and static export options.

Vercel

Vercel is the recommended platform for Next.js projects. It auto-detects your framework, builds, and deploys with zero configuration:

# Install Vercel CLI
npm install -g vercel

# Deploy from your project directory
vercel

# Deploy to production
vercel --prod

Alternatively, connect your Git repository to Vercel and every push to main will trigger an automatic deployment. Preview deployments are created for pull requests.

Netlify

Netlify supports Next.js via its adapter. Connect your repository and configure the build settings:

# Install Netlify CLI
npm install -g netlify-cli

# Deploy
netlify deploy

# Deploy to production
netlify deploy --prod

Install the @netlify/plugin-nextjs plugin for full Next.js support including API routes, ISR, and middleware.

Cloudflare Pages

Cloudflare Pages supports Next.js with the @cloudflare/next-on-pages adapter:

# Install the adapter
npm install @cloudflare/next-on-pages

# Add to your package.json scripts
# "pages:build": "npx @cloudflare/next-on-pages"
# "pages:deploy": "npx wrangler pages deploy .vercel/output/static"

# Build and deploy
npm run pages:build
npm run pages:deploy

You can also connect your GitHub repository in the Cloudflare dashboard for automatic deployments on push.

Static export

If your landing page does not need server-side features (API routes, middleware, ISR), you can export it as a fully static site. This produces plain HTML/CSS/JS files that can be hosted anywhere:

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  output: "export",
  transpilePackages: ["@trinkui/react", "@trinkui/shared"],
  // Optional: set base path if not at root
  // basePath: "/landing",
};

export default nextConfig;

# Build static files
next build

# Output is in the "out" directory
# Upload "out/" to any static hosting provider:
# - GitHub Pages
# - AWS S3 + CloudFront
# - Firebase Hosting
# - Any web server (nginx, Apache)

With static export, trink-ui animations still work because they run on the client after hydration. The initial HTML is fully rendered for SEO.

Environment variables

If your landing page uses form submissions or analytics, configure environment variables in your deployment platform:

# Analytics
NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX

# Form submission endpoint
CONTACT_API_URL=https://api.example.com/contact

# CMS / content
NEXT_PUBLIC_SITE_URL=https://acme.com

Pre-launch performance checklist

Run through this checklist before going live. Target a Lighthouse score of 95+:

• Run Lighthouse in Chrome DevTools on the production URL
• Verify images use next/image with proper width/height to prevent layout shift
• Check that only used components are imported (tree-shaking)
• Confirm CSS variables are loaded — no unstyled flash on initial render
• Test on a real mobile device, not just browser emulation
• Verify Open Graph image loads correctly (use og-image checker tools)
• Check that robots.txt and sitemap.xml are present
• Test page load time on 3G throttled connection
• Confirm all interactive elements are keyboard-accessible
• Verify dark mode toggle persists across page refreshes

Post-deployment monitoring

After deploying, monitor your landing page's performance over time: