はじめに Next.js を Cloudflare にホスティングしようとすると、必然的に Edge Runtime 環境になります。しかし、Edge Runtime 環境では、Node.js Runtime と異なり、Prisma がそのまま使えません。 最初に思い浮かぶ解決策は Prisma Accelerate です。Prisma Accelerate は公式のサービスで、接続プールイングやグローバルキャッシュ機能を備えており、Edge Runtime でも Prisma を使えるようにします。 しかし、無料プランだと月に 6 万クエリの制限があり、本番運用には不安が残ります。 そこで、今回は Prisma Accelerate を自前で Cloudflare Workers 上に構築し、本番運用に耐えうるサービスを無料で開発する方法を紹介します。この方法なら、無料プランでも 月に
[JSなし] パワーアップしたView Transitions APIでMPAをSPAみたいにする - Qiita
2024年6月11日リリースのChrome126から、View Transitions APIがパワーアップし、別ページへの遷移でも使うことができるようになったので紹介したいと思います。 View Transitions APIとは View Transitions APIは、画面遷移をなめらかに行うことができる機能です。 この機能を使うと、以下の動画で紹介されているように、ページ遷移にアニメーションをつけることができます。 まずはView Transitions APIの特徴から紹介したいと思います。 特徴1：異なるDOM要素間でアニメーションできる アニメーション前後のDOM構造が異なっていても、アニメーションを行うことが可能です。 例えば、<div>がアニメーションで変化しつつ<img>要素になる、といったアニメーションが可能です。 特徴2：アニメーションがCSSで自由自在 アニメー
![[JSなし] パワーアップしたView Transitions APIでMPAをSPAみたいにする - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/40f0bdd895644cfec9e8497e08ce9c0883edb8d0/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCSlMlRTMlODElQUElRTMlODElOTclNUQlMjAlRTMlODMlOTElRTMlODMlQUYlRTMlODMlQkMlRTMlODIlQTIlRTMlODMlODMlRTMlODMlOTclRTMlODElOTclRTMlODElOUZWaWV3JTIwVHJhbnNpdGlvbnMlMjBBUEklRTMlODElQTdNUEElRTMlODIlOTJTUEElRTMlODElQkYlRTMlODElOUYlRTMlODElODQlRTMlODElQUIlRTMlODElOTklRTMlODIlOEImdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPWFhYTFiMTIzMDhkZDMyYmMzOTg1Zjg5MjVhYWZiOWI4%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBhY2Nlc3MzMTUxZnEmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWMzODc4MWE1MWNmYzRiZGJlNTcyYzdjM2RkZDMxNDE0%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D3626912c51af4270ad5c67dd51388c1e)
Next.jsでSSRF（=Server Side Request Forgery）の脆弱性が発覚したことが社内で話題になったので、まとめておこうと思います。対象の脆弱性は以下です。 脆弱性の概要 SSRF脆弱性は本来到達できないサーバーに対して、公開されてるサーバーを経由してアクセスすることができてしまう脆弱性です。 今回のNext.jsの脆弱性はhttpヘッダーのHostを書き換えることで、self hostingなNext.jsサーバーから任意のhttpリクエストを送信できてしまうというものです。これは、外部には公開してない内部APIに対するリクエストも可能になるため、SSRF攻撃になりえます。 今回の脆弱性の対象は、以下の条件を満たしている必要があります。 Next.jsをself hostingで運用している Next.jsアプリケーションがServer Actionsを利用して
CVE-2024-4367 - Arbitrary JavaScript execution in PDF.js — Codean Labs
This post details CVE-2024-4367, a vulnerability in PDF.js found by Codean Labs. PDF.js is a JavaScript-based PDF viewer maintained by Mozilla. This bug allows an attacker to execute arbitrary JavaScript code as soon as a malicious PDF file is opened. This affects all Firefox users (<126) because PDF.js is used by Firefox to show PDF files, but also seriously impacts many web- and Electron-based a
Python、Node.js、C#のサンプルコード付き サービス間通信技術「gRPC」を学べる無料の電子書籍
Googleによって開発され、オープンソース化された通信技術「gRPC」は、マイクロサービスアーキテクチャにおけるサービス間の通信手段としてはもとより、モバイルアプリケーションがサービスにアクセスする際のインタフェースとしても注目されています。 本eBookでは、連載「スキマ時間にこっそり学ぶ『gRPC』入門」全8回を収録。そもそもRPC（Remote Procedure Call）とはどのような通信技術なのか、gRPC誕生の背景や、gRPCの特徴、利点を解説しています。 第1回以降はC#、Python、Node.js、KotlinとAndroid、SwiftとiOS、Goとgrpc-gatewayなどさまざまなプログラミング言語、プラットフォームを取り上げ、gRPCサーバとクライアントを実装する方法や、サーバストリーミング、クライアントストリーミングを実装する方法を、サンプルコードととも
主要なJavaScriptエンジンのTest262を毎日実行して結果を載せているtest262.fyiというサイトがあります。 （Test262とは最新のECMAScriptを実装できているかどうかのテストです。） このサイトの、2024/6/5現在の実装率ランキングはこちらです。 test262.fyiの画面キャプチャ（2024/6/5） V8(ChromeやNode.js、Deno等)、JavaScriptCore（SafariやBun等）、SpiderMonkey（Firefox等）という、大手エンジンとほぼ横並びで4位に食い込んでいるBoaとは何者でしょうか。 Boaは公式曰く『Rustで書かれた実験的なJavascriptのレキサー、パーサー、コンパイラー』です。これだけ揃えば、JavaScriptエンジンと言って差し支えないと思います。RustアプリケーションにJavaScri
React Compiler React 19 Beta から React Compiler が導入され利用可能となりました。 ※単体での検証としては次の記事が参考になります。 Next.js での利用 React Compiler のドキュメント内には、各種バンドラやフレームワークで利用する方法も記載されています。 というわけで、Next.js で実際に試してみよう、というのがこの記事の主旨です。 事前準備 / セットアップ 基本的にドキュメントに従って進めます。注意点としては、執筆時点での Next.js の Stable バージョン 14.2 ではまだ React 19 が利用できないため、canary バージョンの利用が必要です。 適当なディレクトリを作成し、その中で create-next-app を実行します。 実験用のためオプションは適当に選択しますが、せっかくなので Tur
こんにちは、VPoEの北川です。 今回はトレタで現在使用している技術スタックについて紹介します。 創業時から稼働している予約・顧客台帳サービス「トレタ」から現在の注力事業のモバイルオーダーサービス「トレタO/X」までをあらためて振り返ってみると、まるで異なる技術スタックになっているので歴史的な背景などを辿りながら紹介していきます。 技術スタックの変遷 予約・顧客台帳「トレタ」 会社名にもなっている予約・顧客台帳の「トレタ」は創業当時から稼働している築11年ほどのシステムです。 サーバーサイドにはRubyとRubyOnRailsで作られた巨大なコードベースのAPIサーバーがあり、予約台帳のiOSアプリやウェブ予約などのWebアプリケーションなどが利用しています。 長年このモノリシックなシステムを成長させてきたので、以前からトレタを知ってくださっている人にはトレタはRubyの会社と認知されてい
Next.js breaking change - disable router/fetch cache by default
Next.js App Routerは巷では難しいと評されることが多々あります。これはReactの新機能であるServer ComponentsをはじめとするServer 1stとも言えるパラダイムシフトを必要とすること、そして初見殺しなデフォルトのキャッシュ挙動に起因していると筆者は考えています。 パラダイムシフトが必要となるServer ComponentsやServer ActionsなどのReactの新機能については、エラーで指摘・修正のヒントが提示されるなどの初学者のフォローもしっかり考慮した設計がなされてたり、多くのドキュメントや記事が公開されているので、これらについてはhooksが登場した時のようにあとは世の中に理解が広まるまでの時間の問題なのかなとも感じています。 一方でキャッシュについては、デフォルトで積極的かつ何層にも分けてキャッシュされる上、「意図せずキャッシュされて
PR TIMESのトップページをNext.jsにリプレイスしました | PR TIMES 開発者ブログ
こんにちは、フロントエンドエンジニアのやなぎ（ @apple_yagi ）です。 プレスリリース掲載ページ、キーワード検索ページに続き、PR TIMESのトップページを PHP + Smarty + […]
Next.js 15 RC
The Next.js 15 Release Candidate (RC) is now available. This early version allows you to test the latest features before the upcoming stable release. React: Support for the React 19 RC, React Compiler (Experimental), and hydration error improvements Caching: fetch requests, GET Route Handlers, and client navigations are no longer cached by default Partial Prerendering (Experimental): New Layout an
Next.js 15 RCまとめ
基本的には以下のNext.js 15 RCのブログを翻訳してまとめたものになります。 TL;DR React 19 RC: React 19 RCとReact Compiler(Experimental)、ハイドレーションエラーの改善のサポート キャッシュ: fetchによるリクエストとGETによるRoute Handlers、クライアントナビゲーションのキャッシュをデフォルトで無効化 Partial Prerendering (Experimental): 段階的な採用のための新しいLayoutとPageの設定のオプション next/after (Experimental): レスポンスの後にコードを実行するための新しいAPI create-next-app: デザインのアップデートとローカル開発でTurbopackを有効化するための新しいフラグ 外部パッケージのバンドル (Stable
Google、フルスタックのWebアプリホスティング環境「Firebase App Hosting」パブリックプレビュー開始。AngularとNext.jsをサポート
Googleは日本時間5月15日と16日に開催したイベント「Google I/O 2024」で、Webアプリケーションのホスティング環境を提供する新サービス「Firebase App Hosting」のパブリックプレビューを発表しました。 Firebase App HostingはGitHubと接続することで、開発者がコードをGitHubにプッシュすると自動的にFirebase App Hostingにコードが取り込まれます。 取り込まれたコードはCloud Buildで自動的にビルドが行われて静的なコンテンツがレンダリングされ、動的なコンテンツはCloud Runにデプロイされ、Cloud CDNでコンテンツがキャッシュされることで、自動的にWebアプリケーションがデプロイされます。 対応するフレームワークはAngularとNext.jsです。いずれも手動での設定をすることなく、Fire
Google I/O 2024で発表されたFirebase App HostingでNext.jsのSSRを試す
先日のGoogle I/O 2024でFirebaseの新機能が発表されました。 これを読んでいて気になったのが、App Hostingという機能です。どうやらAngularとNext.jsのSSRをサポートしてくれるようになったようです。 自分はboobyというOSSコントリビュートしやすそうなリポジトリを探せるサービスを過去にリリースしています。 これのホスティング先として最初に検討していたのがFirebase Hostingでした。が、「？SSRどうやって動かすんだ？」と思いながらデプロイのための調査をしていたところ、どうやらCloudRunなどのサーバーサイドランタイムも使いながらでなければ動かせないということに行きつきました。 これまでやってきたCSRのHostingと異なり色々と手間が増えるなという結論に至り、結果初期構築が楽なVercelにデプロイすることにしました。当時の奮
はじめに こんにちにんにん、 art です。 僕が所属するレバテック開発部では、最近デザインシステム『VoLT』が誕生しました。 レバテックでは複数のプロジェクトが運用されており、フロントエンドの技術スタックは Vue.js × Nuxt React x Next.js の２つが採用されています。 ですので、両方の技術スタックに対応したデザインシステムを作る必要があるわけですね。 あら大変。_(:3 」∠ )_ というわけでこの記事では、『VoLT』のUIコンポーネントライブラリを制作するにあたり、肝となったデザインシステムのマルチフレームワーク対応についてお話しします。 🔗そもそも『VoLT』とはなんぞや？構築の背景は？と気になった方は、こちらをご覧ください！ 想定読者 デザインシステムに興味のある方 これからデザインシステム関連の業務に携わる方 すでにデザインシステム関連の業務に携わ
「Firebase CLIのNext.jsデプロイ対応について調べる」ではCloud FunctionsにカスタムビルドしたNext.jsアプリがデプロイされていたが、Cloud Functions (2nd gen)でCloud RunベースになったのでNext.jsのデプロイもApp HostingでCloud Run版になった 基本的なデプロイまでの手順以下のドキュメントにある。本記事ではこれを参考に内部動作を調べる firebase-tools firebase-cliの最新版に以下のコマンドが追加されている ❯ firebase --help | grep apphosting: apphosting:backends:list [options] list Firebase App Hosting backends apphosting:backends:create [opt
こんにちは。Vue.js 日本ユーザーグループの jay-es です。 2024 年 5 月 28 日（火）に Vue.js v-tokyo Meetup #20 を開催しました。 今回は「Developer Experience 開発者体験特集!」というテーマで、Vue.js エコシステムの DX 関連の内容をキャッチアップできるイベントとなりました。 当日参加いただいた皆様、誠にありがとうございました。 また、会場スポンサーをしていただいた株式会社プレイド様、ツールスポンサーの esa 様にも心よりお礼申し上げます。 会場の様子GINZA SIX の株式会社プレイドの社内にある広々とした人工芝のスペースが今回の会場です。 後方には大きな冷蔵庫があり、好きなドリンクをいただくことができました。太っ腹！ オープニングまずは Vue.js 日本ユーザーグループ代表の kazupon 氏による
JSer.info #693 - 次の記事では、Remix v3はReact Router v7としてリリースする予定という話が紹介されています。 Merging Remix and React Router | Remix RemixとReact Routerは、Viteとサーバ以外はほぼ同等の機能になってきています。 そのため、React RouterをRemixにマイグレーションするのではなく、React RouterをアップデートするだけでRemixの機能を使えるようにしたいという話が書かれています。 既存のRemixアプリは、import先のパッケージをreact-routerに変更するだけで動く予定とのことです。 この意思決定の詳細は、Xでも書かれています。 https://x.com/ryanflorence/status/1791479313939976313 React
In the era of React Server Components and the Next.js App Router, component libraries like Material UI must make some paradigm-shifting changes to reap the potential performance gains by moving more of the work of rendering UIs from client to server. Trouble is, the "traditional" CSS-in-JS solutions we rely on aren't able to come along with us because the React context API only works on the client
引用元: https://nodejs.org/en/about/branding 2024年4月24日にリリースされたNode.js v22の主な変更点を紹介します。 Node.js v22はLTS(長期サポート)のバージョンになります。10月の後半にLTSとしてサポートが始まります。 nodejs.org require()がESMをサポート V8 12.4 アップデートによる JavaScript の機能 Array.fromAsync() Set methods union() intersection() difference() symmetricDifference() isSubsetOf() isSupersetOf() isDisjointFrom() Iterator Helpers map() filter() reduce() --runオプションによるpacka
Next.jsでWEBアプリケーションを開発している時に、middlewareが大量に叩かれるという問題が発生した。 Supabaseを使用しており、middlewareでgetUser()が大量に叩かれてAPIのLimit制限を食らっていた。 諸々調査した結果、解決したので記載しておく。 環境 Vercel Supabase Next.js（１４．x） App Router 解決方法① PreFetchではMiddlewareをパスするように設定 <Link>を使用していると、prefetchが行われるため、リストページなどでは大量にmiddlewareが実行される。 RLSを導入しているので、ログインしていなければ、ログインページにリダイレクトされればOK。 export async function middleware(req: NextRequest) { ... } // En
オランダのセキュリティベンダーCodean Labsは5月20日（現地時間）、「PDF.js」に任意のJavaScriptコードを実行できる脆弱性（CVE-2024-4367）があることを明らかにした。 【画像】実証コード（PoC）が成功した様子 「PDF.js」は、HTML5で構築されたPDFビューワー。「Firefox 19」以降に搭載されている内蔵PDFビューワーなどに用いられている。 PDF形式は複雑なことで有名で、これまでも攻撃のターゲットになってきた。しかし、その多くはC/C++実装のメモリ破壊バグを狙ったものであり、低レベルなメモリアクセスを扱わないJavaScriptで構築された「PDF.js」はそれと無縁に思える。 しかし、Codean Labsによると「PDF.js」でフォントをレンダリングするコードには見落としがあるという。「PDF.js」はパフォーマンスに最適化する
JSer.info #695 - Vitest v2.0.0-beta.5がリリースされました。 Release v2.0.0-beta.5 · vitest-dev/vitest --merge-reportsがカバレッジをサポート、Promiseベースのmockに対するAssertionの追加、ブラウザモードの改善などが含まれています。 VitestのBrowser Modeは、jsdomやhappy-domを置き換える形で、コンポーネントテストのための仕組みとして作られています。 開発中のVitest 2.0ではCommands APIとmodule mockingが追加されています。 次のIssueに、VitestのBrowser Modeの目的や方向性についての解説が書かれています。 Vitest Browser Mode · vitest-dev/vitest · Discus
JSer.info #694 - Next.js 15 RCがリリースされました。 Next.js 15 RC | Next.js React 19 RCに対応、React Compilerを実験的にサポート、Hydration Error表示の改善が行われています。 また、Fetch/GET Route Handler/Client Routerをデフォルトでキャッシュしないように変更、Partial Prerenderingのincrementalオプションを追加などの変更も行われています。 そのほかには、遅延処理をするnext/afterを追加、create-next-appのアップデート、非推奨だった@next/fontのサポート削除などが行われています。 SolidStart 1.0がリリースされました。 SolidStart 1.0: The Shape of Framewor
DenoがプライベートなnpmレジストリやgRPCに対応、Node.js互換度向上でNext.jsアプリの実行も可能に。Deno 1.44で
DenoがプライベートなnpmレジストリやgRPCに対応、Node.js互換度向上でNext.jsアプリの実行も可能に。Deno 1.44で JavaScript/TypeScriptランタイムの「Deno」は、最新版のDeno 1.44でnpmのプライベートレジストリやgRPCに対応したことを発表しました。 Deno 1.44 is released! Private npm registries gRPC now supported Module loading & memory performance improvements LSP and compatibility enhancements Request.bytes() and Response.bytes() New lint rules DENO_FUTURE=1 And more... https://t.co/lx7f
はじめに 🚩 この記事では、Tanstack Query や SWR などのライブラリに頼らずに、React 標準の Hooks をふんだんに活用してチャット機能を実装する方法を紹介します。 RC（Release Candidate）段階ではありますが、React 19 で追加された useActionState と useOptimistic を使うことで、よりインタラクティブで快適な UI/UX を実現する方法を探っていきます。 また筆者の過去の記事ではそれぞれの Hooks に焦点を当てた記事を書いているので、そちらもあわせて参照してください。 実装例 📝 はじめに完成した状態のデモアプリを示します。 楽観的更新によりチャットメッセージが送信されるとデータベースにデータが保存されたかどうかに関わらず即座に表示され、メッセージの送信中かどうかによってアイコンが切り替わっています。
![React Hooksもりもり構成のチャット機能を考える[React 19 / Next.js 15]](https://cdn-ak-scissors.b.st-hatena.com/image/square/34ba9ee6b479b17e37b1baec5e4ce5dcc42922e6/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--QPcmpnBP--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3AReact%252520Hooks%2525E3%252582%252582%2525E3%252582%25258A%2525E3%252582%252582%2525E3%252582%25258A%2525E6%2525A7%25258B%2525E6%252588%252590%2525E3%252581%2525AE%2525E3%252583%252581%2525E3%252583%2525A3%2525E3%252583%252583%2525E3%252583%252588%2525E6%2525A9%25259F%2525E8%252583%2525BD%2525E3%252582%252592%2525E8%252580%252583%2525E3%252581%252588%2525E3%252582%25258B%25255BReact%25252019%252520%25252F%252520Next.js%25252015%25255D%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_34%3ATsuboi%252Cx_220%252Cy_108%2Fbo_3px_solid_rgb%3Ad6e3ed%252Cg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzAzODVjOWFlYzkuanBlZw%3D%3D%252Cr_20%252Cw_90%252Cx_92%252Cy_102%2Fco_rgb%3A6e7b85%252Cg_south_west%252Cl_text%3Anotosansjp-medium.otf_30%3Achot%252520Inc.%252520tech%252520blog%252Cx_220%252Cy_160%2Fbo_4px_solid_white%252Cg_south_west%252Ch_50%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzUzMmU3Zjg2MTIuanBlZw%3D%3D%252Cr_max%252Cw_50%252Cx_139%252Cy_84%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
はじめに こんにちは、令和トラベルでフロントエンドエンジニアをしているyamatsumです。 ここでは複雑なWebアプリケーションを開発・保守する場合に有効なアーキテクチャパターンとして知られているマイクロフロントエンドをNext.jsを用いて実現した時の設計とその課題について紹介したいと思います。 ※ この記事は令和トラベルのTech LT会で共有した内容を記事にしたものです。社外の方にもご参加いただけるTech LT会は connpass にて告知しています。 マイクロフロントエンドとは マイクロフロントエンドは、複雑なウェブアプリケーションを小さな独立したWebアプリやモジュールに分割するアーキテクチャパターンです。各Webアプリは異なるチームによって開発・保守することができ、一般に技術スタックやフレームワークの選択も自由です。 このWebアプリ群を組み合わせることで、以下のような利
Next.js App Router、Server Actions、Conform、Zodで条件分岐があるフォームを作る - asoview! Tech Blog
はじめに アソビューのフロントエンドテックリードの井上です Next.jsのApp Routerがリリースされてから数ヶ月経ち、本番サービスに適用して運用しているような方々も出てきた今日このごろのフロント界隈かと思います。 弊社でもApp Routerの適用したアプリケーションを開発中です。 さて、これまでフォームのバリデーションライブラリとしてreact-hook-formを使うケースが多かったのですが、Next.jsのServer Actionsへの対応がまだ検証段階（2024/5/23現在）、ということもあり、対抗馬としてRemix や Next.js のようなサーバーフレームワークを完全にサポートするという謳い文句のconformを試してみようと思います。 通常の使い方の解説記事はすでに多くの方が書かれていますので、今回は少し複雑なケースに適用した場合について検証してみました。 は
Node.js — Node v22.2.0 (Current)
2024-05-15, Version 22.2.0 (Current), @targos Notable Changes [fb85d38e80] - (SEMVER-MINOR) cli: allow running wasm in limited vmem with --disable-wasm-trap-handler (Joyee Cheung) #52766 [23a0d3339f] - doc: add pimterry to collaborators (Tim Perry) #52874 [7d7a762156] - (SEMVER-MINOR) fs: allow 'withFileTypes' to be used with globs (Aviv Keller) #52837 [8748dd6477] - (SEMVER-MINOR) inspector: intr
個人開発者が実践したNext.js - T3stack - DDD な感じのアーキテクチャ 【その1 使用技術と全体の構成】 - Qiita
個人開発者が実践したNext.js - T3stack - DDD な感じのアーキテクチャ 【その1 使用技術と全体の構成】DDDNext.jstRPCt3-stack 誰が書いてるか 仕事でDDD・TypeSafeな開発を経験し、個人で進めていたNext.jsのプロジェクトに T3Stack バックエンドでのDDD を取り入れたくなったTypeScriptエンジニアです。 T3Stack "The best way to start a full-stack, typesafe Next.js app" な技術スタックです。 特に、 Prisma tRPC を使ったTypeSafeな開発体験が素晴らしいです。 このプロジェクトでも、 Prismaの型提供 tRPCの フロント-バックエンドAPI 間の型の直接共有 の恩恵を大いに受けています。 全体構成 Next.jsのモノリス構成で、p
Vue.js最新動向 by @kazupon — TechFeed Experts Night#27 〜 フロントエンドフレームワーク最前線
本記事は、TechFeed Experts Night#27 〜 フロントエンドフレームワーク最前線のセッション書き起こし記事になります。 イベントページのタイムテーブルから、その他のセッションに関する記事もお読み頂けますので、一度アクセスしてみてください。 本セッションの登壇者 セッション動画 ではVue.jsの最新動向ということで、話していきたいと思います。早口の紹介になりますが、スライドは後日じっくり読んでいただければと思います。 まず自己紹介なんですけども、@kazuponと言います。PLAID株式会社というところで働いています。 Vue.jsのコアチームメンバーで、Nuxtのコミュニティチームに参加していたり、Vue.js日本ユーザーグループのオーガナイザーもしています。
Next.jsエンジニアのための Flutter入門
本書では、Next.jsエンジニアを対象としたFlutter入門を解説しています！Next.js・Reactエンジニアはたくさんいるが、Flutterエンジニアはまだまだ少ないと思い、本書を作成しました！Next.jsと比較しながら説明するのが特徴です！ ※本書の執筆にはChatGPTを使用し、それをもとに編集しています
Node.jsの組み込みテストランナーとは 英語圏ではNode.js built-in test runnerとか呼ばれている存在で、Node.jsの組み込みテストランナーのこと。恐らくDenoのテストランナーに対抗して生まれた気配がする（Node.jsはDenoに機能追加があると真似する傾向があるため Node.jsの組み込みテストランナーは機能が二分されており、テストランナーとアサートに分かれている Jestみたいにエコシステムが発達しておらず、標準ではdescribeなどはimportする必要がある。TypeScriptをテストする場合は間にレジスター[^1]を嚙ます必要があるが、本項では扱わない Jest関数との対応リスト describe, it, beforeAll, afterAll, beforeEach, afterEach辺りは違和感がなかったが、それ以外は軒並み互換性
GitHub - noway/htb: Htb.js — a 50-line HTML template engine that uses JavaScript syntax.
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
こんにちは！テラーノベルでiOS/Android/Webとフロントエンド周りを担当している @kazutoyoです！ 先日、「Node学園 42時限目 Next.js AppRouterについて」に参加させていただいて、App Routerについて深く知ることが出来ました。 弊社のサービスであるテラーノベルでも、昨年末あたりから徐々にPage RouterからApp Routerに切り替えています。 今回は弊社でApp RouterをProduction環境に導入したことをお話しようと思います。 App Routerの導入で対応したこと App Routerの導入にあたって、次のように対応を進めました。 既存のPage Routerとは共存させる 新規ページ/リデザインなど行うページからApp Routerに置き換えていく方針 なるべくServer Componentとなるようにする Se
astroでthree.jsを動かす方法
検索しても出てこなかったので。 Reactを使います(React Three Fiberは後述) astroにReactをインストール ドキュメントを見るとReactをインストールする方法は自動と手動の2つあって、今回は自動で行います。手動だと、reactをブラウザで解釈するためのreact/domというライブラリを入れたり、コンフィグいじったりしなければならないですが、自動だと全部よろしくやってくれます。 npx astro add react ✔ Resolving packages... Astro will run the following command: If you skip this step, you can always run it yourself later ╭───────────────────────────────────────────────────
transformers.js/examples/webgpu-whisper at v3 · xenova/transformers.js
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
こんにちは。MASKMAN Inc. デザイナーの向田と申します。 今回はデザイナーの私がAIを使用して、エンジニアの力を借りず、Three.jsでWebアニメーションを実装できるか、に挑戦した話を記事にしてみました。 今回作ったもの 3種類の画像がパーティクルになって切り替わる3種類の花の画像が、パーティクルの散乱・収束とともに切り替わるアニメーション演出を、Three.jsで実装しました。コードは基本的に全てChatGPT(GPT-4)が出力しており、私は「作業指示」と「実行結果」を伝える程で、自分ではほとんどコードを記述していません。 まるで、つよつよエンジニアとチャットで話しながら制作しているような感覚で作業を進めることができました。それでは、GPT-4との共同制作の過程を振り返ってみたいと思います。 どうやって作った？今回、主に使用したのは、OpenAI社の対話型AIであるCha
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Next.jsとPrismaをCloudflareにデプロイして月300万のDBクエリに無料で耐える
Next.jsのSSRF脆弱性 CVE-2024-34351
Rust製JavaScriptエンジン『Boa JS』を試してみた
Next.js で React Compiler を試しつつ出力コードを見てみる
Next.jsとGoを使っていきます - トレタ開発者ブログ
「PDF.js」に任意コード実行の脆弱性 ～多くのWebサイト・アプリに影響／「Firefox」内蔵PDFビューワーでも用いられているPDF表示ライブラリ
デザインシステムをマルチフレームワーク(React/Vue.js)に対応させてみた
Firebase App HostingにNext.jsがデプロイされる仕組み
Vue.js v-tokyo Meetup #20 を開催しました｜jay-es
2024-05-19のJS: Remix + React Router = React Router、State of HTML 2023
Introducing Pigment CSS: the next generation of CSS-in-JS - MUI
Node.js v22の主な変更点 - 別にしんどくないブログ
Next.jsでMiddlewareが大量に実行される場合の対処法
「PDF.js」に任意コード実行の脆弱性 ～多くのWebサイト・アプリに影響（窓の杜） - Yahoo!ニュース
2024-06-03のJS: vitest v2.0.0-beta.5(browser mode)、Rspack v0.7、ESLint Migrator
2024-05-26のJS: Next.js 15 RC、SolidStart 1.0、Angular v18(zoneless)
React Hooksもりもり構成のチャット機能を考える[React 19 / Next.js 15]
小さなデプロイで大きな成果！ Next.jsで実現するマイクロフロントエンド
🌊 mizu.js
Node.js組み込みテストランナーとJest比較メモ
テラーノベルにおけるNext.jsのApp Routerを利用してみて
デザイナーが挑戦。GPT-4と実装するThree.jsアニメーション｜MASKMAN Inc.