RSC/Next.jsは信頼できないかもだけど、それで良いのかもしれない 🔖 67

背景 先日、RSCに重大な脆弱性が見つかりました。詳細については多くの記事が書かれていますので割愛しますが、Next.jsをただデプロイしているだけでもやられる重大さです。 RSCの設計自体も問題視されています。当初からセキュリティの議論が多く、今回の件とは直接関係がないものの、

CloudflareでNext.js(OpenNext)を運用してVercelに移行した話 🔖 1

この記事は モニクル Advent Calendar 2025 の16日目の記事です。 CloudflareでNext.jsを運用してみた本記事は下記のような体験談について書きます。opennextjs/opennextjs-cloudflare でのNext.jsを

「とりあえずNext.js」をやめてBetter-T-Stackを試してみた 🔖 21

株式会社アップルワールドのrikuです。 ※この記事はアップルワールド Advent Calendar 2025の9日目の記事です。 はじめに 2025年12月3日に起きたNext.jsおよびRSCのセキュリティ問題を受けて、弊社のフロントエンド技術選定について真剣に考える必要が

【React / Next.js】RSC続報：結局なにをすればいいか（55183 / 55184 / 67779） 🔖 5

最初に結論（やることだけ知りたい人向け）!以前まとめた記事からの続編です。📘 【Next.js】CVE-2025-66478対策は、とりあえず npx fix-react2shell-next したReact Server Components (RSC) まわりでは、

Next.jsの脆弱性を数日放置したら暗号通貨マイナーを仕込まれた話 🔖 123

やったら動作が遅いなと思ったら、いつの間にか CPU 使用率が100%に。 これはもしや...と思ったら、まさにでした。 PM2にログが残っていたのが救い。 後は、Claude Code におまかせしました。 以下、備忘録： はじめに 2025年12月、運用していた複数のNext

View TransitionでわかるNext.jsとAstroの設計思想 🔖 11

PLAID Designer's Advent Calendar 11日目の記事です。こんにちは。株式会社プレイドのDirection & Development Unit所属のデザインエンジニア、ケンジです。 はじめにウェブフロントエンド開発のエコシステムは成熟期

Vercel で Next.js の OpenTelemetry Trace を試してみた 🔖 2

はじめにCommune Developers Advent Calendar 2025 シリーズ1 の7日目の記事です 🚀Next.js には OpenTelemetry をサポートするようなことが書いてあり、Vercel 上でも簡単にトレースを取得できそうな感じがしました。

【緊急】Next.js (CVE-2025-66478) / React (CVE-2025-55182) の脆弱性について 🔖 129

1. はじめに：何が起きたのか 2025年12月3日、Next.js および React Server Components (RSC) の通信プロトコルにおいて、認証不要でリモートコード実行 (RCE) が可能となる重大な脆弱性が公表されました。 今回、特に事態を重くしている要

【緊急】Next.js (CVE-2025-66478) / React (CVE-2025-55182) の脆弱性について 🔖 129

1. はじめに：何が起きたのか2025年12月3日、Next.js および React Server Components (RSC) の通信プロトコルにおいて、認証不要でリモートコード実行 (RCE) が可能となる重大な脆弱性が公表されました。今回、特に事態を重くしている要

社内データ基盤 × Agent Engine × ADK × Next.jsで、分析エージェントを作っている話（技術編） 🔖 3

!この記事は、READYFOR Advent Calendar 2025 の4日目の記事です私たちREADYFORの社内には、dbtとBigQueryにより整備されたデータ基盤があり、日々多くの情報が蓄積されています。しかし、社内の誰もが自分の手で「今知りたいこと」をデー

TanStack Startを試してみたけど、もうNext.jsには戻れない 🔖 42

Next.jsReactTypeScriptTanStackTanStack StarttechGitHubで編集を提案Discussion

TanStack Startを試してみたけど、もうNext.jsには戻れない 🔖 42

英語圏の X で Next.js と TanStack Start を比較する投稿が話題になっていました。投稿の冒頭には「TanStack Start を試してみたけど、もう Next.js には戻れない」とあり、投稿主は TanStack Start を強く推奨しているように

コンポーネントの設計で最近気をつけていることまとめ（React / Next.js） 🔖 71

React / Next.js に慣れてくると、次に悩むのはだいたい「設計レイヤー」まわりですよね。 コンポーネントが太りやすい useEffect が増えてロジックが迷子になる 状態をどこに置くか毎回迷う Hooks をどこまで分割すべきか分からない このあたりのモヤモヤさえ事

