🔧 阿川の電商水電行
Shopify 顧問、維護與客製化
💡
小任務 / 單次支援方案
單次處理 Shopify 修正/微調
⭐️
維護方案
每月 Shopify 技術支援 + 小修改 + 諮詢
🚀
專案建置
Shopify 功能導入、培訓 + 分階段交付

事情是這樣的——上週末我幫朋友搭建他的作品集網站。一切都很順利。設計不錯,網站速度很快,用的是Vercel的免費主機。完美。

然後他說:“我需要一份聯絡表格。”

好啊,我說。直接用那些表單後端服務就行了。很簡單。

他查看了價格。 “一個月20美元?!就為了節省一些短信費用?”

說實話?他說得對。我們什麼時候都接受了這種現狀?

這讓我開始思考。

我們付錢給 Netflix,結果它提供的服務基本上就是資料庫插入和郵件發送。僅此而已。儲存一些文本,發送通知。

我為此煩惱的時間比我願意承認的要長得多。後來我想──你知道嗎,我或許可以自己動手做。這能有多難?

我建造的

FormRelay

FormRelay 的使用方法非常簡單。你只需將 HTML 表單指向它,它就會保存資料,向你發送電子郵件,並在儀表板中顯示所有資訊。就這麼簡單。

差別在於?你需要自行託管。你的 Supabase 資料庫。你的 Vercel 部署。你的資料。

最棒的是什麼? Supabase 免費方案提供 5 萬用戶。 Vercel 業餘套餐也是免費的。 Resend 每月提供 3000 封免費郵件。

所以,沒錯。每月0美元對比每月20美元。你自己算算看吧。

“但是自託管不是挺複雜的嗎?”

大家都這麼說。你看,十年前?當然。那時候你需要懂伺服器管理,處理安全性更新,諸如此類的事情。

但現在呢?有了Vercel和Supabase?

  • fork 該倉庫

  • 點選部署

  • 複製貼上一些環境變數

  • 你完成了

寫這份 README 文件所花的時間比部署這個東西所花的時間還要長。

相較之下,你又得建立一個新帳戶,輸入信用卡訊息,使用他們的控制面板,達到某個任意設定的限額,然後明年他們漲價時你還得把所有東西都遷移過去。

哪個聽起來比較複雜?

接下來我可能會失去一些聽眾。

我覺得我們太習慣什麼都租了。

以前獨立網站的核心在於真正擁有自己的內容。沒錯,那時候比較混亂,也需要學習很多東西。但你的網站是屬於你的

現在呢?我們什麼都訂閱。當然,時間就是金錢,我明白。但不是每個人都願意處理基礎設施方面的工作。

但是,「自己執行伺服器機架」和「每年花 300 美元請人儲存聯絡表單條目」之間存在著巨大的差距。

這就是我試圖填補的空白。

我學到的一些零碎東西

Next.js 15 現在真的好用了。經歷了 App Router 的種種波折之後,它終於感覺對了。伺服器端操作運作流暢,再也不用跟它較勁了。

Supabase 太棒了!即時更新、身份驗證,還有真正優秀的文件?趕緊給我來一套!

最困難的部分不是寫程式碼,而是編寫足夠清晰易懂的安裝說明,讓任何人都能輕鬆上手。我在這上面花了太多時間。

關於郵件的事

我使用Resend是因為我購買網域時沒有包含郵箱服務,而且我也不打算單獨購買郵箱託管服務。 Resend的免費套餐(每月3000封郵件)正好滿足我的需求。

但關鍵在於—如果您已經擁有一個使用您網域的電子郵件帳戶,您可以直接將重發功能替換為常規的 SMTP 郵件服務。實際上,在某些方面,這反而更簡單。只需輸入您的 SMTP 憑證即可。

所以,就連這種所謂的「依賴」也並非真正的依賴。利用你已有的資源。

如果你有興趣的話,這裡是一些技術方面的內容。

  • Next.js 15(應用程式路由)

  • Supabase(postgres + 即時 + 驗證)

  • Tailwind CSS

  • Radix UI

  • 重新傳送電子郵件(或如果您有 SMTP 服務,可以直接使用 SMTP)。

  • Lucide 圖標

沒什麼特別的,就是些好用又不會壞的東西。

你可以使用它

整個專案都在 GitHub 上: github.com/Varshithvhegde/formrelay

線上示範: formrelay.varshithvhegde.in

它採用 MIT 許可證。您可以隨意使用。如果您發現任何錯誤,請告訴我。如果您想新增功能,歡迎提交 PR。

重點是

這其實與表格填寫或省錢無關。

關鍵在於要記住,我們其實可以自己動手創造東西。並非每件事都需要SaaS產品。工具就在那裡,平台也是免費的,我們懂程式設計。

許多每月收費 20 美元的專案,實際上只是偽裝成週末專案的簡單方案。


簡單說明一下:是的,我知道SaaS公司提供價值,例如支援、維護、功能等等。但是像表單處理這種基本功能?拜託。


原文出處:https://dev.to/varshithvhegde/i-built-a-form-backend-in-a-weekend-because-paying-20month-for-contact-forms-is-stupid-1o34


精選技術文章翻譯,幫助開發者持續吸收新知。

共有 0 則留言


精選技術文章翻譯,幫助開發者持續吸收新知。
🏆 本月排行榜
🥇
站長阿川
📝12   💬8   ❤️5
310
🥈
我愛JS
📝1   💬6   ❤️2
58
評分標準:發文×10 + 留言×3 + 獲讚×5 + 點讚×1 + 瀏覽數÷10
本數據每小時更新一次
🔧 阿川の電商水電行
Shopify 顧問、維護與客製化
💡
小任務 / 單次支援方案
單次處理 Shopify 修正/微調
⭐️
維護方案
每月 Shopify 技術支援 + 小修改 + 諮詢
🚀
專案建置
Shopify 功能導入、培訓 + 分階段交付