From 52756457f924c8ce22395aaeed9f284a51add8ff Mon Sep 17 00:00:00 2001 From: jhislop-design Date: Fri, 3 Jul 2026 11:50:10 -0600 Subject: [PATCH 1/3] Add Netlify gold partner page Build out tanstack.com/partners/netlify as a rich, SEO- and AI-search-optimized deployment resource, mirroring the Railway partner page's structure and styling (Tailwind, shared Card/Button/ Collapsible/CodeBlock components, dark mode, seo() head helper). Content is sourced for accuracy: - Config + CLI from Netlify's official TanStack Start docs (@netlify/vite-plugin-tanstack-start, netlify deploy, cli 17.31+) - Current credit-based pricing from netlify.com/pricing - Real, attributed customer testimonials from netlify.com/customers (TunnelBear, Twilio, Spring) Includes WebPage + FAQPage JSON-LD for rich results, OG/Twitter meta, and sponsor UTM params on all outbound Netlify links. Co-Authored-By: Claude Opus 4.8 --- src/routeTree.gen.ts | 21 + src/routes/partners.netlify.tsx | 819 ++++++++++++++++++++++++++++++++ 2 files changed, 840 insertions(+) create mode 100644 src/routes/partners.netlify.tsx diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts index fc3a7200d..bbb515151 100644 --- a/src/routeTree.gen.ts +++ b/src/routeTree.gen.ts @@ -57,6 +57,7 @@ import { Route as ShopSearchRouteImport } from './routes/shop.search' import { Route as ShopCartRouteImport } from './routes/shop.cart' import { Route as ShopHandleRouteImport } from './routes/shop.$handle' import { Route as PartnersRailwayRouteImport } from './routes/partners.railway' +import { Route as PartnersNetlifyRouteImport } from './routes/partners.netlify' import { Route as PartnersPartnerRouteImport } from './routes/partners.$partner' import { Route as OauthTokenRouteImport } from './routes/oauth/token' import { Route as OauthRegisterRouteImport } from './routes/oauth/register' @@ -402,6 +403,11 @@ const PartnersRailwayRoute = PartnersRailwayRouteImport.update({ path: '/railway', getParentRoute: () => PartnersRoute, } as any) +const PartnersNetlifyRoute = PartnersNetlifyRouteImport.update({ + id: '/netlify', + path: '/netlify', + getParentRoute: () => PartnersRoute, +} as any) const PartnersPartnerRoute = PartnersPartnerRouteImport.update({ id: '/$partner', path: '/$partner', @@ -1029,6 +1035,7 @@ export interface FileRoutesByFullPath { '/oauth/register': typeof OauthRegisterRoute '/oauth/token': typeof OauthTokenRoute '/partners/$partner': typeof PartnersPartnerRoute + '/partners/netlify': typeof PartnersNetlifyRoute '/partners/railway': typeof PartnersRailwayRoute '/shop/$handle': typeof ShopHandleRoute '/shop/cart': typeof ShopCartRoute @@ -1176,6 +1183,7 @@ export interface FileRoutesByTo { '/oauth/register': typeof OauthRegisterRoute '/oauth/token': typeof OauthTokenRoute '/partners/$partner': typeof PartnersPartnerRoute + '/partners/netlify': typeof PartnersNetlifyRoute '/partners/railway': typeof PartnersRailwayRoute '/shop/$handle': typeof ShopHandleRoute '/shop/cart': typeof ShopCartRoute @@ -1329,6 +1337,7 @@ export interface FileRoutesById { '/oauth/register': typeof OauthRegisterRoute '/oauth/token': typeof OauthTokenRoute '/partners/$partner': typeof PartnersPartnerRoute + '/partners/netlify': typeof PartnersNetlifyRoute '/partners/railway': typeof PartnersRailwayRoute '/shop/$handle': typeof ShopHandleRoute '/shop/cart': typeof ShopCartRoute @@ -1485,6 +1494,7 @@ export interface FileRouteTypes { | '/oauth/register' | '/oauth/token' | '/partners/$partner' + | '/partners/netlify' | '/partners/railway' | '/shop/$handle' | '/shop/cart' @@ -1632,6 +1642,7 @@ export interface FileRouteTypes { | '/oauth/register' | '/oauth/token' | '/partners/$partner' + | '/partners/netlify' | '/partners/railway' | '/shop/$handle' | '/shop/cart' @@ -1784,6 +1795,7 @@ export interface FileRouteTypes { | '/oauth/register' | '/oauth/token' | '/partners/$partner' + | '/partners/netlify' | '/partners/railway' | '/shop/$handle' | '/shop/cart' @@ -2301,6 +2313,13 @@ declare module '@tanstack/react-router' { preLoaderRoute: typeof PartnersRailwayRouteImport parentRoute: typeof PartnersRoute } + '/partners/netlify': { + id: '/partners/netlify' + path: '/netlify' + fullPath: '/partners/netlify' + preLoaderRoute: typeof PartnersNetlifyRouteImport + parentRoute: typeof PartnersRoute + } '/partners/$partner': { id: '/partners/$partner' path: '/$partner' @@ -3267,12 +3286,14 @@ const BuilderRouteWithChildren = interface PartnersRouteChildren { PartnersPartnerRoute: typeof PartnersPartnerRoute + PartnersNetlifyRoute: typeof PartnersNetlifyRoute PartnersRailwayRoute: typeof PartnersRailwayRoute PartnersIndexRoute: typeof PartnersIndexRoute } const PartnersRouteChildren: PartnersRouteChildren = { PartnersPartnerRoute: PartnersPartnerRoute, + PartnersNetlifyRoute: PartnersNetlifyRoute, PartnersRailwayRoute: PartnersRailwayRoute, PartnersIndexRoute: PartnersIndexRoute, } diff --git a/src/routes/partners.netlify.tsx b/src/routes/partners.netlify.tsx new file mode 100644 index 000000000..b2261aad1 --- /dev/null +++ b/src/routes/partners.netlify.tsx @@ -0,0 +1,819 @@ +import * as React from 'react' +import { Link, createFileRoute } from '@tanstack/react-router' +import { + ArrowUpRight, + Check, + DollarSign, + GitPullRequest, + Globe, + Infinity as InfinityIcon, + LineChart, + Plus, + Rocket, + ShieldCheck, + Undo2, + Zap, +} from 'lucide-react' +import { twMerge } from 'tailwind-merge' +import { Footer } from '~/components/Footer' +import { Card } from '~/components/Card' +import { Button } from '~/ui' +import { + Collapsible, + CollapsibleContent, + CollapsibleTrigger, +} from '~/components/Collapsible' +import { CodeBlock } from '~/components/markdown/CodeBlock' +import { seo } from '~/utils/seo' +import { getPartnerById, PartnerImage } from '~/utils/partners' +import { getPartnerJsonLd } from '~/utils/partner-pages' +import { trackEvent } from '~/utils/analytics' + +const NETLIFY_HREF = + 'https://app.netlify.com/signup?utm_medium=sponsor&utm_source=tanstack&utm_campaign=partner-page' +const NETLIFY_DOCS_HREF = + 'https://docs.netlify.com/build/frameworks/framework-setup-guides/tanstack-start/?utm_medium=sponsor&utm_source=tanstack&utm_campaign=partner-page' +const NETLIFY_HOME_HREF = + 'https://www.netlify.com/?utm_medium=sponsor&utm_source=tanstack&utm_campaign=partner-page' +const NETLIFY_PRICING_HREF = + 'https://www.netlify.com/pricing/?utm_medium=sponsor&utm_source=tanstack&utm_campaign=partner-page' + +const CONFIG_SNIPPET = `import { defineConfig } from 'vite' +import { tanstackStart } from '@tanstack/react-start/plugin/vite' +import netlify from '@netlify/vite-plugin-tanstack-start' + +export default defineConfig({ + plugins: [tanstackStart(), netlify()], +}) +` + +const DEPLOY_SNIPPET = `# From your TanStack Start app directory +npm install -g netlify-cli +netlify deploy +` + +type FeatureIcon = React.ComponentType<{ className?: string }> + +const features: Array<{ Icon: FeatureIcon; title: string; desc: string }> = [ + { + Icon: Rocket, + title: 'Zero-config builds', + desc: 'The Netlify Vite plugin detects and configures your TanStack Start build. Add netlify() to your Vite plugins and push — no deploy config to write.', + }, + { + Icon: GitPullRequest, + title: 'Unlimited Deploy Previews', + desc: 'Every pull request gets its own live preview URL, on every plan. Test routing, data, and server logic before you merge.', + }, + { + Icon: Zap, + title: 'Functions & Edge Functions', + desc: 'TanStack Start SSR and server functions run on Netlify Functions and Edge Functions. No servers to provision or manage.', + }, + { + Icon: Globe, + title: 'Global edge network', + desc: 'Assets and functions run on Netlify’s worldwide edge, close to your users, with automatic caching and instant invalidation.', + }, + { + Icon: Undo2, + title: 'Instant rollbacks', + desc: 'Every deploy is atomic and immutable. Roll back to any previous deploy in one click when something breaks.', + }, + { + Icon: LineChart, + title: 'Logs, analytics & monitoring', + desc: 'Real-time function logs, deploy insights, and analytics are built in — no third-party agent to wire up.', + }, + { + Icon: ShieldCheck, + title: 'Secure by default', + desc: 'Automatic HTTPS, managed SSL, and smart secret detection run on every deploy so nothing ships that shouldn’t.', + }, + { + Icon: InfinityIcon, + title: 'Branch deploys', + desc: 'Ship every branch to its own URL. Unlimited staging and preview environments for the whole team.', + }, +] + +const steps: Array<{ num: string; title: string; code: string }> = [ + { + num: '01', + title: 'Create your TanStack app', + code: 'npx create-tsrouter-app@latest my-app', + }, + { + num: '02', + title: 'Install the Netlify plugin', + code: 'npm i -D @netlify/vite-plugin-tanstack-start', + }, + { num: '03', title: 'Add it to Vite', code: 'netlify()' }, + { num: '04', title: 'Deploy', code: 'netlify deploy' }, +] + +const pricing: Array<{ + plan: string + price: string + note: string + features: Array + highlight?: boolean +}> = [ + { + plan: 'Free', + price: '$0', + note: '300 credits / month', + features: [ + 'Unlimited Deploy Previews', + 'Functions & AI model access', + 'Custom domains with SSL', + 'No credit card required', + ], + }, + { + plan: 'Personal', + price: '$9', + note: 'per month · 1,000 credits', + features: [ + 'Everything in Free', + 'Smart secret detection', + '1-day observability', + 'Priority email support', + ], + }, + { + plan: 'Pro', + price: '$20', + note: 'per month · 3,000 credits', + features: [ + 'Everything in Personal', + 'Unlimited team members', + 'Private org repositories', + 'Shared environment variables', + '30-day analytics & metrics', + ], + highlight: true, + }, + { + plan: 'Enterprise', + price: 'Custom', + note: 'for teams at scale', + features: [ + 'Everything in Pro', + '99.99% uptime SLA', + 'SSO + SCIM', + 'High-performance builds', + '24/7 dedicated support', + ], + }, +] + +const platformFacts: Array<[string, string]> = [ + ['Deploy Previews', 'Unlimited, every plan'], + ['SSL & custom domains', 'Included free'], + ['Global edge', 'Worldwide CDN'], +] + +const testimonials: Array<{ quote: string; author: string; role: string }> = [ + { + quote: + 'Netlify empowers our engineering teams to launch websites and campaigns in minutes with no-ops, a goal that has often been a pipe dream in our industry.', + author: 'Justin Watts', + role: 'Head of Engineering, TunnelBear', + }, + { + quote: + 'Collaborative Deploy Previews are an excellent feature from Netlify. Designers give us feedback by annotating screenshots — and that ends up right in the pull request.', + author: 'Twilio', + role: 'Deploy Previews in production', + }, + { + quote: + 'As we’ve moved to a modern Jamstack approach utilizing Netlify we’ve seen impressive improvements in site performance and conversion rate, while also increasing our engineering velocity.', + author: 'Spring', + role: 'Ecommerce on Netlify', + }, +] + +const libraries = [ + 'Start', + 'Router', + 'Query', + 'Table', + 'Form', + 'DB', + 'AI', + 'Virtual', + 'Pacer', + 'Store', + 'Devtools', + 'CLI', +] + +const libDetails: Array<{ label: string; desc: string }> = [ + { + label: 'TanStack Start', + desc: 'SSR, streaming, and server functions run on Netlify Functions and Edge Functions. The Netlify Vite plugin wires the build and emulates the production platform locally.', + }, + { + label: 'TanStack Router', + desc: 'File-based routing apps deploy in SSR and SPA modes. Every PR gets a Deploy Preview, so route changes are testable before they merge.', + }, + { + label: 'TanStack Query', + desc: 'Fetch from Netlify Functions or Edge Functions on the same platform. Server data stays fast and close to your app.', + }, + { + label: 'TanStack DB', + desc: 'Pair with Netlify’s managed data and blob storage, or your own backend, all served from Netlify’s global edge.', + }, +] + +const faqs: Array<{ q: string; a: string }> = [ + { + q: 'Does Netlify support TanStack Start SSR and streaming?', + a: 'Yes. TanStack Start’s SSR, streaming, and server functions run on Netlify Functions and Edge Functions. Add the @netlify/vite-plugin-tanstack-start plugin to your Vite config and deploy — the plugin also emulates the production platform in local dev.', + }, + { + q: 'How do I deploy a TanStack Start app to Netlify?', + a: 'Install @netlify/vite-plugin-tanstack-start, add netlify() to your Vite plugins, then connect the repo on Netlify or run `netlify deploy` with netlify-cli 17.31 or higher. Netlify auto-detects the build — no extra deploy config needed.', + }, + { + q: 'Are Deploy Previews included?', + a: 'Yes — every pull request automatically gets its own live Deploy Preview URL on all plans, including Free. For TanStack teams that means you can test routing changes, data fetching, and server logic before merging.', + }, + { + q: 'How does Netlify pricing actually work?', + a: 'Netlify uses a usage-based credit model. The Free plan includes 300 credits per month with no credit card. Personal is $9/month (1,000 credits), Pro is $20/month (3,000 credits) with unlimited team members, and Enterprise is custom. Most hobby TanStack projects fit comfortably in the Free plan.', + }, + { + q: 'What makes Netlify different from other hosts?', + a: 'Netlify is the official deployment partner for TanStack Start. It pairs a global edge network with Functions and Edge Functions, unlimited Deploy Previews, atomic immutable deploys with one-click rollback, and full local emulation of the production platform through the Vite plugin.', + }, + { + q: 'Can I migrate an existing TanStack app to Netlify?', + a: 'Yes. Connect your GitHub repo, add the Netlify Vite plugin, and Netlify builds and deploys on every push. Make sure you are on netlify-cli 17.31 or higher when using the TanStack Start plugin.', + }, +] + +const PAGE_TITLE = 'Deploy TanStack to Netlify — Official Gold Partner' +const PAGE_DESCRIPTION = + 'Netlify is the official deployment partner for TanStack Start. Deploy from Git with zero config, unlimited Deploy Previews, Functions and Edge Functions, a global edge network, and instant rollbacks. Start free — no credit card required.' + +function getFaqJsonLd() { + return { + '@context': 'https://schema.org', + '@type': 'FAQPage', + mainEntity: faqs.map((faq) => ({ + '@type': 'Question', + name: faq.q, + acceptedAnswer: { + '@type': 'Answer', + text: faq.a, + }, + })), + } +} + +export const Route = createFileRoute('/partners/netlify')({ + head: () => { + const partner = getPartnerById('netlify') + + return { + meta: seo({ + title: PAGE_TITLE, + description: PAGE_DESCRIPTION, + keywords: + 'deploy tanstack to netlify, tanstack start netlify, tanstack router netlify, netlify hosting, tanstack deployment, netlify gold sponsor', + image: 'https://tanstack.com/og.png', + }), + scripts: [ + ...(partner + ? [ + { + type: 'application/ld+json', + children: JSON.stringify(getPartnerJsonLd(partner)), + }, + ] + : []), + { + type: 'application/ld+json', + children: JSON.stringify(getFaqJsonLd()), + }, + ], + } + }, + component: NetlifyPartnerPage, +}) + +function CheckBadge() { + return ( + + + + ) +} + +function trackNetlifyClick() { + trackEvent('partner_clicked', { + partner_id: 'netlify', + placement: 'detail', + destination: 'external', + destination_host: 'netlify.com', + }) +} + +function NetlifyCodeExample({ + code, + lang, + title, +}: { + code: string + lang: string + title: string +}) { + return ( + + {code} + + ) +} + +function NetlifyPartnerPage() { + const [openFaq, setOpenFaq] = React.useState(null) + + React.useEffect(() => { + trackEvent('partner_viewed', { + partner_id: 'netlify', + placement: 'detail', + }) + }, []) + + const partner = getPartnerById('netlify') + + return ( +
+
+ + + {/* Hero */} +
+
+ {partner ? ( +
+ +
+ ) : null} +
+ + Gold Sponsor · Deployment & Hosting + +
+ + + Official TanStack Start deployment partner + +
+
+
+ +

+ Deploy TanStack apps +
+ in seconds with Netlify +

+ +

+ Netlify is the official deployment partner for TanStack Start. Push + to Git and Netlify builds, deploys, and serves your app from a + global edge network — with Functions, Deploy Previews, and instant + rollbacks built in. +

+ +

+ "Netlify’s focus on speed, simplicity, and flexibility aligns + perfectly with our vision for full-stack development." — Tanner + Linsley, Creator of TanStack +

+ +
+ + +
+

+ No credit card required. Free plan includes 300 credits per month. +

+
+ + {/* Stats */} +
+ {[ + ['Official', 'TanStack Start partner'], + ['< 1 min', 'Time to first deploy'], + ['Unlimited', 'Deploy Previews'], + ['$0', 'To get started'], + ].map(([value, label]) => ( +
+
{value}
+
+ {label} +
+
+ ))} +
+ + {/* Features */} +
+

+ Why TanStack teams choose Netlify +

+

+ Netlify eliminates deployment friction so your team ships faster. + Here's what makes it the right fit for TanStack developers. +

+
+ {features.map(({ Icon, title, desc }) => ( + + +
{title}
+

+ {desc} +

+ + ))} +
+
+ + {/* How it works */} +
+

+ From zero to deployed in 4 steps +

+

+ Netlify runs TanStack Start through its official Vite plugin. Add it + to your Vite config, then deploy from GitHub or the Netlify CLI. +

+ +
+ {steps.map(({ num, title, code }) => ( + +
+ {num} +
+
+
{title}
+ + {code} + +
+ + ))} +
+ +
+ + +
+ +
+ + +
+
+ + {/* Library fit */} +
+

+ Works with every TanStack library +

+

+ From full-stack apps with TanStack Start to lightweight React apps + using Router and Query — Netlify deploys them all. +

+ +
+ {libraries.map((lib) => ( + + {lib} + + ))} +
+ +
+ {libDetails.map(({ label, desc }) => ( + +
+ + {label} +
+

+ {desc} +

+ + ))} +
+
+ + {/* Pricing */} +
+

+ Pricing that scales with you +

+

+ Netlify uses a usage-based credit model — you pay for what you build + and serve. Most TanStack hobby projects run free on 300 credits a + month. +

+ +
+ {pricing.map(({ plan, price, note, features: pf, highlight }) => ( + + {highlight ? ( + + Most popular + + ) : null} +
{plan}
+
+ {price} +
+
+ {note} +
+
    + {pf.map((feat) => ( +
  • + + {feat} +
    • + ))} +
+ + ))} +
+ +
+ {platformFacts.map(([key, value]) => ( +
+
+ {key} +
+
+ {value} +
+
+ ))} +
+ +
+ + +
+
+ + {/* Testimonials */} +
+

+ Teams ship faster on Netlify +

+

+ Real results from teams who moved their production workloads onto + Netlify’s platform. +

+
+ {testimonials.map(({ quote, author, role }) => ( + +
+ "{quote}" +
+
+
{author}
+
+ {role} +
+
+ + ))} +
+ +
+ + + + Free plan · no credit card required + +
+
+ + {/* FAQ */} +
+

+ Frequently asked questions +

+

+ Common questions from TanStack developers evaluating Netlify. +

+ +
+ {faqs.map(({ q, a }, i) => { + const isOpen = openFaq === i + return ( + setOpenFaq(next ? i : null)} + className="border-b border-gray-200 dark:border-gray-800" + > + + + {q} + + + + +

+ {a} +

+ + + ) + })} +
+
+ + {/* CTA */} +
+
+ Official TanStack Start deployment partner +
+

+ Ready to ship TanStack on Netlify? +

+

+ No credit card required. Push to Git and go live from a global edge + network in seconds. +

+

+ Deploy Previews, Functions, and instant rollbacks on every plan. +

+ +
+ + +
+
+ +

+ Netlify is a Gold-tier TanStack sponsor.{' '} + + Browse all TanStack partners + + .{' '} + + netlify.com + +

+
+ +
+
+ ) +} From edc2733ca37e229024ce5a8f14fd25ad5638f3fc Mon Sep 17 00:00:00 2001 From: jhislop-design Date: Fri, 3 Jul 2026 12:03:20 -0600 Subject: [PATCH 2/3] Use Netlify referral link for signup CTAs Point all conversion CTAs at the TanStack referral link (join.netlify.com/ukkf22691ki9), which carries sponsor attribution on Netlify's side. Docs, pricing, and homepage links keep their UTM params. Co-Authored-By: Claude Opus 4.8 --- src/routes/partners.netlify.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/routes/partners.netlify.tsx b/src/routes/partners.netlify.tsx index b2261aad1..e73e8fccf 100644 --- a/src/routes/partners.netlify.tsx +++ b/src/routes/partners.netlify.tsx @@ -29,8 +29,8 @@ import { getPartnerById, PartnerImage } from '~/utils/partners' import { getPartnerJsonLd } from '~/utils/partner-pages' import { trackEvent } from '~/utils/analytics' -const NETLIFY_HREF = - 'https://app.netlify.com/signup?utm_medium=sponsor&utm_source=tanstack&utm_campaign=partner-page' +// TanStack referral link — encodes sponsor attribution on Netlify's side +const NETLIFY_HREF = 'https://join.netlify.com/ukkf22691ki9' const NETLIFY_DOCS_HREF = 'https://docs.netlify.com/build/frameworks/framework-setup-guides/tanstack-start/?utm_medium=sponsor&utm_source=tanstack&utm_campaign=partner-page' const NETLIFY_HOME_HREF = From 6feabaff2aaed8121b0cfb002f087bdbb3fe0767 Mon Sep 17 00:00:00 2001 From: jhislop-design Date: Fri, 3 Jul 2026 12:04:51 -0600 Subject: [PATCH 3/3] Use netlify.com referral link for the homepage reference Point the "netlify.com" footer link at the TanStack netlify.com referral link (join.netlify.com/mnxfbfs7shtf-w6zrwt) for sponsor attribution. Co-Authored-By: Claude Opus 4.8 --- src/routes/partners.netlify.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/routes/partners.netlify.tsx b/src/routes/partners.netlify.tsx index e73e8fccf..475ce992e 100644 --- a/src/routes/partners.netlify.tsx +++ b/src/routes/partners.netlify.tsx @@ -33,8 +33,8 @@ import { trackEvent } from '~/utils/analytics' const NETLIFY_HREF = 'https://join.netlify.com/ukkf22691ki9' const NETLIFY_DOCS_HREF = 'https://docs.netlify.com/build/frameworks/framework-setup-guides/tanstack-start/?utm_medium=sponsor&utm_source=tanstack&utm_campaign=partner-page' -const NETLIFY_HOME_HREF = - 'https://www.netlify.com/?utm_medium=sponsor&utm_source=tanstack&utm_campaign=partner-page' +// TanStack referral link for the netlify.com reference — carries sponsor attribution +const NETLIFY_HOME_HREF = 'https://join.netlify.com/mnxfbfs7shtf-w6zrwt' const NETLIFY_PRICING_HREF = 'https://www.netlify.com/pricing/?utm_medium=sponsor&utm_source=tanstack&utm_campaign=partner-page'