initial commit

docs/guides/ecosystem/nextjs.mdx

@@ -0,0 +1,101 @@
+---
+title: Build an app with Next.js and Bun
+sidebarTitle: Next.js with Bun
+mode: center
+---
+
+[Next.js](https://nextjs.org/) is a React framework for building full-stack web applications. It supports server-side rendering, static site generation, and API routes. Bun installs packages fast and can run Next.js development and production servers.
+
+---
+
+<Steps>
+  <Step title="Create a new Next.js app">
+    Use the interactive CLI to scaffold a new Next.js project and install its dependencies.
+
+    ```sh terminal icon="terminal"
+    bun create next-app@latest my-bun-app
+    ```
+
+  </Step>
+  <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) in your browser to see the result. Changes you make to `app/page.tsx` are hot-reloaded in the browser.
+
+  </Step>
+  <Step title="Update scripts in package.json">
+    Prefix the Next.js CLI commands in your `package.json` scripts with `bun --bun` so that Bun executes the Next.js CLI for `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>
+
+---
+
+## Hosting
+
+<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>
+
+---
+
+## Templates
+
+<Columns cols={2}>
+  <Card
+    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 basic 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>
+
+---
+
+Refer to the [Next.js documentation](https://nextjs.org/docs) for more on building and deploying Next.js applications.