Vercel

Vercel にデプロイするには、ビルトインの vercel アダプタを使用します。このアダプタは Vercel およびその設定と連携するために特化して設計されています。

まず、Vercel でプロジェクトを初期化する必要があります。以下のコマンドを実行してください

vercel project add <project-name>
vercel link --yes --project <project-name>

この時点で、.vercel ディレクトリ内に project.json ファイルが作成されます。このファイルは、Vercel プロジェクトのプロジェクトおよび組織設定を保存するために使用されます。

追加のパッケージは不要です — アダプタは @lazarv/react-server に組み込まれています。

次に、このアダプタを react-server.config.mjs ファイルに追加する必要があります:

export default {
  adapter: 'vercel',
};

このアダプタの設定は、Vercel の config.json ファイルに追加されます。これにより、ヘッダー、リダイレクト、リライトなど、すべての利用可能な Vercel 設定オプションを使用できます。

また、以下のアダプタオプションを使用して、すべてのサーバサイドレンダリングを処理する index 関数の Serverless Function 設定を上書きすることもできます:

export default {
  adapter: ['vercel', {
    serverlessFunctions: {
      index: {
        memory: 1024,
        maxDuration: 10,
        // ...
      },
    }
  }],
};

この設定は .vercel/output/functions/index.func/.vc-config.json に作成されます。利用可能なオプションの詳細については、Vercel Build Output API ドキュメントの Vercel Primitives セクションにある Serverless Function configuration を参照してください。

@lazarv/react-server を Vercel アダプタと共に使用する場合、以下のコマンドを使用してアプリケーションを Vercel にデプロイできます:

pnpm react-server build [root] # [root] is the entry point of your application
vercel deploy --prebuilt

react-server CLI を使用して、deploy 引数を指定することでデプロイすることも可能です:

pnpm react-server build [root] --deploy

これにより、アプリケーションがビルドされ、Vercel にデプロイされます。

Vercel Edge Functions、Edge Middleware、Prerender Functions、ISR（インクリメンタル・スタティック・リジェネレーション）、画像最適化などの Vercel の各種機能は、ビルトインの Vercel アダプタではまだサポートされていません。今後のアップデートにご期待ください！