Resend 導入した

2025-04-20

Aboutセクションの背景サークルが切れる → overflow-hidden の見直しで修正。
フッター手前の ピンクぼかし（背景ブロブ） が境界で切れる問題 → blobの位置見直しと、footerより上のsectionに配置して自然に。
フッターの下部に入れている コピーライトの上下余白が不一致問題

→ min-h-screen + flex-grow により layout 全体の高さを調整し解消。
送信完了後のボタンの文字ズレ → px-7 による padding の調整で整える。

Resend + Next.js API Route によるメール送信機能の構築に成功！
初期403エラー：

「Resend の無料プランでは、独自ドメインから送信する必要がある」 → 認証済みドメインを Cloudflare で設定。
Cloudflare の Email Routing を導入し、

hello@tokechan.com → 任意のGmailアドレスに転送する仕組みを構築。
from / to の役割を理解：
- from: Webサイトからの送信元アドレス（例：hello@tokechan.com）
- to: 受信者（運営者側）が受け取るアドレス（例：tokechan@gmail.com）

トピック	要点まとめ
`overflow-hidden`	背景の装飾を切ってしまうことがあるので慎重に
レスポンシブ背景ブロブ配置	`absolute` + `z-index` のコントロールがポイント
ボタン内のズレ	`padding` / `gap` のバランスに注目 (`px-7` で解決)
メール送信のベストプラクティス	`no-reply` アドレスは信頼されにくいので避ける
フッターの自動位置調整	`min-h-screen` + `flex-grow` によるページ全体設計が肝