diff --git a/docs/guides/ecosystem/nextjs.mdx b/docs/guides/ecosystem/nextjs.mdx index 2a3f4188cb..0cd9ccd04b 100644 --- a/docs/guides/ecosystem/nextjs.mdx +++ b/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. - -```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. -``` +[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. --- -You can specify a starter template using the `--example` flag. + + + Use the interactive CLI to create a new Next.js app. This will scaffold a new Next.js project and automatically install dependencies. -```sh -bun create next-app --example with-supabase -``` + ```sh terminal icon="terminal" + bun create next-app@latest my-bun-app + ``` -```txt -✔ What is your project named? … my-app -... -``` + + + 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. + + + + 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 ++] + } + } + ``` + + + --- -To start the dev server with Bun, run `bun --bun run dev` from the project root. +## Hosting -```sh terminal icon="terminal" -cd my-app -bun --bun run dev -``` +Next.js applications on Bun can be deployed to various platforms. + + + + Deploy on Vercel + + + Deploy on Railway + + + Deploy on DigitalOcean + + + Deploy on AWS Lambda + + + Deploy on Google Cloud Run + + + Deploy on Render + + --- -To run the dev server with Node.js instead, omit `--bun`. +## Templates -```sh terminal icon="terminal" -cd my-app -bun run dev -``` + + + A simple App Router starter with Bun, Next.js, and Tailwind CSS. + + + A full-stack todo application built with Bun, Next.js, and PostgreSQL. + + --- -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. diff --git a/docs/guides/ecosystem/tanstack-start.mdx b/docs/guides/ecosystem/tanstack-start.mdx index d7508b3b81..2071671a36 100644 --- a/docs/guides/ecosystem/tanstack-start.mdx +++ b/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 + + + + A Todo application built with Bun, TanStack Start, and PostgreSQL. + + + A TanStack Start template using Bun with SSR and file-based routing. + + + The basic TanStack starter using the Bun runtime and Bun's file APIs. + + + +--- + [→ See TanStack Start's official documentation](https://tanstack.com/start/latest/docs/framework/react/guide/hosting) for more information on hosting. diff --git a/docs/images/templates/bun-nextjs-basic.png b/docs/images/templates/bun-nextjs-basic.png new file mode 100644 index 0000000000..95a1c90370 Binary files /dev/null and b/docs/images/templates/bun-nextjs-basic.png differ diff --git a/docs/images/templates/bun-nextjs-todo.png b/docs/images/templates/bun-nextjs-todo.png new file mode 100644 index 0000000000..4a2d21eded Binary files /dev/null and b/docs/images/templates/bun-nextjs-todo.png differ diff --git a/docs/images/templates/bun-tanstack-basic.png b/docs/images/templates/bun-tanstack-basic.png new file mode 100644 index 0000000000..448e499e88 Binary files /dev/null and b/docs/images/templates/bun-tanstack-basic.png differ diff --git a/docs/images/templates/bun-tanstack-start.png b/docs/images/templates/bun-tanstack-start.png new file mode 100644 index 0000000000..a2c4c5f327 Binary files /dev/null and b/docs/images/templates/bun-tanstack-start.png differ diff --git a/docs/images/templates/bun-tanstack-todo.png b/docs/images/templates/bun-tanstack-todo.png new file mode 100644 index 0000000000..9701e86520 Binary files /dev/null and b/docs/images/templates/bun-tanstack-todo.png differ diff --git a/docs/snippets/guides.jsx b/docs/snippets/guides.jsx index b17af36b57..96c999dca3 100644 --- a/docs/snippets/guides.jsx +++ b/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",