いまNext.jsで新規サービスを立ち上げるときの観点（Router・CSS・認証・監視など/2023年末）
免責事項 社内向けに展開するように雑にまとめました Next.jsの知見が深くない人がリードしてPoCを立ち上げなきゃいけなくなったが、社内的にはNext.jsを推奨しているみたいな場面を想定しています なので自信ないところも多いですが割と断言するように心がけて書いています PoCの立ち上げ想定なので、jest/Storybookなど内部品質面についてあまり深く書くことを避けています ほぼ自分の知識だけで書いており私見も多いですし、そもそも自分自身がトップクラスの知識や視座を有しているわけでもないので、まずは以下の話を理解はした上で、踏襲するかどうかは別途他記事やGitHub、公式ドキュメントなどを漁って判断することを推奨 App RouterかPages Routerか 2023年末現在まだApp Routerは技術記事が足りてきている印象ではないため、社内でノウハウを積極的に貯めていく
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こんにちは、とまだです。 最近、Claude Codeで本格的に個人開発アプリを3つほど作ってきました。 ただ、毎回同じような設計で悩んだり、ライブラリの使い方でしばらくハマったり、AIエージェントに同じ説明を繰り返したりしていました。 そこで新しいプロジェクトでは、開発着手前に設計ドキュメントを徹底的に準備するという実験をしてみました。 結果、なんと 24個ものドキュメント ができあがったので、今回はその全貌と、なぜこれらが必要だったのかをお伝えします！ 【追記】 おかげさまで大反響で、たくさんの方に読んでいただいたようで嬉しいです！
Intro 従来の History API を改善する Navigation API の仕様策定と実装が進んでいる。 これは、History API の使いにくかった部分を補うだけではなく、「JS で画面遷移をする」という現状のミッシングピースに取り組み、SPA が抱える多くの問題だけでなく MPA すら改善する可能性がある。 この API の目的と仕様を解説しつつ、実装のメモを残す。 画面遷移と SPA の軌跡 Web は HTML の取得と描画を繰り返す、画面遷移(Navigation)を前提としたアーキテクチャ(のちに SPA からの逆算で MPA と呼ばれる)が基本であり、ブラウザなどの実装もそれに最適化されている。 一方「アプリケーション」の設計手法をそのまま Web に持ち込んだ SPA は、この Navigation によってもたらされる UX の低下を防ぐ部分がある一方、既
人間は意図、AIは実装：Codexが導く「要件を伝えるだけ」のAI駆動開発ワークフロー | CyberAgent Developers Blog
はじめに 特に、OpenAIのCodexに代表される「大規模なコードコンテキストを理解するAIモデル」のポテンシャルを最大限に引き出すため、各フェーズで使用するプロンプト、AIの予想出力、そしてコンテキスト管理の方法を具体的に紹介します。 この記事で学べること Codex等のコード生成モデルを「単なる補完」ではなく「開発パートナー」にするプロンプト術 AI駆動開発の各フェーズにおける具体的なプロンプトの書き方 UIワイヤーフレームをAIに生成させる方法 コードベースだけでなくJSONを用いたプロジェクト進捗・コンテキスト管理 小規模Webアプリ開発に最適化されたワークフロー 目次 プロジェクト概要 Phase 0: プロジェクト構想 Phase 1: プロジェクト初期化 Phase 2: 要件定義・ドメインモデリング Phase 3: アーキテクチャ設計・技術スタック選定 Phase 4:
📝 require(moduleName) は同期処理なのに対して、import(moduleName)は非同期処理となります。 📝 tsconfig.jsonでesModuleInteropがtrueでないとdeafult importの意味合いは異なります。 この表はCommonJS ModulesとECMAScript Modulesで機能的に1対1で応するという意味ではありませんが、 大まかにはこの対応表にそってECMAScript Modulesの構文へと変換ができます。 エディターを使い手動で変換したり、次のようなツールを使ってある程度機械的な変換も可能です。 cjstoesm commonjs-to-es-module-codemod このモジュールの変換で重要なことは、できるだけCommonJS ModulesとECMAScript Modulesを混ぜないことです。
sumirenです。 2023年5月5日、ついにNext.js App Routerがstableになりましたね！ おめでとうございます！！ありがとうございます！！！ 今から本番で使うのが楽しみで待ちきれません。 13.4のリリースではstableの宣言とともに、目玉機能としてServer Actionsが来ています。Data Fetch（というか、もはやData Handling的なもの）の機能の一部として、とても興味深いです。 さて、Server Actions自体の解説は他の方に任せるとして、リリースノートには以下のような一文があります。 Server Actions in Next.js have been designed for deep integration with the rest of the data lifecycle, including the Next.js
GitHub - modelcontextprotocol/servers: Model Context Protocol Servers
Official integrations are maintained by companies building production ready MCP servers for their platforms. 21st.dev Magic - Create crafted UI components inspired by the best 21st.dev design engineers. 2slides - An MCP server that provides tools to convert content into slides/PPT/presentation or generate slides/PPT/presentation with user intention. ActionKit by Paragon - Connect to 130+ SaaS inte
かなり昔に Elasticsearch ベースの検索システム（Heineken）を作っていた。 Elasticsearch で部内 Wiki 検索高速化 - Speaker Deck 特に更新せず数年動かしていたのだけど、サーバーの置き換えに伴って Kubernetes に置きたいよねという話になり、ついでに Elasticsearch も新しくしたいよね、となった結果、現状のフロントエンドだと最新の Elasticsearch では動かないということがわかった。 nonylene.hatenablog.jp フロントエンドの改修が必要なわけだが、ここでフロントエンドの構成を見ると… FlowType create-react-app PureComponent Bootstrap 3 古すぎる！絶対アップデート難しいし触りたくない技術しかない。 フロントまわりの構成を変えたいとずっと思っ
Couple of weeks ago when I was publishing The Hidden Cost of URL Design I needed to add SQL syntax highlighting. I headed to PrismJS website trying to remember if it should be added as a plugin or what. I was overwhelmed with the amount of options in the download page so I headed back to my code. I checked the file for PrismJS and at the top of the file, I found a comment containing a URL: /* http
この記事は、NFLaboratories Advent Calendar 2024 6日目の記事*1です。 研究開発部 研究開発担当のda13daです。 今回の記事では、パスワードレスな認証を可能とするパスキーを提供する「Hanko」というサービスをご紹介します。 はじめに パスキーとは Hankoの提供形態 OSSプロダクト Hanko Cloud 利用方法 projectタイプについて Hanko Passkey Infrastructure 実装について ログイン ユーザー情報の取得 パスキーAPIについて 主なAPIエンドポイント 終わりに はじめに 従来のID/パスワード認証は、多くのサービスで採用されてきましたが、フィッシングやパスワード漏洩など、セキュリティ上の課題が指摘されています。このような背景から、セキュリティを強化しつつ、ユーザー体験を向上させるパスワードレス認証が注
Next.js 13 vs Remix: An In-depth case study — Prateek Surana
When it comes to building web applications, React has been at the forefront for a while now, and its adoption continues to grow. Among the most common approaches to building web applications with React, Next.js stands out as one of the most preferred options. Next.js has also been in the limelight since last year when they released their biggest update to the framework ever with the app router. Th
Cloudflare Workers + Hono ワークショップ - ServerlessDays Tokyo 2023
Cloudflare Workers + Hono ワークショップ 資料はこちら => workshops.yusuke.run #serverlessdays Yusuke Wada 2023-09-24 ServerlessDays Tokyo 2023 workshops.yusuke.run アジェンダ ワークショップについて Workers イントロダクション Hono イントロダクション 基本編 プロキシ編 Web API編 フルスタック編 AI編 Honoをより深く知る その他 1. ワークショップについて 1.1 対象 対象者 Cloudflareでのアプリケーション作成に興味のある方 Honoを使ってみたい方 フロント、バックエンド問いません 前提条件 Wranglerが動く環境をつくっておく npx wrangler が動く JavaScriptに対する知識があるとよい
Next.js vs. Remix - A Developer's Dilemma Feb 21, 2024 I am a Javascript and React enthusiast, and I absolutely love writing technical blogs. There's just something about the process of breaking down complex concepts and sharing my knowledge with others that really excites me. In my free time, I enjoy exploring my other passions, such as painting, gardening, cooking, and managing my food blog. The
2021年のVueは結構動きが大きかったので、スナップショット代わりにちょっと振り返りのまとめを書こうと思います。 後半は2022年はVueとどうやって付き合うのが良さそうか、超個人的な見解を書きます。 ここ何年かのVueを使った個人開発をおさらい まずはここ何年かの個人制作からVueを使ってそうなものをリストアップして変遷を見てみます。ここ3年くらいのリポジトリから拾って並べたら、何となくVue3導入の歴史っぽくなりました。 なんか思ったほど作ってないけどそれは仕方ない。 2019.2 初代メザシアタック（ゲーム） リポジトリ： https://github.com/yuneco/mezashi 解説： VueとSVGを使ってシューティングゲーム『ネコ🐱メザシ🐟アタック🌟』を作ったのでソースと解説 開発環境: Vue CLI 言語: JS Vueのバージョン vue: 2.5.22
こんにちは！吉波です！ 最近、AIエージェントフレームワーク「Mastra」が彗星の如く現れました。衝撃的だったのが、こちらの画像↓ 「LangChainのGithubスター数を抜き去った…！？」 これを見た時、衝撃が走りました。LLMを用いたアプリケーション開発を効率的に行うためのライブラリとして、長らく君臨してきたLangChainが抜かされたという事実は、全世界が驚いたはずです。 そこで今回は、これからMastraを触ってみたいと思う方に向けて、Mastra公式が出しているサンプル集を紹介します！AIエージェントの作り方を学びたいなと思っている方はぜひ最後までご覧ください！ また、今日から「吉波塾」というAI駆動開発やAIエージェントに関する講義を開始したので、そちらも良ければご参加ください！☺️ 次回の開催はX（@yoshi8__）より共有します！ Mastraのサンプル集今回の記
Vite 7.0 is out! June 24, 2025 We're happy to share the release of Vite 7! It has been 5 years since Evan You sent the first commit to the Vite repo, and nobody could have predicted how much the frontend ecosystem would change since then. Most modern frontend frameworks and tools are now working together, building on top of Vite's shared infrastructure. And they can innovate at a faster pace by
Turborepo is a high-performance build system for JavaScript and TypeScript codebases. We're reimagining build systems, taking inspiration from tools like Buck and Bazel, to make them accessible for everyone. At the heart of Turborepo is a very simple idea: never do the same work twice. We accomplish this through incremental builds, parallel execution, and Remote Caching. As usage has grown and pro
Previous slideNext slideToggle fullscreenOpen presenter view Build and Publish 2023 @mizchi | Plaid, Inc. jsconf.jp 2023 今日もツールチェインに消耗してますか？ https://2022.stateofjs.com/en-US/libraries 今日のテーマ 今日話すこと 現代のビルドツールチェインの進化と目的 エコシステムに振り回されないようになろう！ 今日話さないこと 個別のツール/ライブラリの使い方 フロントエンドの話？ NO. 最近のサーバーサイドJSとバンドラは一体化している サイズ制限のある CDN Edge Worker も最適化が必要 About Me JSのビルドとは何か Transpile AltJS(TS,JSX)や CSS Modules の変換
Claude Code Workflow Studio完全ガイド｜ビジュアルでAIワークフローを構築する新時代｜アイドリ | AI-Driven Lab
本記事の対象者主な対象者: Claude Codeを使っているがワークフロー機能を活用しきれていない方、AIエージェントによる自動化に興味がある開発者・ビジネスパーソンを想定しています。 技術レベル: 初級〜中級を想定しています。 前提知識: Claude Codeの基本的な使い方（ターミナルでの対話）とVS Codeの操作を理解していることを前提としますが、ワークフロー機能の知識は不要です。 この記事で得られるもの: Claude Code Workflow Studioのインストールから実践的なワークフロー構築まで一通り習得でき、複雑なAIエージェント連携を自力で設計できるようになります。 要約本記事の主要トピック: 本記事はClaude Code Workflow Studioの概要と解決する課題、具体的なインストール・操作方法、実践的なユースケースの三点を中心に解説します。 記事の
Vite 6.0 is out! November 26, 2024 Today, we're taking another big step in Vite's story. The Vite team, contributors, and ecosystem partners are excited to announce the release of Vite 6. It has been an eventful year. Vite adoption keeps growing, with npm downloads per week jumping from 7.5 million to 17 million since the release of Vite 5 a year ago. Vitest is not only being favored more by user
Storybook 7.0
Storybook is the gold standard UI workshop environment. It’s used across the industry by teams at Monday.com, The Guardian, Intuit, and many others due to its unparalleled framework compatibility and rich features for development, documentation, and testing. Today, I’m excited to announce Storybook 7 (SB7), our first major release in over two years and by far our largest ever. It includes: ⚡ First
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
Core Changes fix(types): allow nonpromise return types for static functions: #24685 Ensure history navigates correctly with dynamic routes + basePath: #25459 Fix external check for non-local next import: #25518 Ensure providing only query on dynamic route works as expected: #25469 Assume a recent react@experimental if reactRoot is set: #25496 Update to latest webpack 5 and webpack-sources: #25558
Date: June 23, 2023 | Estimated Reading Time: 31 min | Author: Lilian Weng Building agents with LLM (large language model) as its core controller is a cool concept. Several proof-of-concepts demos, such as AutoGPT, GPT-Engineer and BabyAGI, serve as inspiring examples. The potentiality of LLM extends beyond generating well-written copies, stories, essays and programs; it can be framed as a powerfu
本文書ではブラウザを利用したテスト自動化ツールを利用した経験がない人、これから Playwright を使ってみたいという人を対象に Playwright の基本的な操作方法について説明を行っています。Vue と React のプロジェクトでの Playwright の利用方法についても後半に説明しています。 Playwrightとは Playwright は WEB アプリケーションのテストを自動化するオープンソースのテストツールです。Playwright ではユーザが実際にブラウザを利用して WEB アプリケーションの操作を行う代わりにプログラムを通してブウラザ(Chromium、Firefox、WebKit)を動かすことで WEB アプリケーションのテストを行います。ツールを利用しない場合は機能を追加/更新する度に開発者がブラウザでページを開き動作確認を行う必要があります。Playw
Next.js に GoogleAnalytics と GoogleTagManager を導入し計測する - ┗┐＜(՞ਊ՞)＞┌┛
Next.js でアプリケーションを作った際に、アクセス解析などやりたく GoogleAnalytics を導入しました。GoogleAnalytics をそのまま使うのではなく GoogleTagManager を経由すると何かと便利なので、Next.js → GoogleTagManager → GoogleAnalytics という流れで計測を行えるようにしました。 現状、インターネットにはエンジニア目線で GoogleAnalytics や GoogleTagManager について書かれた記事が少なく、これを書くことで何かの助けになると感じましたので、ここに記録しておきます。 ところで GoogleTagManager は長いので以下 GTM とします。また GoogleAnalytics も長いので以下 GA とします。 GoogleTagManager を設定する アカウント
Random musings on React, Redux, and more, by Redux maintainer Mark "acemarke" Erikson Detailed thoughts on how React has been developed over time, and explanations for common community confusion and concerns Introduction 🔗︎ Today, the state of React and its ecosystem is complicated and fractured, with a mixture of successes, skepticism, and contention. On the positive side: React is the most wide
noteのフロントエンドリアーキテクチャとは以前「フロントエンドapp分割」として紹介していたプロジェクトの延長にあるものです。 そもそもフロントエンドリアーキテクチャとはなにかnoteは現在APIをRuby on Railsで、Webフロントエンドは主にNuxtで実装されています。Nuxtフレームワークの設計上VueとVuexを多用していくわけですが、多くの機能が密結合しWeb Vitalsの悪化や、生産性の低下、スケールしにくい状態、障害を引き起こす原因になるなどの影響が発生しています。 そこで機能毎に適切な粒度でアプリケーションを分割しつつ上記の問題を解決してくプロジェクトが始まりました。それがフロントエンドリアーキテクチャです。 ちなみに分割するアプリケーションで使うフレームワークはNextを採用しています。これはNuxt v3への移行が困難を極めるため、新たな設計のもとでReac
Local-first software: You own your data, in spite of the cloud
Cloud apps like Google Docs and Trello are popular because they enable real-time collaboration with colleagues, and they make it easy for us to access our work from all of our devices. However, by centralizing data storage on servers, cloud apps also take away ownership and agency from users. If a service shuts down, the software stops functioning, and data created with that software is lost. In t
フロントエンド、バックエンド、データベースが1つのCloudflare Workerに2025-04-08 2024年9月、当社は静的アセットをホスト、保存、配信するためのベータサポートをCloudflare Workersで無料で利用できるようにしました。以前はCloudflare Pagesでのみ利用可能だったものです。静的アセット（クライアントサイドのJavaScript、HTML、CSS、フォント、画像）をホストする能力は、それまでのWorkersに欠けていて、単一Worker内でフルスタックアプリケーションを構築したい開発者が待ち望んでいた重要なサービスです。 本日、Cloudflareでのアプリ構築における10の大きな改善点を発表します。これらの新しい追加機能により、シンプルな静的サイトからフルスタックアプリケーションまで、すべてをCloudflare Workers上で構築し
最新版のLaravel11でも利用することができ、Next.jsの最新版のバージョン14のapp Routerにも対応しています。 公開当時はLaravel9で動作確認を行いましたが最新版のLaravel11で動作確認を行い文書のリライトを行っています。 バックエンドの設定(Laravel) LaravelはAPIを提供するバックエンドサーバとして設定します。 Laravelプロジェクトの作成 Laravelをインストールを行う前にNext.jsをインストールするフロントエンド用のディレクトリとバックエンド用のLaravelのディレクトリをわけるために任意の場所にlaravel-nexjsディレクトリを作成します。 laravel-nextjsディレクトリを作成後にlaravel-nextjsディレクトリに移動してcomposerコマンドを利用してLaravelプロジェクトの作成を行います
Turbopack Dev is Now Stable
Back to BlogMonday, October 21st 2024 Turbopack Dev is Now StablePosted by It's been a long road, but we are happy to announce that next dev --turbo is now stable and ready to speed up your development experience. We've been using it to iterate on vercel.com, nextjs.org, v0, and all of our other applications with great results. Since its release 8 years ago, Next.js has been used to build everythi
Vite 8 Beta: The Rolldown-powered Vite December 3, 2025 TL;DR: The first beta of Vite 8, powered by Rolldown, is now available. Vite 8 ships significantly faster production builds and unlocks future improvement possibilities. You can try the new release by upgrading vite to version 8.0.0-beta.0 and reading the migration guide. We're excited to release the first beta of Vite 8. This release unifi
この記事は はてなエンジニア Advent Calendar 2021 の 5 日目の記事です。 4 日目は id:anatofuz さんの 「入社してから書いていた分報の行数を眺めてみる」 でした。日報に書き込んだ行数を可視化するというアイデアが面白い！ 僕も日報書いているので今度可視化してみようと思います。 anatofuz.hatenablog.com 本題 さて今回はタイトルにもある通り、Babel の話をします。Babel というのは JavaScript のトランスパイラです。 JavaScript のソースコードを入力として受け取り、適切な変換を施し、JavaScript のソースコードを出力する (トランスパイルする) ツールです。主に新しい構文で書かれた JavaScript を、古いブラウザなどでも動くよう、古い構文で書かれた JavaScript に変換するために使わ
As I've been using Next.js professionally on my employer's web app, I find the core design of their App Router and React Server Components (RSC) to be extremely frustrating. And it's not small bugs or that the API is confusing, but large disagreements about the fundamental design decisions that Vercel and the React team made when building it. The more webdev events I go to, the more I see people w
@neshca/cache-handler を利用した Custom Next.js Cache Handler の実装
はじめに こんにちは、READYFOR のテックリード兼フロントエンドエンジニアの菅原（@kotarella1110）です！ 最近、Next.js App Router アプリケーションの実運用化に向けた PoC を実施しました。 この中で構築したアプリケーションはセルフホスト環境にデプロイするようにしており、Custom Next.js Cache Handler を使って Redis にキャッシュを保存するようにしました。Custom Next.js Cache Handler の実装には @neshca/cache-handler というライブラリを利用しています。実際にこれらを使用してみると、Next.js 標準のキャッシュ挙動との違いや、考慮すべき課題がいくつか明らかになりました。 そこで本記事では、これらの課題を踏まえつつ、Custom Next.js Cache Handle
Advanced React in the Wild
Advanced React in the WildProduction Case Studies from Ambitious Web Projects (2022–2025) Introduction React and Next.js have powered some of the web’s most ambitious projects in the last few years. In this period, teams have pushed the envelope on performance (achieving dramatic gains in Core Web Vitals like LCP and the new INP metric), balanced server-side and client-side rendering trade-offs, d
Theme 第 167 回のテーマは 2024 年の Yearly Ecosystem です。 Show Note 2024 年のチェックポイント Vite の覇権を Turbopack, RSPack が奪えるか? Storybook は覇権をとって、Chromatic もすごくなりそう Next App Router が本当に広がるか RSC 対応の Bundler が増えて Next 以外の解が見れそう アプリケーションの Rust 化くるか? React Forget Figma Config 2024 の Adobe の影響 State Management どうなってく? (Context, Jotai, SWR, Signal) ESLint to flat config or Biome AI driven FE Development CSS の新しい方法論 今年のキーワ
An AI-native software engineer is one who deeply integrates AI into their daily workflow, treating it as a partner to amplify their abilities. This requires a fundamental mindset shift. Instead of thinking “AI might replace me” an AI-native engineer asks for every task: “Could AI help me do this faster, better, or differently?”. The mindset is optimistic and proactive - you see AI as a multiplier
Prioritizing performance when building our web apps improves the user experience and helps ensure they can be used by as many people as possible. In this article, Michelle Barker will walk you through some of the front-end optimization tips to keep our Vue apps as efficient as possible. Single Page Applications (SPAs) can provide a rich, interactive user experience when dealing with real-time, dyn
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Claude Code】マネできる！個人開発するときに最初に用意したドキュメント24種と機能要件書を全公開 - Qiita
Navigation API による「JS での画面遷移」と SPA の改善 | blog.jxck.io
インクリメンタルに新しい技術を取り入れる方法。TypeScriptへの移行を例にしたプロセス
Next.js Cacheのアツさをシェアしたい(App Router)
検索システムのフロントを SSR・Remix で作り直した - Unyablog.
Your URL Is Your State
Hankoによるパスキーを利用してみた - NFLabs. エンジニアブログ
Next.js vs. Remix - A Developer's Dilemma
ここ3年くらいの個人制作を振り返って2022年のVueを考える（超私見）
Mastraのサンプル集を一気に紹介する｜yoshi8
Vite 7.0 is out!
Why Turborepo is migrating from Go to Rust - Vercel
Build and Publish 2023
Vite 6.0 is out!
Release v11.0.0 · vercel/next.js
LLM Powered Autonomous Agents
入門者でも安心、Playwrightで驚くほど簡単にブラウザテストを行う | アールエフェクト
The State of React and the Community in 2025
noteのフロントエンドリアーキテクチャの進捗を報告します｜zochang
フロントエンド、バックエンド、データベースが1つのCloudflare Workerに
LaravelとNext.jsを一緒に利用できるって知ってました？ | アールエフェクト
Vite 8 Beta: The Rolldown-powered Vite
Babel をリファクタリングツールとして使う - mizdra's blog
One Year with Next.js App Router — Why We're Moving On
ep167 Yearly Ecosystem 2024 | mozaic.fm
The AI-Native Software Engineer
Optimizing A Vue App — Smashing Magazine