コンポーネントの設計で最近気をつけていることまとめ（React / Next.js） 🔖 71

React / Next.js に慣れてくると、次に悩むのはだいたい「設計レイヤー」まわりですよね。コンポーネントが太りやすいuseEffect が増えてロジックが迷子になる状態をどこに置くか毎回迷うHooks をどこまで分割すべきか分からないこのあたりのモ...

ビルド30分→3分に。Next.jsをやめてAstroに移行した全記録 - ROXX開発者ブログ 🔖 47

こんにちは。ROXX Zキャリアプロダクト開発部、エンジニアの平です。 今回は、弊社の就職・転職ガイドメディアを Next.js Page Router から Astro + Cloudflare Workers へ移行し、ビルド時間を30分以上 → 3分、表示速度を大幅に改善し

Next.js Cache回想 🔖 19

!この記事はJSConf JP 2025で発表した内容を、記事として執筆しなおしたものです。Next.jsは従来より、デフォルトで高いパフォーマンスを実現するフレームワークであることを重視してきました。App RouterにおいてもSSR・Streaming・Cacheなど

ビルド30分→3分に。Next.jsをやめてAstroに移行した全記録 🔖 47

こんにちは。ROXX Zキャリアプロダクト開発部、エンジニアの平です。 今回は、弊社の就職・転職ガイドメディアを Next.js Page Router から Astro + Cloudflare Workers へ移行し、ビルド時間を30分以上 → 3分、表示速度を大幅に改善し

Next.js/ReactServerComponentに入門してみる 🔖 1

こんにちは！木村です！ 普段Reactを使用して開発をしているのですが、データの通信の扱いがなかなか難しいなと感じるこの頃です。そんな中で、なんだかちらちらと話に聞くReactServerComponentってどんな感じなんだろう。。。となったので、実際に触ってみました！今回はそ

毎週大量のプルリクエストを捌く！Next.js App Router時代のスケーラブルなフロントエンドアーキテクチャ設計 - ぐるなびをちょっと良くするエンジニアブログ 🔖 62

はじめに こんにちは。Restaurant Service Devグループの高岡です。現在ぐるなびウエディングのフロントエンド開発・運用を行っています。 ぐるなびウエディングは結婚式場検索・予約サービスで、検索・会場詳細・特集・ランキングなど多様な機能を持つ大規模なウェブアプリケ

毎週大量のプルリクエストを捌く！Next.js App Router時代のスケーラブルなフロントエンドアーキテクチャ設計 🔖 62

はじめに こんにちは。Restaurant Service Devグループの高岡です。現在ぐるなびウエディングのフロントエンド開発・運用を行っています。 ぐるなびウエディングは結婚式場検索・予約サービスで、検索・会場詳細・特集・ランキングなど多様な機能を持つ大規模なウェブアプリケ

Next.js 16で導入されたキャッシュコンポーネントについて理解する 🔖 3

はじめまして、_minoです！この記事では、Next.js 16のキャッシュコンポーネントおよびキャッシュ周りについてキャッチアップした内容をまとめました！まだまだ試行錯誤中ですが、案件で実際に検証したり、ドキュメントを読み込んだりしてまとめたので、学習の参考になれば幸いです

【Web開発】 主要Webフレームワークを比較 - React、Vue.js、Next.js、Django、FastAPIなど 🔖 90

JavaScriptベースのフレームワークは、TypeScriptで開発することが一般的になってきています。一方、PythonやRubyのフレームワークは、それぞれの言語が持つ型システムを活用します。 2.3 TypeScriptを使うメリット 型安全性によるバグの削減 コンパイ

【Web開発】 主要Webフレームワークを比較 - React、Vue.js、Next.js、Django、FastAPIなど 🔖 90

1. はじめにWeb開発の世界では、さまざまなフレームワークやライブラリが日々進化を続けています。2025年現在、フロントエンドとバックエンドそれぞれに多くの選択肢があり、プロジェクトに最適なものを選ぶことが成功の鍵となりますね。本記事では、現在最も使われている主要な...

Next.jsで練習するページ遷移型の検索機能 🔖 1

この記事ではNext.jsを使いながら、Webの基本にのっとった「ページ遷移型の検索機能」というわかりやすい題材を学びます。「遷移」と書くとなんだか難しく感じますが、その仕組みはとてもシンプルです。また、コーディングの途中でAIツールも使いますので、AIを使ってNext.jsや

