はてぶ・Qiita・Zennのトレンド記事を紹介
Next.jsはReactベースのWebアプリケーションフレームワークです。サーバーサイドレンダリングや静的サイト生成など、モダンなWeb開発に対応しています。
Next.js はどうやって React Compiler を実行するか 🔖 25
はじめに：React Compilerの登場と、Next.jsにおける疑問 2025/04/21、Reactチームは待望のReact Compilerの安定版リリース候補を発表しました。このCompilerは、Reactコンポーネントが不要な再レンダリングを自動的にスキップできる
Next.jsのESLint設定"next/typescript"は何をしているのか？実は2つのルールを変えただけだった 🔖 1
概要Next.jsプロジェクトを始めるとき、初期設定のeslint.config.mjsをそのまま使う人も多いと思います。そこに書かれているnext/typescriptが実際何をしているかご存知でしょうか？create-next-appをした時点でのeslint....
ECS FargateのNext.jsプロジェクトでもDatadogを使いたい! 🔖 1
吾輩は人間である前書き最近新規で立ち上げたアプリケーションに外形監視を導入したいと考えており、N社のサービスにするか、AWS内で完結するか悩んでいましたがDatadogを採用することに決めました。ネットで調べてもNext.js + ECS Fargateの構...
どうもこんにちは、たくびーです。!この記事はAIを使わずに書かれています。弊社ではいくつかのアプリケーションが存在し、それらをモノレポで管理しています。今回はそのうちの1つのアプリケーションをReact + WebpackからNext.jsへ移行を行いました。 動機
【個人開発】自分のためのコード販売サイトを作ってみた【Next.js×TypeScript×Stripe×supabase】 🔖 2
はじめに諸事情により、ちょっと間が空いてしまったので、復習がてらに自分の作ったアニメーションコードを販売するサイトを作ってみました。元々何かを作ろうと思った時に課金制度は必須だったので、これを機にstripeの学習をすることを決めて、実際に作ってみました。また、今回...
Next.js + AWS Amplify + AgentCore で簡単なAIチャットアプリを作ってみる(ローカル実行編) 🔖 1
はじめに今回は、Next.js + AWS Amplify + Amazon Bedrock AgentCore(以降、Agent Coreと記載) の構成で簡単なチャットアプリを作ってみました。モチベーション当初はStrandsAgentsやAgentCoreの...
Vue, Nuxt, React, Next.js の特徴・役割・使いどころを整理する 🔖 46
Vue ― 小さく始めて大きく育てられる「プログレッシブフレームワーク」 Vue は 「プログレッシブフレームワーク」 として紹介されています。 「プログレッシブ」とは、小さな機能から段階的に導入でき、必要に応じてフル機能のフレームワークへと拡張できる柔軟性を指します。 例えば、
Next.js App Router の基礎：フロントエンドエンジニアのための入門ガイド（コンポーネントとデータ取得編） 🔖 1
Next.js App Routerの核心であるServer ComponentsとClient Componentsの使い分け、そして最新のデータ取得パターンを、実践的なコード例とともに詳しく解説します。
Vue, Nuxt, React, Next.js の特徴・役割・使いどころを整理する 🔖 46
はじめにフロントエンド開発における主要な技術スタックとしてよく登場するのが Vue や React、そしてそれぞれを拡張した Nuxt や Next.js です。これら4つのライブラリ／フレームワークは用途や役割に違いがあり、「どれを選べばいい...
Unipos の Elm から React (Next.js) へのリアーキテクチャプロジェクトを振り返る 🔖 15
Unipos では、約2年間にわたり Elm から React (Next.js) へのリアーキテクチャプロジェクトを実施しました。 そして、2025年3月 をもって完全に置き換えが終わりました 🎉 今回の記事では、 リアーキテクチャをする前の 開発者としての個人的な違和感やモチ
Next.js 15.4リリースなど: Cybozu Frontend Weekly (2025-07-22号) 🔖 3
こんにちは！サイボウズ株式会社フロントエンドエンジニアのdaiki（@k1tikurisu）です。 はじめにサイボウズ社内では毎週火曜日にFrontend Weeklyと題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。今回は、2025/07/
Next.js ＆ Cloudflareざんまいは、simpleだけどeasyじゃない。けど、まぁ、いいわ。 🔖 4
どうせみんな、Cloudflareのことが好きなんでしょ。私も大好き。だってCloudflareってDBとかストレージとか色々あって、そんでもって無料枠が東京ドーム◯個分だもんね。もうできるだけCloudflareに乗っかってアプリ作りたいわよね。だから私、やってみたわ。
Next.js Version Skew 真相解明編 🔖 19
こんにちは。ウォンテッドリーでフロントエンドチームのリーダーをしている原です。先日「Next.js の Versi...
Unipos の Elm から React (Next.js) へのリアーキテクチャプロジェクトを振り返る 🔖 15
Unipos では、約2年間にわたり Elm から React (Next.js) へのリアーキテクチャプロジェクトを実施しました。そして、2025年3月 をもって完全に置き換えが終わりました 🎉今回の記事では、リアーキテクチャをする前の 開発者としての個人的な違和感やモ
最近、oRPCという技術を知って、実際使ってみたらめちゃくちゃ良かったので、ハンズオン形式の本にしてみました。この本は、ハンズオン形式でブログサイトを作る内容となっており、oRPC 以外にも Drizzle や Turso、Better Auth などの基本的な解説も含まれて
Claude CodeによるMVP開発に最適なNext.jsディレクトリ構成 🔖 7
前回の記事の続きです。Vibe Codingに最適なNext.jsとClaude Codeに向けて、Next.jsのディレクトリ構成を整理します。現代のdApps開発では、Web3特有の複雑さに加えて、フロントエンド開発の高速化が求められています。特にハッカソンやMVP...
AI Agentのアウトプットに『Next.jsの考え方』を反映するプラクティス 🔖 55
AI Agentの進化は目覚ましく、日々実装の品質も向上しています。しかし、開発者自身に明確な実装イメージがある場合、それをAI Agentに出力させることは難しく、さまざまな工夫を必要とします。Agentに与えるコンテキストやプロンプトを最適化したり、詳細なルールを整備すること
AI Agentのアウトプットに『Next.jsの考え方』を反映するプラクティス 🔖 55
AI Agentの進化は目覚ましく、日々実装の品質も向上しています。しかし、開発者自身に明確な実装イメージがある場合、それをAI Agentに出力させることは難しく、さまざまな工夫を必要とします。Agentに与えるコンテキストやプロンプトを最適化したり、詳細なルールを整備すること
Nuxt.jsの開発元Nuxt Labs、Next.jsの開発元Vercelへの合流を発表 🔖 80
Webアプリケーションフレームワーク「Nuxt.js」の開発元であるNuxt Labsは、同じくWebアプリケーションフレームワーク「Next.js」の開発元であるVercelへの合流（Join）を発表しました（Vercelの発表、Nuxt Labsの発表）。 We are ex
Next.js アプリケーションの version skew 問題に向き合う | Wantedly Engineer Blog 🔖 53
こんにちは。ウォンテッドリーでフロントエンド組織のリーダーをしている原 (@chloe463) です。 この記事では、数ヶ月前我々のプロダクトで起きていた不具合の原因と解決策について解説します。 大きく2つの問題が起きていましたが、一見すると無関係に見えた2つの不具合が、1つの重
Next.js アプリケーションの version skew 問題に向き合う 🔖 53
こんにちは。ウォンテッドリーでフロントエンド組織のリーダーをしている原 (@chloe463) です。 この記事で...
Next.jsのコンパイラから知るServer Actionsの完全解析 ~セキュリティ上の注意点も含めて~ - カミナシ エンジニアブログ 🔖 41
はじめに StatHackカンパニーの渡邉です。 私の普段の取り組みをこちらで紹介しているのでこちらもどうぞ。 note.kaminashi.jp 私たちKaminashiでは、さまざまなプロダクトにNext.jsを採用し始めています。 今回のブログではNext.jsの最も特徴的
Next.jsのコンパイラから知るServer Actionsの完全解析 ~セキュリティ上の注意点も含めて~ 🔖 41
はじめに StatHackカンパニーの渡邉です。 私の普段の取り組みをこちらで紹介しているのでこちらもどうぞ。 note.kaminashi.jp 私たちKaminashiでは、さまざまなプロダクトにNext.jsを採用し始めています。 今回のブログではNext.jsの最も特徴的
Next.jsのコンパイラから知るServer Actionsの完全解析 ~セキュリティ上の注意点も含めて~ 🔖 41
はじめに StatHackカンパニーの渡邉です。 私の普段の取り組みをこちらで紹介しているのでこちらもどうぞ。 note.kaminashi.jp 私たちKaminashiでは、さまざまなプロダクトにNext.jsを採用し始めています。 今回のブログではNext.jsの最も特徴的
Next.js App Router の基礎：フロントエンドエンジニアのための入門ガイド（概念とディレクトリ構造編） 🔖 1
Next.js 13.4で導入されたApp Routerの基本概念とディレクトリ構造を、Pages Routerとの違いを交えながら分かりやすく解説します。
【個人開発】契約中のサブスクリプションを管理できるサービスをリリースしました【Next.js×Neon×Clerk×Netlify】 🔖 11
はじめに以前からの不満を解消し、ポートフォリオを充実させるため、正式にユーザー向けにリリースするアプリを個人開発しました。この記事では、サービスの紹介と開発を通じて得られた知見を共有させていただき…
なるべく楽する個人開発 (Claude,MCP Server,Next.js,Vercel,Obsidian) 🔖 75
はじめに こんにちは、BTMの坂本です！ エンジニアの皆さん、日々の開発業務お疲れさまです。 「もっと効率的に開発を進められないか」「面倒な作業を自動化したい」「とにかくもっと楽したい」 そんな風に感じることは多々あると思います。 今回はプロジェクト作成からデプロイまで、なるべく
なるべく楽する個人開発 (Claude,MCP Server,Next.js,Vercel,Obsidian) 🔖 75
はじめにこんにちは、BTMの坂本です！エンジニアの皆さん、日々の開発業務お疲れさまです。「もっと効率的に開発を進められないか」「面倒な作業を自動化したい」「とにかくもっと楽したい」そんな風に感じることは多々あると思います。今回はプロジェクト作成からデプロイまで、なるべく
なるべく楽する個人開発 (Claude,MCP Server,Next.js,Vercel,Obsidian) 🔖 75
はじめにこんにちは、BTMの坂本です！エンジニアの皆さん、日々の開発業務お疲れさまです。「もっと効率的に開発を進められないか」「面倒な作業を自動化したい」「とにかくもっと楽したい」そんな風に感じることは多々あると思います。今回はプロジェクト作成からデプロイまで、なるべく
GitHub Copilot Agent の力を借りて Next.js から React Router に移行しました 🔖 74
ANDPAD フロントエンドエンジニアの小泉です。 普段は Vue での開発をメインにしているのですが、並行して React のプロジェクトも担当しています。 今回は、「ANDPAD 資料承認」というプロダクトのサービスページを Next.js から React Router に
React Native + Next.jsはいいぞ！（ほぼ）1人でショートドラマのWeb/モバイルアプリを爆速開発した話 🔖 160
こんにちは！テラーノベルでiOS/Android/Webとフロントエンド周りを担当している @kazutoyoです！ 3月に縦型のショートドラマサービス「テラードラマ」を公開しました！ テラードラマは、Web/iOS/Androidのプラットフォームで展開しており、React N
React Native + Next.jsはいいぞ！（ほぼ）1人でショートドラマのWeb/モバイルアプリを爆速開発した話 🔖 160
こんにちは！テラーノベルでiOS/Android/Webとフロントエンド周りを担当している @kazutoyoです！3月に縦型のショートドラマサービス「テラードラマ」を公開しました！https://teller.jp/short-drama/テラードラマは、Web/iOS
Next.js(Pages Router)で叶える"初期SSR＋動的CSR"のアプリストア高速化 🔖 2
SmartHR Plusアプリストアのリニューアル事例を通じて、Next.js Pages Routerを活用した「初期SSR＋動的CSR」構成によるパフォーマンス改善と拡張性の両立、現実的な技術選定のプロセス、実装の工夫を詳しく解説します。Next.js Pages Rout
[Next.js] next/image で画像の遅延読み込み中に、サムネイルをぼかさずに表示する方法 🔖 2
アルダグラムでソフトウェアエンジニアとして活動している松田です。Next.jsでは、next/image (または Next.js 12 以前の next/legacy/image) コンポーネントを使用して効率的に画像を表示できます。このコンポーネントは標準の <im
[Next.js] next/image で画像の遅延読み込み中に、サムネイルをぼかさずに表示する方法 🔖 2
アルダグラムでソフトウェアエンジニアとして活動している松田です。Next.jsでは、next/image (または Next.js 12 以前の next/legacy/image) コンポーネントを使用して効率的に画像を表示できます。このコンポーネントは標準の <im
【図解解説】Cloudflareをマスター！2時間でNext.jsを開発して学ぶチュートリアル【初心者OK】 🔖 48
はじめにこんにちは、Watanabe Jin(@Sicut_study)です。AIが日々進化しており、個人開発を誰もが気軽にできるような世界になってきました。私もかなり焦りながら勉強をしてお…
2025-05-14 技術選定を突き詰める ～ Online Conference 2025 ～
next.jsのみで簡易的な多言語対応をする - Panda Noir 🔖 27
next.jsのドキュメントには多言語対応のページがあります。 nextjs.org これを参考にすると、LPやホームページ程度であれば十分に多言語対応することができます。 next.jsだけでも出来ること 文字列を翻訳する アクセス時のaccept-languageヘッダーを見
【これ1本/初心者OK】MCPを実装理解！Next.jsでAIアシスタントを開発するチュートリアル【図解解説】 🔖 11
はじめにこんにちは、Watanabe Jin(@Sicut_study) です。私はよくQiitaやZennなど技術記事サイトを見ているのですが、最近はランキングがMCPという技術の記事ばかり…
Next.js 14.2.28 -> 15.3.1 のバージョンアップ対応 🔖 1
モチベーションCVE-2025-29927によるNext.jsのMiddlewareでパッチバージョンの脆弱性対応してたのもあり、14 -> 15にあげようとする対応は並行して検討してた脆弱性対応前から npx @next/codemod@canary upgra
Next.jsとRailsで日記アプリを作って学んだこと 🔖 1
はじめに大相撲5月場所、楽しみですねはじめまして、株式会社ウェイブでエンジニアをしているほさざえもんです普段業務で使っているNext.jsとRailsで0からプロダクトを作った経験がなかったので日記アプリを個人開発しました実装したコードはこちら 👉 GitHub開発期
Express.js + Next.jsで実装するMCP Streamable HTTP Transport 🔖 2
Express.js + Next.jsで実装するMCP Streamable HTTP Transport 1. はじめにAIとのコミュニケーションを標準化するModel Context Protocol (MCP)は、クライアントとサーバー間の通信方式として新しいSt
遂に Cloudflare + Next.js(OpenNext) + Prisma 6.7.0(No Rust) が動く時代が来た 🔖 103
現状たぶんこれが一番安いと思います。(※個人開発前提のスタックです) 実現したこと opennext for cloudflare prisma (no-rust, no-engine) prisma-postgres (free plan) つまり Cloudflare 上で
MCP Serverを呼び出すAIエージェントをMastra、Next.js、AWS CDKで実装してみた 🔖 57
こんにちは、つくぼし(tsukuboshi0755)です！ 前回MCP Serverを呼び出すMastraのAIエージェントを、ECS Fargate上のMastraコンテナで動かすシステムを構築しました。 しかし本番環境では、MastraをNext.jsと統合し動かす事で、UI
遂に Cloudflare + Next.js(OpenNext) + Prisma 6.7.0(No Rust) が動く時代が来た 🔖 103
現状たぶんこれが一番安いと思います。(※個人開発前提のスタックです) 実現したことopennext for cloudflareprisma (no-rust, no-engine)prisma-postgres (free plan)つまり Cloudflare
MCP Serverを呼び出すAIエージェントをMastra、Next.js、AWS CDKで実装してみた 🔖 57
こんにちは、つくぼし(tsukuboshi0755)です！前回MCP Serverを呼び出すMastraのAIエージェントを、ECS Fargate上のMastraコンテナで動かすシステムを構築しました。https://zenn.dev/tsukuboshi/articles
CoR パターンで実装する Next.js の middleware 🔖 1
GoF が提唱したデザインパターンのうち、 Chain of Responsibility パターン(以下、CoR パターン) というものがあります。責任の連鎖とも訳されますね。CoR パターンはその名の通り、チェーンに見立てて処理を複数の関数へ順々に回していく仕組みです。自
【Next.js + Orval + MSW】型安全 API クライアント & モック環境構築 🔖 3
こんにちは。チームラボのフロントエンド班の志田です。好きなものはモアイです🗿今回初めて技術記事を書いてみました。Next.js、Orval、MSW に関して気になっている方、ちょっと長いですが、ぜひ最後までお付き合いください！ はじめにフロントエンド開発において、RES
【Next.js + Orval + MSW】型安全 API クライアント & モック環境構築 🔖 3
こんにちは。チームラボのフロントエンド班の志田です。好きなものはモアイです🗿今回初めて技術記事を書いてみました。Next.js、Orval、MSW に関して気になっている方、ちょっと長いですが、ぜひ最後までお付き合いください！ はじめにフロントエンド開発において、RES