Add deno setup info (trpc#6283)

* update install snippet to inlcude deno install command

* add deno variant of example app installation

* chore: apply lint and formatting fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

README.md

@@ -80,6 +80,9 @@ pnpm create next-app --example https://github.com/trpc/trpc --example-path examp
 
 # bun
 bunx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-starter trpc-prisma-starter
+
+# deno
+deno init --npm next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-starter trpc-prisma-starter
 ```
 
 **👉 See full documentation on [tRPC.io](https://trpc.io/docs). 👈**

www/docs/main/example-apps.mdx

@@ -46,6 +46,13 @@ pnpx create-next-app --example https://github.com/trpc/trpc --example-path examp
 
 ```sh
 bunx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-starter trpc-prisma-starter
+```
+
+  </TabItem>
+  <TabItem value="deno" label="deno">
+
+```sh
+deno init --npm next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-starter trpc-prisma-starter
 ```
 
   </TabItem>
@@ -100,6 +107,13 @@ pnpx create-next-app --example https://github.com/trpc/trpc --example-path examp
 
 ```sh
 bunx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-websockets-starter trpc-prisma-websockets-starter
+```
+
+  </TabItem>
+  <TabItem value="deno" label="deno">
+
+```sh
+deno init --npm create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-websockets-starter trpc-prisma-websockets-starter
 ```
 
   </TabItem>
@@ -139,6 +153,13 @@ pnpx create-next-app --example https://github.com/trpc/trpc --example-path examp
 
 ```sh
 bunx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-todomvc trpc-todo
+```
+
+  </TabItem>
+  <TabItem value="deno" label="deno">
+
+```sh
+deno init --npm next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-todomvc trpc-todo
 ```
 
   </TabItem>

www/src/components/InstallSnippet.tsx

@@ -5,12 +5,16 @@ import React from 'react';
 
 export function InstallSnippet(props: { pkgs: string[] | string }) {
   const pkgs = Array.isArray(props.pkgs) ? props.pkgs.join(' ') : props.pkgs;
+  const pkgsDeno = Array.isArray(props.pkgs)
+    ? `npm:${props.pkgs.join(' npm:')}`
+    : `npm:${props.pkgs.split(' ').join(' npm:')}`;
 
   const snippets: Record<string, string> = {
     npm: `npm install ${pkgs}`,
     yarn: `yarn add ${pkgs}`,
     pnpm: `pnpm add ${pkgs}`,
     bun: `bun add ${pkgs}`,
+    deno: `deno add ${pkgsDeno}`,
   };
   return (
     <Tabs>