Docs: Add templates to guides (#24732)

Adds template cards to the TanStack Start and Next.js guides

docs/guides/ecosystem/nextjs.mdx

@@ -4,54 +4,100 @@ sidebarTitle: Next.js with Bun
 mode: center
 ---
 
-Initialize a Next.js app with `create-next-app`. This will scaffold a new Next.js project and automatically install dependencies.
+[Next.js](https://nextjs.org/) is a React framework for building full-stack web applications. It supports server-side rendering, static site generation, API routes, and more. Bun provides fast package installation and can run Next.js development and production servers.
-
-```sh terminal icon="terminal"
-bun create next-app
-```
-
-```txt
-✔ What is your project named? … my-app
-✔ Would you like to use TypeScript with this project? … No / Yes
-✔ Would you like to use ESLint with this project? … No / Yes
-✔ Would you like to use Tailwind CSS? ... No / Yes
-✔ Would you like to use `src/` directory with this project? … No / Yes
-✔ Would you like to use App Router? (recommended) ... No / Yes
-✔ What import alias would you like configured? … @/*
-Creating a new Next.js app in /path/to/my-app.
-```
 
 ---
 
-You can specify a starter template using the `--example` flag.
+<Steps>
+  <Step title="Create a new Next.js app">
+    Use the interactive CLI to create a new Next.js app. This will scaffold a new Next.js project and automatically install dependencies.
 
-```sh
+    ```sh terminal icon="terminal"
-bun create next-app --example with-supabase
+    bun create next-app@latest my-bun-app
-```
+    ```
 
-```txt
+  </Step>
-✔ What is your project named? … my-app
+  <Step title="Start the dev server">
-...
+    Change to the project directory and run the dev server with Bun.
-```
+
+    ```sh terminal icon="terminal"
+    cd my-bun-app
+    bun --bun run dev
+    ```
+
+    This starts the Next.js dev server with Bun's runtime.
+
+    Open [`http://localhost:3000`](http://localhost:3000) with your browser to see the result. Any changes you make to `app/page.tsx` will be hot-reloaded in the browser.
+
+  </Step>
+  <Step title="Update scripts in package.json">
+    Modify the scripts field in your `package.json` by prefixing the Next.js CLI commands with `bun --bun`. This ensures that Bun executes the Next.js CLI for common tasks like `dev`, `build`, and `start`.
+
+    ```json package.json icon="file-json"
+    {
+      "scripts": {
+        "dev": "bun --bun next dev", // [!code ++]
+        "build": "bun --bun next build", // [!code ++]
+        "start": "bun --bun next start", // [!code ++]
+      }
+    }
+    ```
+
+  </Step>
+</Steps>
 
 ---
 
-To start the dev server with Bun, run `bun --bun run dev` from the project root.
+## Hosting
 
-```sh terminal icon="terminal"
+Next.js applications on Bun can be deployed to various platforms.
-cd my-app
+
-bun --bun run dev
+<Columns cols={3}>
-```
+  <Card title="Vercel" href="/guides/deployment/vercel" icon="/icons/ecosystem/vercel.svg">
+    Deploy on Vercel
+  </Card>
+  <Card title="Railway" href="/guides/deployment/railway" icon="/icons/ecosystem/railway.svg">
+    Deploy on Railway
+  </Card>
+  <Card title="DigitalOcean" href="/guides/deployment/digital-ocean" icon="/icons/ecosystem/digitalocean.svg">
+    Deploy on DigitalOcean
+  </Card>
+  <Card title="AWS Lambda" href="/guides/deployment/aws-lambda" icon="/icons/ecosystem/aws.svg">
+    Deploy on AWS Lambda
+  </Card>
+  <Card title="Google Cloud Run" href="/guides/deployment/google-cloud-run" icon="/icons/ecosystem/gcp.svg">
+    Deploy on Google Cloud Run
+  </Card>
+  <Card title="Render" href="/guides/deployment/render" icon="/icons/ecosystem/render.svg">
+    Deploy on Render
+  </Card>
+</Columns>
 
 ---
 
-To run the dev server with Node.js instead, omit `--bun`.
+## Templates
 
-```sh terminal icon="terminal"
+<Columns cols={2}>
-cd my-app
+  <Card
-bun run dev
+    title="Bun + Next.js Basic Starter"
-```
+    img="/images/templates/bun-nextjs-basic.png"
+    href="https://github.com/bun-templates/bun-nextjs-basic"
+    arrow="true"
+    cta="Go to template"
+  >
+    A simple App Router starter with Bun, Next.js, and Tailwind CSS.
+  </Card>
+  <Card
+    title="Todo App with Next.js + Bun"
+    img="/images/templates/bun-nextjs-todo.png"
+    href="https://github.com/bun-templates/bun-nextjs-todo"
+    arrow="true"
+    cta="Go to template"
+  >
+    A full-stack todo application built with Bun, Next.js, and PostgreSQL.
+  </Card>
+</Columns>
 
 ---
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. Any changes you make to `(pages/app)/index.tsx` will be hot-reloaded in the browser.
+[→ See Next.js's official documentation](https://nextjs.org/docs) for more information on building and deploying Next.js applications.

docs/guides/ecosystem/tanstack-start.mdx

@@ -755,4 +755,38 @@ To host your TanStack Start app, you can use [Nitro](https://nitro.build/) or a
 
 ---
 
+## Templates
+
+<Columns cols={2}>
+  <Card
+    title="Todo App with Tanstack + Bun"
+    img="/images/templates/bun-tanstack-todo.png"
+    href="https://github.com/bun-templates/bun-tanstack-todo"
+    arrow="true"
+    cta="Go to template"
+  >
+    A Todo application built with Bun, TanStack Start, and PostgreSQL.
+  </Card>
+  <Card
+    title="Bun + TanStack Start Application"
+    img="/images/templates/bun-tanstack-basic.png"
+    href="https://github.com/bun-templates/bun-tanstack-basic"
+    arrow="true"
+    cta="Go to template"
+  >
+    A TanStack Start template using Bun with SSR and file-based routing.
+  </Card>
+  <Card
+    title="Basic Bun + Tanstack Starter"
+    img="/images/templates/bun-tanstack-start.png"
+    href="https://github.com/bun-templates/bun-tanstack-start"
+    arrow="true"
+    cta="Go to template"
+  >
+    The basic TanStack starter using the Bun runtime and Bun's file APIs.
+  </Card>
+</Columns>
+
+---
+
 [→ See TanStack Start's official documentation](https://tanstack.com/start/latest/docs/framework/react/guide/hosting) for more information on hosting.

docs/snippets/guides.jsx

@@ -11,6 +11,12 @@ export const GuidesList = () => {
         href: "/guides/ecosystem/tanstack-start",
         cta: "View guide",
       },
+      {
+        category: "Ecosystem",
+        title: "Use Next.js with Bun",
+        href: "/guides/ecosystem/nextjs",
+        cta: "View guide",
+      },
       {
         category: "Ecosystem",
         title: "Build a frontend using Vite and Bun",
@@ -23,12 +29,6 @@ export const GuidesList = () => {
         href: "/guides/runtime/typescript",
         cta: "View guide",
       },
-      {
-        category: "Streams",
-        title: "Convert a ReadableStream to a string",
-        href: "/guides/streams/to-string",
-        cta: "View guide",
-      },
       {
         category: "HTTP",
         title: "Write a simple HTTP server",