feat(docs): Preview server deployment page (#1658)

Co-authored-by: Zeno Rocha <[email protected]>

Author: gabrielmfern

apps/docs/cli.mdx

@@ -71,6 +71,7 @@ your email template when you make changes.
         You can refer to our [demo emails source code](https://demo.react.email/preview/vercel-invite-user.tsx?view=source)
         for an example of how we do this with our demo deploy on Vercel.
     </Info>
+
   </Accordion>
   <Accordion title="How can I define props specific to the email's preview?">
     Considering that you are already default exporting the React component
@@ -98,6 +99,7 @@ your email template when you make changes.
 
     <Email {...Email.PreviewProps} />;
     ```
+
   </Accordion>
   <Accordion title="How to make the preview server ignore directories?">
     Once the preview server has started and is now open on `localhost`, the preview server
@@ -118,6 +120,7 @@ your email template when you make changes.
     ```
 
     Then the only file that will be shown on the preview server is going to be your `email.tsx`.
+
   </Accordion>
   <Accordion title="The heuristics for files to be considered emails">
     To avoid uncanny files appearing in the sidebar of the preview server,
@@ -130,6 +133,7 @@ your email template when you make changes.
 
     These can certainly fail as they are only heuristics, so if you do find
     any issues with these, feel free to open an [issue](https://github.com/resend/react-email/issues).
+
   </Accordion>
 </AccordionGroup>
 
@@ -156,16 +160,18 @@ Generates the plain HTML files of your emails into a `out` directory.
   A very common misconception is to assume that this command is
   the way meant to be used to send the email templates, but it is not.
 
-  The preferable way is to render the email using the [render](/utilities/render) utility,
-  by passing in the needed data through props, on the moment of sending the email,
-  This gives for a much better developer experience that it would with `email export`.
+The preferable way is to render the email using the [render](/utilities/render) utility,
+by passing in the needed data through props, on the moment of sending the email,
+This gives for a much better developer experience that it would with `email export`.
+
+`email export` is a secondary way where the situation is not optimal. Two of them are:
+
+- The email template is sent through some other language
+- You are going to use separate templating, because the email platform you use forces you to do so
 
-  `email export` is a secondary way where the situation is not optimal. Two of them are:
-  - The email template is sent through some other language
-  - You are going to use separate templating, because the email platform you use forces you to do so
+We strongly recommend users to gravitate towards using the preferable way, because otherwise
+you will end up having to fight a lot with the rendered markup and many other issues arise.
 
-  We strongly recommend users to gravitate towards using the preferable way, because otherwise
-  you will end up having to fight a lot with the rendered markup and many other issues arise.
 </Info>
 
 **Options**
@@ -185,4 +191,4 @@ Generates the plain HTML files of your emails into a `out` directory.
 
 ## `email help <cmd>`
 
-Shows all the options for a specific command.
+Shows all the options for a specific command.

apps/docs/deployment.mdx

@@ -0,0 +1,39 @@
+---
+title: "Deployment"
+sidebarTitle: "Deployment"
+description: "How to deploy the `email dev` preview server to Vercel"
+"og:image": "https://react.email/static/covers/react-email.png"
+icon: "rocket"
+---
+
+<Steps>
+  <Step title="Add 'build' script to ./package.json">
+    ```diff
+     {
+       "scripts": {
+    +    "build": "email build"
+       }
+     }
+    ```
+  </Step>
+  <Step title="Change 'Framework Preset' on Vercel's project settings to Next.js">
+    You also need to add "next" on `devDependencies` to work properly:
+
+    ```diff
+     {
+       "devDependencies": {
+    +    "next": "*",
+       }
+     }
+    ```
+
+    This is a limitation on Vercel's Next Framework Preset.
+  </Step>
+  <Step title="Change 'Output Directory' to .react-email/.next">
+    In the end, your settings should look like this:
+
+    <Frame>
+      <img alt="Proper Vercel settings" src="/images/preview-server-vercel-settings.png" />
+    </Frame>
+  </Step>
+</Steps>

apps/docs/images/preview-server-vercel-settings.png

@@ -1,4 +1,5 @@
 {
+  "$schema": "https://mintlify.com/schema.json",
   "name": "React Email",
   "logo": {
     "light": "/logo/light.svg",
@@ -43,7 +44,14 @@
   "navigation": [
     {
       "group": "Overview",
-      "pages": ["introduction", "contributing", "changelog", "roadmap", "cli"]
+      "pages": [
+        "introduction",
+        "contributing",
+        "changelog",
+        "roadmap",
+        "cli",
+        "deployment"
+      ]
     },
     {
       "group": "Getting Started",
@@ -88,7 +96,9 @@
     },
     {
       "group": "Utilities",
-      "pages": ["utilities/render"]
+      "pages": [
+        "utilities/render"
+      ]
     },
     {
       "group": "Integrations",