Next.jsをVercelからCloudflareへ移行し、90%のコスト削減を実現した話 - Hello Tech
酒井です。ハローでは、プロダクトのローンチ前からAutoReserveの開発に関わっています。 この記事では、Next.jsアプリケーションであるautoreserve.comをVercelからCloudflareに移行し、月額コストを約90%削減した背景と実装の詳細を共有します。 Next.jsは比較的セルフホスティングが難しいフレームワークとして知られており、Vercelへのベンダーロックインが懸念されることがあります。Next.js 16でBuild Adapters APIが導入されるなど、セルフホスティングのハードルは徐々に下がっていますが、実運用では課題が多いのが現状です。 VercelからOpenNext + Cloudflare Workersの構成に本番環境を移行したため、現場でのNext.jsのセルフホスティングの実際について紹介できればと思います。 背景 AutoRe
Cally: small, feature-rich calendar components
<div class="card"> <calendar-range months="2"> <svg aria-label="Previous" slot="previous" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" > <path d="M15.75 19.5 8.25 12l7.5-7.5"></path> </svg> <svg aria-label="Next" slot="next" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" > <path d="m8.25 4.5 7.5 7.5-7.5 7.5"></path> </svg> <calendar-month></calendar-month> <calendar-month offset=
Tesseract.js | Pure Javascript OCR for 100 Languages!
Tesseract.js is a pure Javascript port of the popular Tesseract OCR engine. This library supports more than 100 languages, automatic text orientation and script detection, a simple interface for reading paragraph, word, and character bounding boxes. Tesseract.js can run either in a browser and on a server with NodeJS. Check out the Example code and API docs on GitHub.
VanJS - A 1.0kB No-JSX Framework Based on Vanilla JavaScript
VanJS: A 1.0kB Grab 'n Go Reactive UI Framework without React/JSX Enable everyone to build useful UI apps with a few lines of code, anywhere, any time, on any device.VanJS (abbreviated Vanilla JavaScript) is an ultra-lightweight, zero-dependency, and unopinionated Reactive UI framework based on pure vanilla JavaScript and DOM. Programming with VanJS feels like building React apps in a scripting la
Blendy, a framework-agnostic tool that smoothly transitions one element into another with just a few lines of code.
You can create as many Blendy instances as needed—whether one per page or per component. You can specify the animation type in the configuration: 'dynamic' (default) or 'spring'. // Without configs const blendy = createBlendy() // With configs const blendy = createBlendy({ animation: 'dynamic' // or spring }) Blendy requires the source element (the element it's transitioning from) and the target e
Next.jsのApp RouterでISRを検証したぞ！
はじめに前提ISRとは概要App RouterでのISR注意点既存ページを更新１（Time-Based Revalidation）ページの構成ビルドして稼働テキストファイルの更新制約既存ページを更新２（On-Demand Revalidation）ページの構成ビルドして稼働テキストファイルの更新制約新規ページのみ生成ページの概要ビルドして稼働ページを追加してみる制約おまけ：存在しないパスには404ページを表示したい場合まとめ最後に参考 はじめに Next.jsは、従来からSSR(Server Side Rendering)、SSG(Static Site Generation)、ISR(Incremental Static Regeneration)といったページ生成機能で知られています。 このサイトもNext.jsに移行し、早くも１年以上経過しました。様々なページ生成方法を導入しているの
vlt /vōlt/
We’re building the future of JavaScript packagesDevelop, Run, Distribute, Discover, and Secure your JavaScript Packages
monorepo内でのパッケージのバージョンを1つだけに統一するOne Version Ruleをpnpm catalogで実装する - newmo 技術ブログ
newmoでは、フロントエンド、バックエンド、iOSやAndroidなどのモバイルアプリをすべて同じリポジトリで管理するmonorepoを採用しています。 monorepoを採用することで、アプリケーション間で共通のコードを共有することができたり、CIの管理が楽になったり、他のチームのコードを見るのにわざわざリポジトリをcloneする必要がなくなります。 また、monorepoを採用することで、アプリケーションが利用しているパッケージ(ライブラリやツール)のバージョンを1つだけにするOne Version Ruleが実装できます。 One Version Rule One Version Ruleは、monorepo内のパッケージのパッケージのバージョンを1つだけにするルールです。 The One Version Rule | Google Open Source One Versio
Node.jsで型安全な環境変数を扱うスニペット
Node.js で型安全な環境変数を扱うスニペットを作りました。 next devのようなアプリケーションの起動、Playwright でのテストなどコマンドごとに渡したい環境変数のセットが異なるケースがあります。 この場合に環境変数をまとめたものを定義して、それをコマンドごとに読み込むセットを変えたいことがあります。 次のようにベタ書きしてもいいのですが、渡したい環境変数が増えると管理が大変になります。 NEXT_PUBLIC_LOCALHOST_URL=http://localhost:3000 NEXT_PUBLIC_API_URL=http://localhost:3001 NEXT_PUBLIC_IS_TEST_MODE=false FOO="bar" next dev そのため、.envのような環境変数をまとめたファイルを使いたくなります。 Node.js は--env-fil
ファインディの爆速開発を支えるモノレポ管理ツール「Nx」について - Findy Tech Blog
ファインディ株式会社でフロントエンドのリードをしております 新福(@puku0x)です。 この記事では、ファインディで導入しているモノレポ管理ツール「 Nx 」について紹介します。 モノレポとは Nxとは Nxワークスペースの作成 Nxの機能 コード生成 変更検知 依存関係の管理 キャッシュ機構 自動マイグレーション まとめ モノレポとは モノレポは全てのコードベースを単一のリポジトリで管理する手法です。 monorepo.tools コードの共通化や可視化、ツール・ライブラリの標準化、一貫性のあるCI/CDパイプラインを構築できるといったメリットがあります。また、マイクロサービスと相性が良いとも言われています。 circleci.com ファインディでは主にフロントエンド系のリポジトリをモノレポとして運用しています。 アプリケーションとそれに関連するフィーチャー、UIライブラリがひとつに
orval
ProductivityGet your API ready out of the box in a few seconds. Prevent human error, and let your parameters, clients and types be auto-generated by Orval. Error boundaryGet your contract! With the combination of Orval and OpenAPI, you have a strong standard for your team, which avoids misunderstandings and lets you focus on your UI. API mockingYou don't have to wait for your backend to be ready,
Poku
🐷 What's Poku?A cross-platform test runner that brings the JavaScript essence back to testing. ⚡️ Quick Tutorials
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - productdevbook/etiket: Zero-dependency barcode & QR code SVG, PNG generator. 40+ formats, styled QR codes, tree-shakeable. Pure TypeScript.
The JavaScript Oxidation Compiler
Cupertino Panes | Create dynamic modals, cards, panes for your applications in few steps.
Better Auth
PactumJS
GitHub - johnpolacek/date-range-picker-for-shadcn: DateRangePicker is a reusable component for shadcn using Radix UI and Tailwind CSS. Includes preset date ranges, text entry, calendar selection and date comparison
rrweb.io | Open source web session replay library
whyframe