DOCSEARCHbyAlgolia
Submit Docs

Vercel Examples

repository·main·Indexed 26 days ago

https://github.com/vercel/examples

A collection of Vercel templates, solutions, and starter applications demonstrating best practices and reference architectures. Includes examples for the Next.js App Router (CSS-in-JS with Chakra UI, state sharing, and redirects), the Vibe Coding Platform AI agent, and various Build Output API implementations such as Edge Functions, Edge Middleware, Image Optimization, and Prerender Functions.

Tokens
172.3K
Snippets
639
Records
1.2K
Agent score
90%

What's inside vercel-examples

  1. Overview of Container Image Services

    main

    The demo showcases nine independent services sharing one domain, utilizing both the Vercel Dockerfile runtime and the native Next.js runtime:

    ServiceRouteStackDescription
    web/Next.js 16, React 19, Tailwind v4Landing page (native nextjs framework)
    rust/rustRust, axum, tokioDynamic HTTP server
    go/goGo stdlib net/httpLightweight server on a distroless image
    wasm/wasmRust → WebAssembly, nginxStatic site running a Rust-compiled WASM module
    browser/browserGo, chromedp, headless ChromiumStreams live page-load status via WebSocket and returns screenshots
    ffmpeg/ffmpegGo, ffmpegMedia transformation (gif, mp4, etc.) with live WebSocket progress
    doom/doomGo, Xvfb, chocolate-doom, ffmpegPlayable Doom streamed as MJPEG over WebSocket
    qr/qrGo, go-qrcodeStateless QR code generator
    php/phpLaravel 12, dompdfStateless PDF invoice generator

  2. Introduction to Storybook for UI Component Development

    main

    Storybook is used to build UI components in isolation from an application's business logic, data, and context. This allows for the development of hard-to-reach UI states by saving them as stories.

    To learn how stories are implemented in this project, inspect the files within the stories directory. For building UIs, a component-driven process is recommended, starting with atomic components and progressing to full pages.

  3. Overview of Web3 Data Fetching in Next.js

    main

    This example demonstrates how to interact with smart contracts that run the Ethereum Virtual Machine (EVM) using Next.js. It covers three primary patterns:

    • Instantiating a connection to a smart contract.
    • Retrieving smart contract information on the server-side.
    • Retrieving smart contract information on the client-side using SWR for revalidation.

  6. Overview of Examples Internal workspace

    main

    The Examples Internal workspace is used for managing the infrastructure and maintenance of Vercel examples. Its primary functions include:

    • UI Management: Maintaining and deploying the @vercel/examples-ui package, which provides the UI components used across various examples.
    • Automated Testing: Running Playwright tests against live deployments to ensure examples remain functional.
    • Template Synchronization: Updating templates on vercel.com/templates by extracting frontmatter from the example READMEs.

  7. Overview of VuePress architecture

    main

    VuePress is a documentation-focused framework composed of two primary components:

    1. Static Site Generator: A minimalistic core that generates pre-rendered static HTML for each page, ensuring high loading performance and SEO friendliness.
    2. Theming & Plugin System: A Vue-powered theming system and Plugin API that allows for customization.

    Runtime Behavior: After the initial static HTML is loaded, Vue takes over the content to transform the site into a full Single-Page Application (SPA). This allows additional pages to be fetched on demand as users navigate the site.

  8. Overview of Turborepo + Hono starter structure

    main

    This monorepo is a TypeScript-based starter containing the following components:

    Apps and Packages

    • api: A Hono application.
    • web: A Next.js application.
    • @repo/ui: A shared React component library used by web and docs.
    • @repo/eslint-config: Shared eslint configurations (includes eslint-config-next and eslint-config-prettier).
    • @repo/typescript-config: Shared tsconfig.json files.

    Utilities

    • TypeScript: For static type checking.
    • ESLint: For code linting.
    • Prettier: For code formatting.

  9. Overview of Vibe Coding Platform

    main

    Vibe Coding Platform is an end-to-end coding platform where users enter text prompts and an AI agent generates full-stack applications. It features a sandboxed environment with live preview, a file explorer, and command logs.

    Key Features

    • Multi-model support: Access various models via Vercel AI Gateway (e.g., Claude, GPT, Grok).
    • Secure execution: Uses Vercel Sandbox for code execution.
    • Real-time preview: Live preview of generated applications.
    • Project management: File explorer for browsing files and command logs for error monitoring.

    Tech Stack

    • Framework: Next.js with Turbopack
    • AI: AI SDK v6 and Vercel AI Gateway
    • Sandbox: Vercel Sandbox
    • Styling: Tailwind CSS and shadcn/ui

  10. Overview of Portfolio Blog Starter features

    main

    The Portfolio Blog Starter is a template designed for portfolio sites with integrated blogging capabilities. Key features include:

    • Content: MDX and Markdown support.
    • SEO: Optimized with sitemap, robots.txt, and JSON-LD schema.
    • Feeds & Social: RSS Feed and dynamic Open Graph (OG) images.
    • Styling & UI: Tailwind v4 and Geist font.
    • Developer Experience: Syntax highlighting.
    • Analytics: Integrated Vercel Speed Insights and Web Analytics.

  12. Implement Next.js + FastAPI Services architecture

    main

    This example demonstrates how to use Vercel Services to host a decoupled frontend and backend within a single project. The architecture uses rewrites to mount different services at specific paths:

    • Frontend: A Next.js application mounted at the root /.
    • Backend: A FastAPI application mounted at /svc/api.

    This setup allows you to combine Next.js API routes (e.g., /api/hello) with a dedicated Python backend (e.g., /svc/api/status) under a unified domain.