Next.js DevTools MCPを使ってNext.jsアプリの開発を効率化！Bridge MCP Serverの仕組みとAI時代のフレームワーク生存戦略について考えてみた | DevelopersIO 🔖 102

Next.js 16からの/_next/mcpエンドポイントにより、AIエージェントは 実行中のアプリケーションの内部状態にリアルタイムでアクセスできる ようになるからです。 How It Works（仕組みの解説） 以下仕組みの解説ですが、少し細かい内容になるので、先に検証結果

SEO 面での Gatsby → Next.js 移行ポイント 🔖 1

こんにちは！アルダグラムでエンジニアをしている柴田です。最近の Web 開発では SSG（Static Site Generation）を採用するケースがあると思います。SSG の代表的なフレームワークとしては、Gatsby や Next.js が選ばれることが多いと思います（

SEO 面での Gatsby → Next.js 移行ポイント 🔖 1

こんにちは！アルダグラムでエンジニアをしている柴田です。最近の Web 開発では SSG（Static Site Generation）を採用するケースがあると思います。SSG の代表的なフレームワークとしては、Gatsby や Next.js が選ばれることが多いと思います（

Next.jsでPollyが生成した音声をブラウザ再生する 🔖 1

はじめにPollyとは、Amazonが提供する音声生成サービスです。テキストを入力として人間の音声を生成が可能で、日本語にも対応しています。本記事では、次の構成にてPollyで生成した音声をブラウザで再生します。AWS CLIとプロファイルの指定が完了している前提とします。

Next.js でよくある一覧 + 詳細画面を作る - Object.create(null) 🔖 86

あの日見たパターンの名前を僕たちはまだ知らない. よくある一覧 + 詳細画面を作りたい 例えば TODO アプリで, /todo にアクセスしたらタスクの一覧を, /todo/42 にアクセスしたら一覧は表示したまま ID = 42 のタスクの詳細を表示する, というよくあるパタ

GAS × Supabase × Next.js × Qiita API で構築する業務ナレッジ可視化ツール 🔖 1

はじめにGoogle Apps Script（GAS）とスプレッドシートで社内ツールを作るのは非常に簡単で便利です。しかし、その便利さゆえに以下のような課題を感じたことはないでしょうか？編集者が増えると同時編集によるデータ競合が発生しやすいスプレッドシートの肥大...

View TransitionライブラリSSGOIを使ってNext.jsでネイティブアプリのような画面遷移を再現してみる 🔖 2

SSGOIとはSSGOI（スゴイ）はウェブでネイティブアプリのようなページトランジションを実装することができるアニメーションライブラリです。2025年10月現在はReact・Svelte・Vueに対応しており、Next.jsなどのフレームワークにも互換性があります。ブラウザ

View TransitionライブラリSSGOIを使ってNext.jsでネイティブアプリのような画面遷移を再現してみる 🔖 2

SSGOIとはSSGOI（スゴイ）はウェブでネイティブアプリのようなページトランジションを実装することができるアニメーションライブラリです。2025年10月現在はReact・Svelte・Vueに対応しており、Next.jsなどのフレームワークにも互換性があります。ブラウザ

[Next.js] URL末尾に .md つけたらMarkdownをそのまま返す！ 🔖 6

Next.jsのドキュメントやQiitaなどでは、URLの末尾に .md を付けるとページ内容を生のMarkdownで取得できます。AIエージェントにコンテキストを渡したり、別クライアントから取り込んだりするのに便利なパターンです。この記事では Rewrites + Route

ブラウザバックで無限スクロールが振り出しに戻る問題をNext.jsの「URL付きモーダル」で解決する 🔖 2

はじめに「ブラウザバックで無限スクロールが振り出しに戻る」という著名な（？）問題を、Next.js App Router の Intercepting Routes と Parallel Routes を組み合わせたモーダルで、従来のデメリットを解消しながらうまく回避できました

Next.js 16 🔖 45

最新のNext.js15 / React19における実践的な設計方針とベストプラクティスを体系的にまとめました 🔖 7

はじめにNext.js 15とReact 19が登場し、App Routerを中心とした新しい開発体験が標準となってきました。Server ComponentとClient Componentを意識したコンポーネント設計、データハンドリング、状態管理、キャッシュ戦略など、実務で

Next.js 15 / React 19 実践設計ガイド 実装観点別のベストプラクティス 🔖 9

