> ## Documentation Index
> Fetch the complete documentation index at: https://react.email/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Deployment

> How to deploy the `email dev` preview server to Vercel

<Steps>
  <Step title="Add 'build' script to ./package.json">
    ```diff theme={"theme":{"light":"github-light","dark":"vesper"}}
     {
       "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 theme={"theme":{"light":"github-light","dark":"vesper"}}
     {
       "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="https://mintcdn.com/react-email/5VriGJ5Ik0v6egEW/images/preview-server-vercel-settings.png?fit=max&auto=format&n=5VriGJ5Ik0v6egEW&q=85&s=8590927c122d4a61c930cf79499d1a36" width="3024" height="1888" data-path="images/preview-server-vercel-settings.png" />
    </Frame>
  </Step>
</Steps>