You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
GitHub - aymericzip/intlayer: Internationalisation solution for JS application focusing on scalability. Make your JavaScript / TypeScript application multilingue.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
React Native + Next.jsはいいぞ！（ほぼ）1人でショートドラマのWeb/モバイルアプリを爆速開発した話
こんにちは！テラーノベルでiOS/Android/Webとフロントエンド周りを担当している @kazutoyoです！ 3月に縦型のショートドラマサービス「テラードラマ」を公開しました！ テラードラマは、Web/iOS/Androidのプラットフォームで展開しており、React Nativeで開発しています。 今回はそのテラードラマにおける、React NativeとNext.jsの活用についてお話します。 なぜReact Native + Next.jsを選択したか 今回のテラードラマは、モバイルアプリ（iOS/Android)とWebで展開し、機能的にもほぼ同等で提供する必要がありました。 開発するエンジニアも少人数のため、基本的にはクロスプラットフォームで開発ができることが望ましかったです。 さらに、Webに関してはSEOなども意識して、各ページをサーバーサイドレンダリングする必要があ
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに こんにちは、Watanabe Jin(@Sicut_study)です。 AIが日々進化しており、個人開発を誰もが気軽にできるような世界になってきました。 私もかなり焦りながら勉強をしておりついていくのに必死です。 個人開発のハードルが下がった中で、日々多くの個人開発がリリースされています。 その中でNext.js × Hono × Cloudflareという構成をネット上で見る機会が増えました。 この構成をすることは個人開発者にとっては大きなメリットがあります。 (だいたい)無料枠でサービスが動かせる 簡単にデプロイすることが
AWSの安価でスケーラブルなウェブアプリ構成 2025年度版 - maybe daily dev notes
3年前、趣味で開発するウェブアプリ向けの安価なAWSアーキテクチャについて記事を書きました。当時流行りの話題だった記憶です。 趣味Webサービスをサーバーレスで作る ― 格安編 - maybe daily dev notes 最近はAWSにも新たに色々なサービスが出てきて、以前とは一味違う構成を取れるようになっています。この記事では、アップデートされた格安かつスケーラブルなウェブアプリ向けAWSアーキテクチャを紹介します。 コード 本記事で紹介するアーキテクチャのリファレンス実装は、以前と同じリポジトリに公開しています。 github.com 主な機能は下記です: Next.js App RouterをAWS Lambda上にデプロイ CloudFront + Lambda関数URLによるレスポンスストリーミング対応 クライアントからサーバー、DBまでの型安全性 Aurora Server
Next.jsと状態管理のプラクティス
2025-05-14 技術選定を突き詰める ～ Online Conference 2025 ～
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 自分は正直デザインが苦手です...。 なので個人開発で画面のイメージを作ってみたものの、パワーポイントでただ図形をはっつけたような悩ましいもので「なんとかならないものか」と頭を抱えていました。 そんな時に色々調べてく中で出会ったのが、VercelのAIツール「v0」。 なんとなく試してみたら、いい感じになったのでデザイン苦手な人でも大丈夫ですよってことで記事にしようと思いました！ v0とは Next.jsを開発しているVercel社で開発されたAIツールです。 自然言語でUIないしはコードを生成してくれます。 いい感じにしても
はじめに React Compilerを2024年7月末に導入し、2024年10月中旬からプロダクション利用を開始して現在(2025年5月中旬)に至ります これまでに起きたことや感想を共有したいと思います 前提 技術スタック Next.jsのPages Routerを使用し、サーバー側で動く処理はほぼない react-hook-formを使用 reactStrictModeはtrue 導入時にeslint-plugin-react-compilerを使った検査では違反なし 各ライブラリのバージョンアップは随時行っている // 2024年7月末の導入時 next: 15.0.0-rc.0 react: 19.0.0-rc-01172397-20240716 babel-plugin-react-compiler: 0.0.0-experimental-938cd9a-20240601 rea
Vercel で MCP サーバーを構築する
Today we're announcing Integrations, a new way to connect your apps and tools to Claude. We're also expanding Claude's Research capabilities with an advanced mode that searches the web, your Google Workspace, and now your Integrations too. この記事では Next.js を使用して Vercel 上に MCP サーバーを構築する方法を紹介します。完成したコードは以下のリポジトリで確認できます。 Next.js プロジェクトを作成する まずは以下のコマンドを実行して Next.js プロジェクトを作成します。 npx create-next-app@late
next.jsのドキュメントには多言語対応のページがあります。 nextjs.org これを参考にすると、LPやホームページ程度であれば十分に多言語対応することができます。 next.jsだけでも出来ること 文字列を翻訳する アクセス時のaccept-languageヘッダーを見て自動的に言語を振り分ける (middleware.js) SSGで英語版、日本語版ページそれぞれ生成する (generateStaticParams()) あとは途中にコンポーネントが挟まるパターンに対応できれば、簡易的な翻訳としては十分です。 足りないもの: 途中にコンポーネントが挟まる翻訳 途中にコンポーネントが挟まるようなコンポーネントは、このようなコンポーネントです。 // 日本語版 <span><a href="http://example.com">解説</a>を読んでください</span> //英語
遂に Cloudflare + Next.js(OpenNext) + Prisma 6.7.0(No Rust) が動く時代が来た
現状たぶんこれが一番安いと思います。(※個人開発前提のスタックです) 実現したこと opennext for cloudflare prisma (no-rust, no-engine) prisma-postgres (free plan) つまり Cloudflare 上で Next.js を動かして、現実的なビルドサイズで Prisma を動かせました。 自分の手元のビルドサイズです。 ┌ ○ / 149 B 102 kB ├ ○ /_not-found 978 B 103 kB ├ ○ /prisma-test 149 B 102 kB # ... + First Load JS shared by all 102 kB ├ chunks/770-76939705ff65587a.js 46.5 kB ├ chunks/96e220d1-21a0fdc894793ec0.js 53
はじめに 個人開発やゼロイチの立ち上げに最適な技術スタックを書いていく。 なるべく安上がりな構成を目指す。 TypeScriptをベースに よっぽどパフォーマンスにこだわりがなければTypeScriptを採用したい。 1つの言語でフルスタック開発可 脳の言語スイッチング不要 型定義を使い回せる トレンドで将来性がある 小〜中規模開発ならこの恩恵はでかいため、フルスタックTypeScriptフレームワークを採用したい。 Next.js or React Router よっぽどパフォーマンスにこだわりがなければReact Routerを採用したい。 個人的にNext.jsはゼロイチ開発にはオーバースペックだと感じる。 以下のような点からNext.jsの採用は見送りたい。 Server/Clientの境界線がわかりづらい Server Components, Actions, Functions
Part 1: How We Fell Out of Love with Next.js and Back in Love with Ruby on Rails & Inertia.js - Hardcover Blog
Part 1: How We Fell Out of Love with Next.js and Back in Love with Ruby on Rails & Inertia.js This is part 1 of a series documenting Hardcover’s Alexandria release. We recently migrated our codebase from Next.js to Ruby on Rails, and it’s been amazing so far! It was a learning experience, and I’m excited to share some of our takeaways. I’ll link each article here as it’s written. Introducing Alexa
最近思いつきで身内向けにTwitterクローンを開発していて、そこでの知見をゆるく共有したいと思います。技術選定の段階で以下の記事を参考にさせていただいたのですが、この記事の内容を前提として代替案としてこれもいいんじゃない？という話をしたいと思います。 フロントエンド 元々私は個人的にずっとNuxtを使っていたのですが、やはり現状はNext.js (+ Tailwind CSS)が一番良い気がします。一度勉強してみたら全然アリだな、と思いました。 バックエンド こちらもNext.jsでフロントエンドと同時に開発できます。Next.jsのServer Actionsはサーバーコンポーネントとクライアントコンポーネントどちらからでも呼び出すことができ、DBにアクセスしたりといったことができます。 Server Actionsの注意点 便利なServer Actionsですが、セキュリティの観点
はじめに 先日、React の勉強会で、Next.js App Router の設定やファイル規約について取り上げました 🫐 App Router では、エラー・ローディング状態や、 SEO 設定の方法を簡略化してくれています！ 今回は、Next.js App Router における特別ファイルの種類と使い方を調査したので、基礎的な内容をまとめました！ 時間の節約になれば、嬉しいです 🙌 Next.js App Router の特別ファイルとは？ Next.js App Router の特別ファイルとは、特定の名前を持つファイルで、その名前に応じた特別な役割を果たします。 上記の公式を見るとわかりますが、 たくさんありますね、、🧐 これらのファイルでは、: ルーティング レイアウト メタデータ エラーハンドリングなど、、 Web アプリケーション開発に必要な、様々な機能を提供します！
Next.jsプロジェクトをアップグレードする Next.jsの従来のPages Routerから新しいApp Routerに移行しましょう。ここの移行により、アプリケーションのルーティング効率と柔軟性が向上します。App Routerは、ファイルシステムベースのルーティング機能が改善されたほか、React Server Componentsが導入されたことなどにより、開発体験を向上させます。 依存関係をチェックする package.jsonファイルのバージョンが最新であることが重要です。依存関係をすべてチェックし、新しいApp Routerと互換性があることを確認しましょう。必要であればアップグレードしてください。この準備を行うことで、移行時に互換性の問題が発生するのを避けることができます。 依存関係はnpmを使用することで簡単にチェックできます。以下のコマンドを実行してください。 $
A couple weeks ago Michael Jackson, one of the authors of React Router, dropped this bomb on Twitter (emphasis mine): React Server Components are nice in theory, but 5 years in, it just isn’t working out. It’s been fun, React. You taught me a lot. Have fun with your react-server-dom-esm-vite-client/server bundles. I’m done. ✌️ To which Evan You, author of Vue, followed up with (emphasis also mine)
React デザインパターン
はじめに 長らくReactを雰囲気で書いてきました。コンポーネントを作り、propsを渡し、状態を管理する基本的な概念は理解していたものの、より体系的なアプローチや設計パターンについては深く考えずにコードを書いていました。しかし、より大規模で保守性の高いアプリケーションを構築するにつれ、単なる「動くコード」を超えた、堅牢な設計原則の必要性を痛感するようになりました。 この記事は、私自身の再学習を共有するものです。 ※2025/04/21時点、私が関わっているプロダクトのCrowd AgentのReactのバージョンは"18.3.1"です。 目次 Reactデザインパターンとは HOC (高階コンポーネント) パターン[※React18以降では、カスタムフック推奨] Provider パターン Presentational と Container コンポーネントパターン React Hook
Cloudflare Workers、フルスタックアプリの構築とホスティングが可能に。新たにNext.jsやAngularなどに対応、MySQLへの接続も
Cloudflare Workers、フルスタックアプリの構築とホスティングが可能に。新たにNext.jsやAngularなどに対応、MySQLへの接続も Cloudflareは、同社が提供するグローバルなコンテンツデリバリーネットワーク（CDN）のエッジにおいてJavaScriptのランタイムを提供する「Cloudflare Workers」の新機能や機能強化を発表しました。 You can now deploy static sites and full-stack applications on Cloudflare Workers – the primitives are all here. https://t.co/lDgcd4kh9j #DeveloperWeek — Cloudflare (@Cloudflare) April 8, 2025 Next.jsサポート、MySQ
Grep is extremely fast code search. You can search over a million repositories for specific code snippets, files, or paths. Search results need to appear instantly without loading spinners. Originally built with Create React App (CRA) as a fully client-rendered Single-Page App (SPA), Grep was fast—but with CRA now deprecated, we wanted to update the codebase to make it even faster and easier to ma
はじめに みなさん、フォームライブラリは何を使っていますか？ React Hook Formがフォームの一時代を築いた後に、server actionに対応しているConformが登場したり、様々なフォームライブラリがあると思いますが、今回は最近v1になったTanStack Formについてご紹介します。 TanStack Formは、各入力フィールドを独立したコンポーネントとして提供します。これにより、フォーム全体を再描画するのではなく、変更が生じた特定のフィールドのみを選択的に再レンダリングすることが可能となり、パフォーマンスの最適化を実現しています。 TanStack Formの推しポイント👍 まずは、TanStack Formの推しポイントをいくつかご紹介します。 強力な型サポート TanStack系のライブラリ全般の特徴になりますが、TypeScriptでできているため型安全・
Amazon Web Services ブログ Amplify Hosting がスキュー保護を発表 Web アプリケーションの開発とデプロイにおける一般的な課題は、クライアントとサーバーリソース間のバージョンのずれです。2025 年 3 月 13 日、AWS Amplify Hosting にデプロイされたアプリケーション向けのデプロイメントスキュー保護機能（更新期間中の新旧バージョン混在時のシステム安定性を確保する機能）を発表できることを嬉しく思います。この機能は、アプリケーションのデプロイ中にエンドユーザーがシームレスな体験を得られるよう支援します。 課題 現代の Web アプリケーションは、多数の静的アセットとサーバーサイドコンポーネントからなる複雑なシステムであり、これらすべてが連携して動作する必要があります。1 時間に複数回のデプロイが一般的となっている世界では、バージョンの互
Rspack
April 10, 2025 Rspack joins the Next.js ecosystem# One of Rspack's primary goals is to seamlessly integrate with webpack-based projects or frameworks, providing an enhanced development experience with minimal migration costs. In the JavaScript ecosystem, Next.js has one of the most advanced build systems, with deeply customized webpack configurations and a rich plugin ecosystem. This made it an id
Next.js 15.3
Next.js 15.3 includes Turbopack for builds, new client instrumentation and navigation hooks, and more: Turbopack for builds (alpha): Faster production builds passing 8000+ tests (99%) Community support for Rspack (experimental): Alternative bundler with Webpack compatibility Client Instrumentation hook: Early monitoring and analytics setup Navigation hooks: Control routing with onNavigate and useL
こんにちは、小田（@linyows）です。さくらインターネットは、リモートワーク中心の勤務スタイルなので、日々、自宅の自室で作業しています。できるだけ快適に働けるよう、仕事部屋の環境にはこだわっています。最近は、好みのフレグランスとして「檜オイル」にすっかりハマっていて、香りの力に助けられています。 さて、今回は私たちさくらインターネット研究所が取り組んだブログサイトの全面リニューアルについてご紹介します。2024年3月12日に公開した新サイトの裏側では、課題整理からブランド設計、データ移行、実装まで、さまざまなチャレンジがありました。この記事では、なぜリニューアルしたのか、どう実現したのか、どんな工夫をしたのかを余すところなくお伝えします。 なぜリニューアルが必要だったのか？研究所では、これまでWordPressを使ってブログを運用していましたが、以下のような課題が浮かび上がっていました
はじめに 今回は、現代のWEB開発で最も使用されている言語/フレームワークであるTypeScript/React/Next.jsについて学ぶために、私がおすすめしたい学習資料についてご紹介したいと思います。 非常に有用で、初心者から中級者、上級者まで幅広い層に向けた内容が含まれていますので、時間を見つけて是非読んでみてください。 ※TypeScript/React/Next.jsって何？という方のために、簡単に以下にそれぞれご説明いたします。 TypeScript Microsoftが開発した、JavaScriptを拡張したプログラミング言語。JavaScriptに比べ、型安全性の向上によるエラーの早期発見や、型注釈でコードの意図を明確にすることによる可読性/メンテナンス性の向上が期待できる。現代のWEB開発においては、ほとんどの開発者がJavaScriptからTypeScriptへ移行し
Join the conversation on X: https://x.com/documenso/status/1907019629652058196 When we started building Documenso, choosing Next.js was a no-brainer. We wanted SSR (server-side rendering), easy routing, and the vibrant community that came with it. It helped us ship fast, iterate quickly, and provided all the essentials in one neat package. For a while, it was exactly what we needed. Early Adoption
Next.js Support Policy | Next.js by Vercel - The React Framework
Next.js publishes new versions to the canary channel daily. These pre-release builds undergo extensive internal testing before being promoted to a stable release. While we encourage you to experiment with the latest features on canary, we do not recommend serving production traffic from these versions. Once a major version is released, it enters the long-term support (LTS) phase. We highly encoura
Last week, we published CVE-2025-29927 and patched a critical severity vulnerability in Next.js. Here’s our post-incident analysis and next steps. Timeline2025-02-27On 27 Feb 2025 06:03:00 GMT, the vulnerability was disclosed to the Next.js team through GitHub private reporting. The researchers also emailed security@vercel.com. The initial report disclosed the vulnerability in older versions of Ne
Next.js and the corrupt middleware: the authorizing artifact
IntroductionRecently, Yasser Allam, known by the pseudonym inzo_, and I, decided to team up for some research. We discussed potential targets and chose to begin by focusing on Next.js (130K stars on github, currently downloaded + 9,4 million times per week), a framework I know quite well and with which I already have fond memories, as evidenced by my previous work. Therefore, the “we” throughout t
本記事の文章表現の一部には、生成AI(Google Gemini)を用いた校正・改善を行っています。ただし、掲載されている情報の正確性については筆者自身が責任をもって確認・執筆しています。AIの力を借りながらも情報の信頼性を最優先にしていますので安心してお読みいただければ幸いです。 1. 概要 CVE-2025-29927 は、Next.js (ReactベースのフルスタックWebフレームワーク) における 認可バイパスの脆弱性 です。特にNext.jsの ミドルウェア (middleware) で認可チェックを行っている場合に、攻撃者が細工したHTTPヘッダーを送信することで認可を迂回できる深刻な欠陥となっています。この脆弱性により、本来認可が必要な 保護リソース へ攻撃者が未認証のままアクセスできる可能性があります。脆弱性の深刻度はCritical (重大) と評価されており、CVSS
CVE-2025-29927
Next.js version 15.2.3 has been released to address a security vulnerability (CVE-2025-29927). Additionally, backported patches are available. We recommend that all self-hosted Next.js deployments using next start and output: 'standalone' should update immediately. Continue reading for more details on the CVE. Timeline 2025-02-27T06:03Z: Disclosure to Next.js team via GitHub private vulnerability
Impact It is possible to bypass authorization checks within a Next.js application, if the authorization check occurs in middleware. Patches For Next.js 15.x, this issue is fixed in 15.2.3 For Next.js 14.x, this issue is fixed in 14.2.25 For Next.js 13.x, this issue is fixed in 13.5.9 For Next.js 12.x, this issue is fixed in 12.3.5 For Next.js 11.x, consult the below workaround. Note: Next.js deplo
MastraとNext.jsで製造業の工場トラブル事例検索チャットボットを作ってみた | DevelopersIO
はじめに MastraはAIアプリケーションを構築するためのTypeScriptのフレームワークです。ELv2ライセンスで、マネージドサービスとして他社に提供することはNGですが、業務アプリの構築は可能です。なぜELv2なのかドキュメントもありますので詳細はこちらをご参照ください。 The primary limitation is that you cannot provide Mastra as a hosted or managed service that offers users access to the substantial functionality of the software. (訳) 主な制限は、ソフトウェアの重要な機能にユーザーがアクセスできるホスト型または管理型のサービスとして Mastra を提供できないことです。 またAIを活用したTypeScriptツー
Next.js や BaaSを使うときのセキュリティ対策の覚書。RLS、DOMPurify、クリックジャッキングやXSS対策、クロスオリジン、CSPの設定など。 個人開発向け。認証系のアプリケーション開発時における現時点での BaaS やウェブアプリケーション（Next.js など）のセキュリティ対策の覚書。チェックリストなので深くは掘り下げない。更新、追加、修正予定あり。 データセキュリティ RLS の有効化とポリシー設定 例えば、Supabase を使う場合、RLS を有効にしてポリシーを適切に作成。各ユーザーがアクセスできるデータを厳密に制御する。 RLS（Row-Level Security）はデータベースのテーブルでユーザーごとに異なるアクセス制限を設定する仕組み。例えば、自分の投稿だけが見えるようにするなど、柔軟な制御が可能。 ポリシーとは、各ユーザーがどのデータにアクセスでき
貧者のアークテクチャ：Next.js on Cloudflare Pages&WorkersのAPI側でFirestoreを使えるようにした
こんにちは、@nabettuです。 個人開発の醍醐味といえばいかに安いインフラコストでサービスを作るか、というのがありますね！（諸説あります） 私は基本的にWebであればNext.jsと、Firebaseを利用することで認証、DB、ストレージを使ったサービスを基本無料で運用できる恩恵を受けています。ただそれもアクセスが増えるとどうしてもお金がかかるようになってしまいます。 フリーサービスならVercelが最も楽にデプロイ出来て良いのですが、商用サービスの場合は基本$20かかることや、商用プランにしてもアクセスが増えると結構高いため、最近Next.jsのホスティングにおいて、Vercelの代替手段を模索する動きが活発化しています。 一つの方法としてSPAで静的サイト化すると今度は個別のOGP画像が設定できないことや、APIをどうする問題なども出てしまいます。代替手段の一つとしてFirebas
はじめに Next.js を使用しているシステムでメモリリークが発生したので、3点ヒープダンプ法で原因を特定しました。ヒープダンプを取得するまでの手順や Chrome Devtools の Heap Profiler の使い方が分かったので、備忘録としてまとめました。 3行で要約 NextApiResponse の中身は stream なので、res.end() などでストリームを終了させないとメモリリークが発生する メモリリークを特定するのに3点ヒープダンプ法という手法がある Heap Profiler が便利 Next.jsのシステムでメモリリークが発生 メトリクス監視からメモリリークを発見 本番環境のECSのメトリクスを監視していたところ、メモリ使用率がジリジリと上がり続けていました。新しい機能をデプロイをするとメモリ使用率が一時的に下がるものの、再びメモリ使用率が徐々に上がっていま
JSer.info #727 - TypeScript 5.8がリリースされました。 Announcing TypeScript 5.8 - TypeScript TypeScript 5.8では、conditional return typeの改善、require(esm)の対応、--module node18を追加が行われています また、Node.jsの--experimental-strip-typesと合わせた設定をする--erasableSyntaxOnlyフラグの追加、--libReplacementフラグの追加なども行われています。 erasableSyntaxOnlyオプションは、次の機能を禁止することで型を取り除くだけで、JavaScriptとして実行できるTypeScriptのコードを書くための設定です。 enum declarations namespaces and
Next.js 15.2
# Use the automated upgrade CLI npx @next/codemod@canary upgrade latest # ...or upgrade manually npm install next@latest react@latest react-dom@latest # ...or start a new project npx create-next-app@latest Redesigned error UI and improved stack traces We've added both visual and quality improvements to errors you may encounter while building your application. Let's walk through each area of improv
はじめに ReactとNext.jsは、フレームワーク内部でthrowを活用しています。例えば、以下のようなケースが該当します。 Suspense は Promise を throw することで実現されている RSCで使えるnotFound() はエラーを throw する関数である そのため、安易にtry-catchを使うとフレームワークの機能を意図せずキャッチしてしまい、期待通りの動作にならないことがあります。 本記事では、Next.jsのRSC（React Server Components）でtry-catchを避けるべき理由と、その代替手段について解説します。 対象読者 それなりの規模で開発している開発者 Next.jsを利用している try-catchが問題を引き起こすケース SuspenseとPromiseのthrow ReactのSuspenseは、Promiseをthro
![[Next.js]Next.jsではtry-catchしない方が無難](https://cdn-ak-scissors.b.st-hatena.com/image/square/2b6622c891114aa476f9866b19b79a47c6d17b21/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--VXL37GQe--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BNext.js%25255DNext.js%2525E3%252581%2525A7%2525E3%252581%2525AFtry-catch%2525E3%252581%252597%2525E3%252581%2525AA%2525E3%252581%252584%2525E6%252596%2525B9%2525E3%252581%25258C%2525E7%252584%2525A1%2525E9%25259B%2525A3%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Aurotea%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly96ZW5uLWRldi5naXRodWIuaW8vZGVmYXVsdC1hdmF0YXJzL2RhcmsvdS5wbmc%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
こんにちは、やせです。 普段はゆるく個人開発をしている学生です。 はじめに 本記事では、Next.js+Hono+Bunを用いて、型安全にWebアプリ開発を行う方法を入門者向けに説明していきます。 また、本記事では以下の内容も扱います。ZodやDrizzleを用いて、データベースからフロントエンドまでを型安全に開発することができます。 Bun Workspacesを使用したモノレポ構成 HonoのRPC機能 Zodによる型安全なバリデーション Supabase DB + Drizzle ORMによるDB操作・マイグレーション TanStack Queryを使用したデータフェッチ Next.jsで作成したSPAをCloudflare Pagesへデプロイ Honoで作成したAPIサーバーをCloudflare Workersへデプロイ 各章の最後には、実際に手を動かして学びたい人向けにハンズ
![[入門] Next.js+Hono+Bunのモノレポ構成で型安全なWebアプリ開発をする](https://cdn-ak-scissors.b.st-hatena.com/image/square/4861b0c071b28dedef074a905a5dead4b112575f/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--HEpCXXfD--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255B%2525E5%252585%2525A5%2525E9%252596%252580%25255D%252520Next.js%25252BHono%25252BBun%2525E3%252581%2525AE%2525E3%252583%2525A2%2525E3%252583%25258E%2525E3%252583%2525AC%2525E3%252583%25259D%2525E6%2525A7%25258B%2525E6%252588%252590%2525E3%252581%2525A7%2525E5%25259E%25258B%2525E5%2525AE%252589%2525E5%252585%2525A8%2525E3%252581%2525AAWeb%2525E3%252582%2525A2%2525E3%252583%252597%2525E3%252583%2525AA%2525E9%252596%25258B%2525E7%252599%2525BA%2525E3%252582%252592%2525E3%252581%252599%2525E3%252582%25258B%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3A%2525E3%252582%252584%2525E3%252581%25259B%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2E5MGI0Mjk5NDcuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【図解解説】Cloudflareをマスター！2時間でNext.jsを開発して学ぶチュートリアル【初心者OK】 - Qiita
壊滅的な自分のUIデザインをAIにいい感じにしてもらう - Qiita
React Compilerを有効にして9ヶ月が経ちました
next.jsのみで簡易的な多言語対応をする - Panda Noir
【2025年】爆速でゼロイチ開発するための技術スタック
できるだけ無料で作る個人開発のための技術スタックと注意点
Next.js の特別ファイル・設定まとめ【AppRouter】
Next.jsのPages RouterからApp Routerに移行する | POSTD
React Server Confusion
Migrating Grep from Create React App to Next.js - Vercel
フォームライブラリの新たな選択肢 - TanStack Form
Amplify Hosting がスキュー保護を発表 | Amazon Web Services
WordPressからNotion + Next.jsへ 研究所ブログを全面リニューアル
TypeScript/React/Next.jsおすすめ学習資料のご紹介
Why We Moved off Next.js - Documenso
Postmortem on Next.js Middleware bypass - Vercel
Next.jsの脆弱性CVE-2025-29927まとめ
CVE-2025-29927 - GitHub Advisory Database
個人開発：Next.js はじめてのセキュリティ対策覚書 - izanami
Next.jsで発生したAPI ルートのメモリリークを3点ヒープダンプ法で解決した話
2025-03-06のJS: TypeScript 5.8(erasableSyntaxOnly)、Next.js 15.2、Lynx
[Next.js]Next.jsではtry-catchしない方が無難
[入門] Next.js+Hono+Bunのモノレポ構成で型安全なWebアプリ開発をする