Next.js 15とReact 19を使用したWebアプリケーション開発における、実践的な設計方針とベストプラクティスをまとめたガイドを作成しました。本書では、Next.js 15 / React 19を活用したモダンなWebアプリケーション開発における設計方針を、実装観点

【Next.js】散らかりにくいREST APIのエラーハンドリング 🔖 28

Next.jsでAPIリクエストがエラーとなった場合のトースト表示を実装していたのですが、production buildではメッセージが隠されてしまう現象に遭遇しました。 An error occurred in the Server Components render. Th

【Next.js】散らかりにくいREST APIのエラーハンドリング 🔖 28

Next.jsでAPIリクエストがエラーとなった場合のトースト表示を実装していたのですが、production buildではメッセージが隠されてしまう現象に遭遇しました。An error occurred in the Server Components render.

【Next.js】散らかりにくいREST APIのエラーハンドリング 🔖 28

Next.jsでAPIリクエストがエラーとなった場合のトースト表示を実装していたのですが、production buildではメッセージが隠されてしまう現象に遭遇しました。An error occurred in the Server Components render.

Next.js App Routerで破綻しない設計──本番で使えるアーキテクチャ実践ガイド 🔖 63

Next.jsのApp Routerは、“設計力が試されるフレームワーク”です。Server Components、Server Actions、そして“use client”による明確な境界。それらは間違いなく強力な仕組みであり、使いこなせば、アプリケーションの構造を根本

Next.js × Hono × モノレポで実践する「リアルオプション戦略」：初期の開発速度と将来の柔軟性を両立させるWebシステム設計 🔖 6

はじめにASSIGN CTOの須永と申します。弊社では転職エージェントの支援品質の高度化・顧客価値の最大化を目指し、面談・選考管理、各種書類作成、求人マッチング、データ分析などの機能を持つ業務管理システムを内製で開発しています。昨年度からは新たに新卒就活支援事業を開始し、

Next.jsで `/` から別ページにリダイレクトしたいときにハマった話 🔖 1

こんにちは！今回は、Next.js で開発しているときに 「トップページ(/)にアクセスされたら自動で別ページに飛ばしたい」 という要件に直面したので、そのときのハマりポイントと解決方法をまとめます。発生した問題あるとき、「ユーザーが / にアクセスしたら /he...

おっしゃれなチャットアプリを作る（AI SDK + AI Elements + Next.js + Bedrock） 🔖 2

どう、これ？あれっぽいでしょ？これはどう？これも、っぽいでしょ？ソースコードはこちらこれ、AI Elements で作れます！AI Elements？？AI ElementsはVercel製のUIライブラリーです！もちろんストリーミングに...

Next.jsでのURL状態管理を楽にするnuqsの使い方 🔖 1

Next.jsでフロント開発をしていると、「状態をURLに載せたい」という場面がよくあります。検索条件を共有したい戻る/進むで状態を復元したいページをリロードしても結果を維持したいこれを素直に実装すると useSearchParams や router.replace

Supabase x フロントエンド - Next.js 編 - 🔖 3

SupabaseとNext.js、LIFFを連携させ、LINE上で動作するリッチなフロントエンドアプリを開発。セキュアな認証とRLSによるデータアクセス制御、そしてデータベース連携を実践的に学び、ユーザー体験を最大化するモダンなWebアプリ構築スキルを身につけましょう。1.

The Complete Guide to Self-Hosting Next.js at Scale 🔖 77

Next.js App Router の基礎：フロントエンドエンジニアのための入門ガイド（Server Actionsとフォーム処理編） 🔖 1

Next.js 15のServer Actionsを使ったフォーム処理とバリデーション、セッション管理までフロントエンドエンジニア向けに実践的に解説"

Next.js featuresディレクトリ構成で実現するスケーラブルなフロントエンド設計 🔖 1

こんにちは。フロントエンドエンジニアの禹です。 弊社で開発中の商品データを管理するWebアプリケーションに選定したfeaturesディレクトリ構成について解説し、自分が思ったメリットやデメリット、そして実装のポイント事例を紹介します。

Next.js はどうやって React Compiler を実行するか 🔖 25

はじめに：React Compilerの登場と、Next.jsにおける疑問 2025/04/21、Reactチームは待望のReact Compilerの安定版リリース候補を発表しました。このCompilerは、Reactコンポーネントが不要な再レンダリングを自動的にスキップできる