From 29ee6e82bca3fa14977fdc4c9a0994c379f4af9f Mon Sep 17 00:00:00 2001 From: abcxff <79597906+abcxff@users.noreply.github.com> Date: Mon, 13 Oct 2025 16:22:16 -0400 Subject: [PATCH] feat(site): vercel guide --- site/public/llms-full.txt | 41 +++++++++- .../(index)/sections/TechSection.tsx | 33 ++++---- site/src/content/docs/deploy/vercel.mdx | 77 ++++++++++++++++++- site/src/data/deploy-options.ts | 29 ++++++- site/src/sitemap/mod.ts | 3 +- 5 files changed, 156 insertions(+), 27 deletions(-) diff --git a/site/public/llms-full.txt b/site/public/llms-full.txt index 41e95e6076..f8d4b59a2b 100644 --- a/site/public/llms-full.txt +++ b/site/public/llms-full.txt @@ -4526,11 +4526,46 @@ You should see your runner connected on the Connect tab of your Rivet Dashboard. # Supabase _Supabase is coming soon_ -## Vercel +## Deploying to Vercel -# Vercel +# Deploying to Vercel -_Vercel is coming soon_ +Deploy your RivetKit app to [Vercel](https://vercel.com/) using Next.js. + +Complete example Next.js + RivetKit app. + +- [Vercel account](https://vercel.com/) +- Your RivetKit app + - If you don't have one, see the our [Next.js Example](https://github.com/rivet-dev/rivetkit/tree/main/examples/next-js) +- Access to the [Rivet Cloud](https://dashboard.rivet.dev/) or a [self-hosted Rivet Engine](/docs/general/self-hosting) + +To serve your RivetKit app from Next.js you must expose RivetKit through a Next.js API route. + +If you haven't already, create a file at `api/rivet/[...all]/route.ts` inside your Next.js project, and fill it with the following: + +```ts +// Update path/to/registry.ts below to point to your registry.ts file +const = toNextHandler(registry); +``` + +Update your vercel.json + +```json + + } + // ... rest of vercel.json +} +``` + +1. Connect your GitHub account to Vercel +2. Select your repository containing your Next.js + RivetKit app +3. Vercel will deploy your app + +Detailed steps and deployment methods are available on [Vercel's docs](https://vercel.com/docs/deployments). + +After selecting your project on the Rivet dashboard, go to Connect > Vercel. Skip to the "Confirm Connection" step, and input your deployed Vercel site URL. + +The Engine will then connect to your Vercel site. Now you can create and connect to your Rivet Actors. ## Deploying to VMs & Bare Metal # Deploying to VMs & Bare Metal diff --git a/site/src/app/(v2)/(marketing)/(index)/sections/TechSection.tsx b/site/src/app/(v2)/(marketing)/(index)/sections/TechSection.tsx index 1e78d2c562..57fc3ae086 100644 --- a/site/src/app/(v2)/(marketing)/(index)/sections/TechSection.tsx +++ b/site/src/app/(v2)/(marketing)/(index)/sections/TechSection.tsx @@ -238,16 +238,10 @@ export function TechSection() { alt="Bun" /> - - + + + +Complete example Next.js + RivetKit app. + + + +## Guide + + + + +- [Vercel account](https://vercel.com/) +- Access to the [Rivet Cloud](https://dashboard.rivet.dev/) or a self-hosted [Rivet Engine](/docs/general/self-hosting) +- A Next.js app integrated with RivetKit + - See the [Next.js quickstart](/docs/actors/quickstart/next-js/) or [Next.js example](https://github.com/rivet-dev/rivetkit/tree/main/examples/next-js) to get started + + + +Your project should have the following files: + +- `src/app/api/rivet/[...all]/route.ts` +- `src/rivet/registry.ts` + +If your project is not integrated with RivetKit yet, follow the [Next.js quickstart guide](/docs/actors/quickstart/next-js/) or see the [Next.js example](https://github.com/rivet-dev/rivetkit/tree/main/examples/next-js). + + + +Create or update your `vercel.json`: + +```json {{"title":"vercel.json"}} +{ + // Rivet provides is own intelligent load balancing algorithm + "fluid": false, + "functions": { + "**": { + // If your Vercel account type is: + // - Hobby: Keep maxDuration set to 60 + // - Pro: Set maxDuration to 300 + // - Enterprise: Set maxDuration to 900 + "maxDuration": 60 + } + } + // ... rest of vercel.json +} +``` + + + + +1. Connect your GitHub account to Vercel +2. Select your repository containing your Next.js + RivetKit app +3. Vercel will deploy your app + +More information on deployments are available in [Vercel's docs](https://vercel.com/docs/deployments). + + + + +1. Visit the Rivet dashboard +2. Navigate to _Connect > Vercel_ +3. Skip to the _Confirm Connection_ step +4. Input your deployed Vercel site URL (e.g. `https://my-app.vercel.app/api/rivet`) + - **Important**: Make sure to include the path `/api/rivet` +5. Once it shows as successfully connected, click _Done_ + +Your Vercel Functions deployment is now connected to Rivet. + + + + diff --git a/site/src/data/deploy-options.ts b/site/src/data/deploy-options.ts index 738237520d..6996bca533 100644 --- a/site/src/data/deploy-options.ts +++ b/site/src/data/deploy-options.ts @@ -1,43 +1,64 @@ +import { + faVercel, + faRailway, + faDocker, + faGoogleCloud, + faAws, + faCloudflare, + faServer, + faHetzner, + faKubernetes, +} from "@rivet-gg/icons"; + export interface DeployOption { title: string; href: string; + icon?: any; } export const deployOptions: DeployOption[] = [ + { + title: "Vercel", + href: "/docs/deploy/vercel", + icon: faVercel, + }, { title: "Railway", href: "/docs/deploy/railway", + icon: faRailway, }, // { - // title: "Vercel", - // href: "/docs/deploy/vercel", - // }, - // { // title: "Freestyle", // href: "/docs/deploy/freestyle", // }, { title: "AWS ECS", href: "/docs/deploy/aws-ecs", + icon: faAws, }, { title: "Google Cloud Run", href: "/docs/deploy/gcp-cloud-run", + icon: faGoogleCloud, }, { title: "Kubernetes", href: "/docs/deploy/kubernetes", + icon: faKubernetes, }, { title: "Hetzner", href: "/docs/deploy/hetzner", + icon: faHetzner, }, { title: "VM & Bare Metal", href: "/docs/deploy/vm-and-bare-metal", + icon: faServer, }, { title: "Cloudflare Workers", href: "/docs/deploy/cloudflare-workers", + icon: faCloudflare, }, ]; diff --git a/site/src/sitemap/mod.ts b/site/src/sitemap/mod.ts index 64aced06dd..46881a7355 100644 --- a/site/src/sitemap/mod.ts +++ b/site/src/sitemap/mod.ts @@ -126,9 +126,10 @@ export const sitemap = [ }, { title: "Deploy", - pages: deployHosts.map(({ title, href }) => ({ + pages: deployHosts.map(({ title, href, icon }) => ({ title, href, + icon, })), }, {