【感想】Next.js は手に余るから初心者に推奨できない

前提

※ ポエム記事なので、全て私個人の主観です🙏
※ あと、すんません。ふざけて色々詰め込んだら結構長くなりました。ホンマすんません。。

結論と主旨

先に書いときます。

• Next.js は非常に便利。とても良い技術で、慣れると最高
• Next.js はそんなに好きじゃないですが、今後も使います（市場が大きい内は）
• でも、初心者にはやっぱり「オススメ」ではない（＝初心者向けではない）
• Next.js 以外にも色んな技術使ってて、常に別の技術採用時にも対応できるようにはしていますし、今後もそうします

え、嫌いなの？

別に、嫌悪するほど嫌いじゃないです。ただ、「うわぁ、面倒くさい！」って感じてしまうシーンが多かったとは思います。結果、今のところは嫌気がさしてます。

でも、便利だし優れた技術だとは思います。
激しい変化が落ち着いたら前向きに使うし、今後も利活用する記事とかは書くつもり。今回の主旨は、「初心者向けじゃないよ」という意見です。

じゃあ何で使ってるの？

• 使う理由は市場の要求が多いからです。仕事である以上、技術者としてニーズに応えられる能力は持ち合わせていなければいけないと思っています。
• 使わなくて済むなら使わないです。だって面倒臭いんだもん（２回目）
• 初心者向けではないだけで、面白さはあります。変更が安定してくれれば、楽しいは楽しいので喜んで使う
• ただ、バージョンアップが激しすぎて追っかけるのがダルい。フロントエンド技術は戦国時代なので、安定なんてしないのでしょう

前知識

今日の「Next.js 大人気！」がやってくるまで、私が印象に残っているフロントエンド開発の歴史的背景を共有します（所々間違ってるかもなので後で修正します）。
※ あと、流れや歴史は追えますが、とても長いのでスキップしてもOK！🫠

SPA 時代に突入

唐突ですが、アイドル風に説明します。

• SPA 御三家が華々しくデビュー
  • Angular（2010）※ フレームワーク
    • プロデューサー: Google もと やすし
  • React（2013） ※ ライブラリ
    • プロデューサー: Facebook んく（現: Meta）
  • Vue（2014）※フレームワーク、Angular と React のいいとこどり
    • プロデューサー: 元 Google の天才エンジニア Evan You 氏
• Angular vs React vs Vue 戦争
  • Angular が敗退
  • AngularJS が微妙すぎた上に、v2 で破壊的な仕様変更
  • こ、こんなの使えるかぁー！（ちゃぶ台返し）
  • 大量の人気が React と Vue に集中する
• React Native が登場し、モバイル領域でもマルチに活躍する人気タレントに
• React はライブラリであるために限界があり、色んなツールを組み合わせてベストプラクティスが模索され始める
  • Flux アーキテクチャの概念を拡張した Redux が登場。React の公式に認められ正式メンバーとして加入
  • 単なる UI ライブラリから、エコシステムへと進化を始める

Next.js が登場（Nuxt も）

• Next.js 「私が来た！」（Nuxt『私も来た！』）
  • React でできることが限定的だったので Next.js が登場
  • （当時の）React は クライアントサイドレンダリング（CSR）特化なので、SSR に対応するため
  • 次第に人気が高まり、世界的アイドルフレームワークに

React Server Components (RSC) の衝撃デビュー

2020年末の衝撃デビュー「私（React Server Components）が、来た！」。UI を作るためのクライアント側のライブラリに過ぎなかった React さん、「React、（サーバーで）動きます。」 と突然の宣言。
クライアント前提の一部の関数はそのままでは使えなくなって、無事、混乱をもたらす。

• 「Zero‑Bundle‑Size」アイドル降臨
  • 2020年12月21日、React チームが突然「Introducing Zero‑Bundle‑Size React Server Components」を発表し、開発者コミュニティに衝撃を与える🎤 。この発表では、サーバ側でレンダリングしてクライアントに必要最小限のコードだけを渡すという、"魔法の箱" のような新機能がお披露目される
• まだ研究段階のお試しユニット
  • 当初は「experimental（実験的）」としてリリースされ、安定したプロダクション利用はお預け。しかし、コンポーネントがサーバー上で動くことでバンドルサイズをゼロに近づけるアイデアは、大衆（＝多くの開発者）の心をつかんだ
  • よくわからない開発者は、「え、何言ってるの？」と普通に困惑した
• RFC で仕様を公開
  • 公式 RFC（#188）では「Server Components allow developers to build apps that span the server and client」と明記され、API設計やパフォーマンス面のメリットが詳細に議論された
• ファンクラブ（＝ 開発コミュニティ）でも大盛り上がり
  • React Conf や GitHub の議論では、Dan Abramov 氏らがデモを交えて「ユニークすぎるけど未来感！✨」と歓声を浴びる一方、「え、これどう使うの…？」という戸惑いの声も​（特に SNS "Reddit" など）
• Josh Comeau 流・わかりやすい解説も登場
  • Josh W. Comeau さんの解説記事などが注目を浴びる
  • リアルタイムな解説記事では「初めてサーバーだけで動くコンポーネントを見たときは、まるで幽霊アイドルがステージに立ったような衝撃だった」と表現され、注目度の高さを物語った
• 無事、React 18 でちゃんと導入される
  • useState とかクライアント前提で動くやつを使ってたファン達の中で、RSC の内容をよくわからないままにしてた人たちは、RSC をメインにすると動かなくなるので阿鼻叫喚する

Next.js による RSC サポート開始

• 2021年末頃、Next.js 12 が RSC を正式ベータサポート
  • 2021年後半リリースの Next.js 12 にて、React Server Components がベータ対応。Rustベースの高速コンパイラとともに、サーバーコンポーネントが公式にNext.jsフレームワークへ加入しました​
    Next.js by Vercel - The React Framework
• 公式ドキュメントで魔法の使い方を公開
  • Next.jsの公式Docsでは「サーバーコンポーネントはapp/ディレクトリ以下で使える」「StreamingレンダリングやISRにも対応」といった具体的な利用パターンが説明され、実践ガイドが整備され

"デフォルト衣装" へ昇格（Next.js 13＋App Router）

• Next.js 13 での完全統合
  • 2022年末〜2023年の Next.js 13 では、App Router が正式化され、Pages Router からフォーメーション変更。そして、React Server Components がデフォルトのレンダリング戦略に昇格。これにより、サーバーコンポーネントの利用がデフォ扱いされる雰囲気に。一部の古参メンバー、しっかり困惑する
• Vercel ブログで振り返る RSC の歴史
  • Vercel 公式ブログでも「Understanding React Server Components」と題した記事が公開され、サーバーとクライアントをまたぐUI設計の新時代として紹介される

Remix vs Next 戦争が話題に

Remix の共同創業者の一人である開発者 Kent C. Dodds 氏が、「Why I Won't Use Next.js（私が Next.js を使わない理由）」という記事を出して、界隈で話題に。

Next.js を、"Too much magic"（過ぎた魔法）、"Next.js is eating React"（Next は React を侵食してる） と指摘する。

その後、アンサー（反論）記事として、
Vercel の VP of Developer Experience（当時。現在は VP of Product） である Lee Robinson 氏が、「Why I'm Using Next.js（私が Next.js を使う理由）」を発表して、また話題に。

※ ちなみに、お二人は仲の良いご友人のようです🖐️

Next.js 裏抗争❶：「ビルドツール戦争」〜センター交代劇〜

ここまでの "公式ステージ" の陰で、実はビルドツール界という裏社会にも激しいセンター争いが繰り広げられていました。React 陣営、Next.js 陣営、そして新興勢力が入り乱れるカオスを、ぜひお楽しみください。

• Create React App（CRA）の短い黄金期
  • React 公式チームが 2016年7月22日に「Create Apps with No Configuration」として CRA を発表。コマンド一発で Webpack や Babel の設定が不要となり、モダンな React SPA 環境構築のデファクトスタンダードとして君臨
  • 「Zero Config」思想の先駆けとして、初心者から上級者まで幅広く受け入れられたことで、その後のビルドツール革新の礎を築いています
• Vite の華麗なるデビュー。CRA はお役御免に
  • 急速に人気を獲得した、Vite。フランス語で「速い」を意味し、開発サーバーとビルドの両面で抜群の高速性を誇る。これが React/Next.js 以外の技術でも圧倒的人気となり、これをビルドツールのデフォ採用とする業界の空気が強まる
  • React が Vite を公式採用して突然のセンター。React を語る上で外せない存在となり、"時の人" となっていた CRA も、ついにセンターから外され公式説明にも載らなくなり、短い黄金時代が終わる​（これを知らない開発者は未だに CRA を使い続ける）
• Next.js から激推し「Turbopack」登場
  • Next.js が独自ステージを築くなかで、"Turbopack" が大々的に「開発モードの初回コンパイルが最大45.8％高速！」というキャッチコピーで彗星の如く現れる​
  • Next.js 公式ドキュメントでも、「--turbopack フラグを付けるだけで、ローカル開発のバンドル体験が激変する」と明言し、Pages Router/App Router 問わずビルド時に推奨される​
  • 実際に Next.js 15.3 リリースでは、デフォルトで Turbopack をビルドに組み込むアップデートが行われ、"Next.js 公認センター" の座を確固たるものに
  • 「React の推奨は Vite だが、Next.js を使うなら Turbopack」 という歪な構造が生まれる
• 新星「Rspack」、突如乱入のダークホース
  • 実は、「プログラミング言語」界隈という大きなスケールで、人気を博し始めたスターが生まれる。そう、"Rust" だ。こいつの強みの１つである圧倒的「速さ」によって、色々な既存のツール等が「Rust で作り直す」という状況に世界は動いていた…🌏
  • Rust人気の波は Next のツール戦争にも到来。next‑rspack プラグインが突如登場。そして、まさかの Next.js 運営サイドもこの加入を承認してしまう。コミュニティでも「Next.js でも Rspack が使える！」と 宣言され、実験的ながらも高速かつ Webpack 互換の選択肢となった​
  • Rust 製 Rspack 自身がメモリ効率・ビルド速度とも注目度急上昇中。今や Turbopack と Vite の狭間で、「実は Rspack もアリ」 の声がチラホラ聞こえ始める
• 無事、コミュニティがちゃんと困惑する​
  • React ドキュメント「まず Vite を使おう」（React 単体で使うなら…的な意味合い。たぶん）
  • Next.js を選ぶと「デフォルトは Turbopack」
  • しかし、Rspack が "公式プラグイン" として採用
  • 流れを終えていない開発者は当然混乱し、「Next では誰推し？」 という疑問も界隈に噴出。SNS や技術ブログでも "Vite vs Turbopack" ベンチマーク論争などが再燃

Next.js 裏抗争❷：「ヘッドレス UI 戦争」〜Tailwind の意外な敗北〜

• Tailwind CSS、スタイリングで不動の地位を築く
  • スタイル技術として、Next.js に限らずあらゆるフレームワーク等でよく利用されるようになったスタイル用の技術 "Tailwind CSS"
  • 実は、Tailwind CSS を作った Tailwind Labs は、完全にアンスタイルかつフルアクセシブルな UI コンポーネントセット "Headless UI" も開発していた
  • ヘッドレス UI は「スタイルが無いコンポーネントの動きのみを提供する」が、Headless UI（ヘッドレス UI）＋ Tailwind CSS（スタイル）のセット看板でフロントエンド界隈を席巻しようとしていた
• Headless UI、圧倒的な支持率
  • 実際、Tailwind CSS の注目も追い風になって、Headless UI は注目を浴びた
  • npm の @headlessui/react は週あたり約 249 万ダウンロードを誇るほどの、Tailwind エコシステムでの圧倒的な採用率を示した​
  • GitHub でもスター街道まっしぐら。GitHub 上では 27.2 k スター、1.1 k フォークを獲得し、活発なコミュニティ開発が続いている
• Radix UI の台頭
  • "Radix Primitives" は WorkOS が維持する、アクセスビリティとカスタマイズ性に優れた低レベル UI コンポーネントライブラリ
  • GitHub 上で 16.9 k スターを獲得し、注目度が急上昇
  • npm では週あたり約 13.4 万 ダウンロードを記録し、Headless UI 程ではないものの着実にシェアを拡大
• Radix が実質の勝利を収める
  • 変化が激しい Next.js において、UI コンポーネント開発で圧倒的な人気を博すものが生まれる、それが 「shadcn/ui」。この土台が Headless UI＋Tailwind CSS ではなく、Radix UI＋Tailwind CSS という組み合わせを採用する
  • そして、Next.js の生みの親 Vercel が AI で画面を作れる 「v0」 を発表。v0 に「shadcn/ui」が採用される。結果的に、AI 流行と共に爆発的に普及した
  • それ以外でも、後に Vercel のデフォ技術となる Tremor を始め、多くのエコシステムツールも Radix を土台に採用しはじめる
  • 今でも Headless UI は人気がある評価数値であると言えるが、Next.js 周辺におけるヘッドレス UI の実質の主役は Radix になっていると言っていい

その頃 Vue は？

• Vue 3がリリース（2020/9）
  • Vue 2からの大規模な仕様変更。Composition API の正式導入など
• Nuxt 3 プレビューリリース（2021）
• Vue 3 に SFC のセットアップスクリプト構文が導入（2021）
• Nuxt 3 正式リリース（2022）
  • Vue 3 のネイティブサポート,Nitro エンジン、Webpacker の廃止など大規模な修正
  • Vue 2/Nuxt 2 を採用していた現場から悲鳴が上がる🔥
  • 機能は素晴らしいのだが、急な移行が難しい現場が多発し、各現場で別技術を採用し始める
  • こ、こんなの使えるかぁー！（ちゃぶ台返し）
  • Vue 離れが一気に加速
• Vue 3.3 リリース（2023）※ でも人気低迷
  • Suspense や Reactivity Transform などの新機能が追加
• Nuxt 3.1 リリース（2023）※ でも人気低迷
  • Nitroの最適化やVue 3.3のサポート

その頃 Angular は？

「あれ、Angular どこ行ったの？」と思ったそこのあなた。察しがいいですね。

「オレ、アメリカで挑戦してきます！」
彼は、どこかへ行ってしまいました。

ひとまず日本では人気がほとんどなくなり、YouTube や Udemy で検索しても、日本人が作ったコンテンツは比喩表現抜きで、片手で数えるほどしか出てきませんでした。

開発元の Google がある本国のアメリカでは、Next 程じゃないですがそこそこ根強くコミュニティは残っていました。
割とギークなエンジニアにも好まれていて、実は Stack OverFlow のランキングも地味に入ってて、各 Google サービスにも着々と導入が進められていきました。

私（筆者）は、v2 からずっと触ってて、推し活を続けております（震）。

Angular 好きの外国エンジニア勢は、Angular が React/Next っぽいアプデを示唆してくると 「やめろ！Next みたいになるのだけはやめてくれ！そこがお前のイイ所なんだ！！！」 って全力で止めてる SNS 投稿をしばしば見ます。

React は 19 へ、そして Next は 15 へ

人気は絶好調！無双状態！！「Next.js が通るから道を開けろ！」 モード。
ユニークな技術は次のステージへ旅立とうとしている。

Next.js に嫌気がさした経緯

バージョンアップ内容がもう少し落ち着いてくれたら喜んで使います。変更が激しすぎて関係各所での対応が面倒になってるのが理由です。

React の学習コスト

React はとても素晴らしい技術だけど、全てが長所ではありません。

JSX 前提

ここでは、DeNA 社が開発した AltJS の方の "JSX" ではなく、Meta 社（開発当時は Facebook）が開発した方の "JSX" という言語を指します。

React は、「レンダリングロジックは他の UI ロジック（イベント、状態管理）と連動し、一緒に管理すべき」という考えに基づき開発されています。
そのため、Meta は JSX（JavaScript XML）という、JavaScript の中にマークアップ言語を書くことができる言語 を開発し、他技術の様にコンポーネントの構成言語を分ける（HTML/JavaScript を別ファイルにする）のではなく、まとめて書ける JSX を採用しました。

初心者は、まず HTML/CSS/JavaScript を覚えた後に、JSX という言語を覚えなくてはいけません。なんなら、今は TypeScript （TS）が主流なので、TS を追加で覚えるハードルが存在し、型付き JSX である TSX も知る必要があります。

使い慣れたら簡単かもしれませんが、まずこの時点で「初心者向き」とは言えません。

実質、Tailwind CSS 前提

今やこれも人気となった Tailwind CSS。私も大変お世話になっております。

でもこいつ、便利なんですが、JSX 同様「CSS をちゃんとわかってる前提で使うべき技術」だと思っています。
でも初学者が Next.js を触ると、おそらくよく分からずに Tailwind を使ってしまう状態になる。そしてジュニアレベルのエンジニアが作る HTML のテンプレートが、Tailwind のクラスだらけになり、一貫性もなく、冗長で、非常〜〜〜に可読性の悪いソースが出来上がってしまいがち。

これも「初心者向き」とは言えません。

だんだん疑問符がつくバージョンアップが増えてきた

最初はまだ良かったですが、いつからか「ん？お、おう」と思う様になり（どのアプデだったか忘れたので後で追記するかも）、React Server Components とか辺りで、個人的にはいよいよ「うーん」とか思ってきました。

技術的には素晴らしいアプデだとは思っていますが、良くも悪くもユニークすぎて暴走状態にも見えます。

ファンとして好きだった芸能人の変貌ぶりに「急にどうした？」ってなった時の心境に近いかもしれません。

Next は React のフレームワークなので

React と Next は、技術としてだけでなく、"ビジネスレベルでズブズブ" な印象です。

React の公式ドキュメントで Next を推奨したチュートリアルになっていたり、どっちがどっちに合わせて新機能リリースしてるのかとさえ思うシーンもありました。
Next.js は React のフレームワークなので、React の学習コストの上に、更にNext.jsを覚えるという学習量が増えます。

React が改変されると、Next.js（他のReact系フレームワーク含め）もそれに引っ張られて変わります。
「React のこの新機能に対応しました！」みたいなバージョンアップがあります。覚えること２倍２倍。

特定の技術で人気のライブラリ使ってたら、本流の技術と周辺ライブラリや技術の両方を気にしなければいけない、あの感じ。

こんなに学習するなんて聞いてないよ感

最初の "Anguler vs React vs Vue" の三すくみ時代から考えると、
「React が学習コスト低くてモダンで素敵！」 と言われて使ってきた人達が、流行の波に乗ってたら色んな関連ライブラリのベストプラクティスに追われ、いつの間にか Next.js が登場してズブズブになり、気がついたら Next.js のバージョンアップを追い続けなければならない泥沼に引きずり込まれてる印象です（私がそう）。

Zero Config

これは賛否あると思いますが、やっぱり「何も設定しなくても勝手によしなに動いてくれる」というのは、入りやすいですが、慣れたらダメなやつだと思ってます。

そもそも、フレームワークが内部的に何してるかわからないこと初心者ならどの技術でもありますが、Next.js はブラックボックス具合が他と比べて強めに感じます（「魔法」と言われる要因の１つ）。

「（なぜ動くかわからないけど）Qiita のコードをコピペしたら動いた！」みたいなやつに近いと思っています。

Next.js じゃなくても

当然のことですが、同じことができる他の技術が名乗りを上げ始めてきたので、昔言われていた「Next.js である理由」がほぼ無くなってきました。
その結果、当然ですが、更にユニークな機能追加や優位性を示すバージョンアップを Next.js がする様になりました。

その末に誕生したのが、何してるかわからないけど色々できる "魔法の様なフレームワーク"。

フレームワークは大抵魔法になりがちかもしれませんが、色んなフレームワーク触ってみてはいるからこそ、個人的にその度合いが Next.js は激しい印象です。
「そんな機能いるの？何に使うの？」「もやは何がしたいのかわからない」という意見も散見される様になってきました。

過去の背景を追っている人しか理解できない充実機能

バージョンが低い頃の Next.js から追っかけてる人は、なんでその機能があるのか、どうなっているのか、過去に比べて何が劇的に良くなったのか、などが享受されています。

しかし、「初心者」の観点で見たときに Next.js は Too much な「魔法の箱」です。
中には問題なく追える人もたぶんいますが、過去に比べて、純粋に学習コストが高くなってしまいました。

バージョンアップが大変

これはどの技術にも言えなくはないことですが、Next.js はそれが特に顕著な印象です。大変な理由はもう上記でたくさん述べました。

Next.js は最新状態を保てば、多大なメリットを得られます。逆に言えば、ちょっとアップデートに食らいつくのを置いてかれると、「終わりの始まり」です。

use〜 多すぎ問題

もともと React には フック（Hooks） という機能があります。詳細割愛しますが、端的にいうと 「状態管理や副作用などを処理するためのもの」 です。

useState、useContext、useEffect など色んなフックがあるのですが、まずこいつらが正しく使えていない現場も多く、「正しい useEffecct の使い方！」みたいな専用動画などが生まれるくらいです。

ところがね？…なんと、Next にも独自フックが存在するんですよ。useRouter、useSWR、useSession（NextAuth.js 利用する場合）…etc.

.
(´꒳`)『必見！useSWR の便利なつk… 「おい、いい加減にしろ！」(°Д°)ｸﾜｯ!!
.

※ ちなみに、useEffect を多用した副作用だらけのアプリケーションは、非常にパフォーマンスを下げてしまう可能性が高まるので気をつけましょう。

「Web 標準」からどんどん遠ざかっている

「Web標準」とは、Web アプリケーション構築において、世界的に推奨されている規格やガイドラインの総称を指します。
現代においては、W3C(World Wide Web Consortium) や ISO 等の国際機関が策定・公開している仕様がそれに当たると思います。

平たく言うと、HTML, CSS, JavaScript の文法ルールとかですね。

要するに、そこで公開してみんなが使ってる記法やルールとは、もはや別物に見えてしまう特殊な情報と化している印象が強いです。
JSX 然り。React/Next の書き方なんて、そこ以外で使わないでしょう。特に Next.js は、魔法すぎて、標準的な技術の書き方からどんどんユニークになっていってると感じました。

Web 標準から遠ざかると言うことは、仮に Next.js が廃れて別の技術に以降しようとなっても、そこで覚えたことが他で使いづらいと言うことです（＝ 可搬性が低い）。

Next.js しかやってこなかったフロントエンジニアは、他で潰しが効かなくなってしまいます。

具体例

例えば、他のフレームワークなら、標準の Web API である Fetch、Observables、HTTP クライアント などを直接利用できるよう設計されています。一方、Next.js は React のライフサイクルメソッド や useXXX みたいな独自の API に依存する部分が多いです。

ルーティングシステムも、他のフレームワークは標準の History API を利用した URL の変更に対応しやすいですが Next.js のファイルベースルーティングは便利だけど標準の書き方とはだいぶ印象が変わります。（状態管理含め、この辺が大体 React 初心者の最初の壁）

ただ、最近は Next 12 以降で Middleware で Web API をサポートし始めたり、Route Handlers においてより Web 標準に近づいてはきました（それでも独自性の強さをブログで指摘されましたが）。

また、そもそも「React は Next と一緒に学ぼう」になっていますので、React がそもそも純粋関数の思想をベースに持つなどの背景は、チュートリアルでは追えない印象です。なので、初心者が「副作用ありまくりのコンポーネント群」を作ってしまう節があると感じました。

オレオレ実装のサラダボウルが生まれる

フロントエンドのフレームワークは特に 「ぼくが かんがえた さいきょうの ふぁいるこうせい」 みたいなソースコードが出来やすいが、Next はバージョンアップの仕様変更で、ディレクトリ構成の推奨やデフォルトがよく変わった。

そのため、src ディレクトリの有無、pages ディレクトリの有無、components ディレクトリはどこに置く？とか lib, util ディレクトリの要/不要 とかのバラツキが、各個人の慣れたバージョンによって異なる可能性が高い。

結果、Next.js を覚えた人がチーム開発をすることになった場合、「オレはこの構成に慣れてるんだが」みたいなのが起きやすくないかなと思ってしまった。

ベンダーロックしやすい

いわゆる「ベンダーロック」とは、特定のベンダーに極端に依存する状態に陥ってしまうことです。そのベンダーが使えなくなってしまったら一瞬で "詰む" ということです。

色んなプラットフォームで Next.js はデプロイ可能ですが、Next を効率良くフル活用すると考えた時に、どこにデプロイする？…となったら答えは 「Vercel」 です。

だって公式だし。新機能追加した時に最初に対応するのはココでしょうし。しかも、「Next.js を使う時、こんなことを心配しなくても大丈夫。そう、Vercel ならね」 みたいな設定とかたくさんあります。

逆に言えば、天才的な Vercel 様 に依存してしまうリスクが高くなるということです。

プロジェクトの長期安定運用には向かないかも

ほとんどのプロダクト開発は「チーム戦」です。
つまり、開発作業可能な人材 が揃っているかどうかが大事で、「その技術扱えません」という人が来られても困るので、なるべく人が補充しやすい技術選定であることも大事なのです。

例えば、ある現場では「当時に流行ってると聞いて、Next 10 で現場に導入したけど、その後バージョンアップ対応できてなくて古いまま」なのに、
人不足で募集しても 「いやー、Next 13.4（App router 安定版）以降なら触れるんですけど…」 みたいなミスマッチも容易に想像できますし、「Next 10！たぶんさわれます！」（エンジニア） とか、「ウチの〇〇、Next 10 いけます！」（営業） とかが現れたけど、実際に現場にアサインさせてみたら全然できなかった…みたいな 事故 も起きます。

しかも、時が経つほどこの解決が難しくなります。

よくわからない内に、人材コストだけお金かかるけど、なかなか改善しない開発プロジェクト** が増殖していきます（もしかして、もうしてる？🤔）。

Next.js に限った話ではないのですが、他の技術と比較して変更が激しい印象です。
バージョンアップの激しい Next.js で、古いバージョンから新しいバージョンに精通しているエンジニアがどれだけいるのでしょうか？…という疑問が、どうしても着いて回ります。

個人開発や小規模開発なら全然アリだと思う。でも、やはり初心者は他から触ったほうがいいかな。

特大の"時限爆弾"になりやすい

ここで言う "時限爆弾" とは、「表面上の緊急性はないけど、いつかインパクトのデカい問題を起こしそうな技術的負債」を指します。

• 公式サポートも切れてすっかりレガシーになってしまった
• バージョンアップとか根本解消したいけど、影響範囲も広く・根深くて今更いえねぇ
• 今まではなんとかしてきた、まだ（表面上は）致命的な問題になっていない
• いつかトラブル起こす未来しか見えてこないけど、今じゃない、今じゃないんだ
• ネットの記事も最近見つけづらくなってきたな。公式調べてもこのバージョンのはもう載ってねぇや。ハハッ！

これも Next.js に限ったことではないのだが、前述の「Web標準から遠くなってる」＆「ベンダーロック」まで含めると、Next.js は 特大の時限爆弾 になる可能性がある。

現場で、「なんで Next.js なんですか？」って聞いたら大体答えは "流行ってるから" 的なのがほとんど。別にそれは悪いことでないが、その後も上記のリスクを加味してメンテし続けることを忘れてはいけない。さもなくば "時限爆弾" になる。

ミーハーな技術採用が増えてきた

まず、前提として 「流行ってる is 正義」 が日本は多すぎる印象。さすがミーハー大国ジャパン。

Next.js は国内外から見ても非常に人気です。ガンガン使われている。
できた方が、仕事のチャンスも多いでしょう。今は。
確かに "人気" は大事です。案件求人数にも影響するし、人材流動性にも影響するので。

けど、「求人数」とか「案件数」とか、スナップショットで数値が高いだけで推奨するのはリスクが高い。

「流行ってる技術」を最も口にするのは、スクール経営者や営業的立場に近い人であり、彼らのポジショントークが割合多いことを、私たち技術者は忘れてはいけない。
なぜなら、「じゃぁ、その技術が流行らなくなった時はどうするんですか？」という問いに、彼らの答えは限られてくるからです。

上記みたいなリスクやデメリットを提示しても素晴らしい回答が返せる営業とかだったら、信用できるかもしれない。

生成AI界隈、すぐ v0 使いたがる

v0 は、自然言語で Next を主とした画面を作ってくれるサービス。
非エンジニアの生成 AI 勢がこれを非常に活用しております（今は）。

まず、中身は主に Shadcn/ui、Radix UI、Tailwind CSS を採用しています（またなんか出てきた）。

Schadcn/ui はライブラリではなく「コンポーネントコレクション」で、最初からイイ感じに作り込んだ編集可能なコンポーネントファイルを提供してくれるものですが、これを利用して AI が柔軟にフロントエンドの雛形を提供してくれるのが v0 です。

これを界隈の方々がユースケースたくさん投稿しているので、更に初学者が集まりやすい状況（「v0 でプレゼンスライドを作る」とか、もはや意味が分からない ╮(´•ω•)╭）。

短くまとめると

素晴らしい技術だけど、覚えることが多すぎるし、変化も激しいし、潰しが効かないから、初心者向きじゃない。

じゃあ何が良いのよ

全くの初心者でも、もともとバックエンドや他の技術を触っていた技術者でも、「本格的にフロント初めてやるけど、どうしよう？」となった場合ですが

正直、正解はないです。

だって、利用者（デベロッパーやエンドユーザ）の要求・要件にもよるし、開発現場がどう回されているのかとか、現場参画メンバーの平均技術レベルにもよるし、プロジェクト規模にもよるし。「結論、これが正解」というものは当然ないのです。

・・・が、強いて言うなら…👇

• Next 触る人は、まず JS のお勉強と、ベストプラクティス追いかけ続けるのは人一倍やりたいところ
• React にこだわらないなら、Svelte でもいい
• React をどうしても使いたいなら、Web標準意識が強い Remix でもいい
• Rails とか Laravel とか既に使ってるなら、もうそれだけで終わらせよ
• サーバサイドに Go とか NestJS 使ってるなら、画面は React だけでもいいじゃん。…いや、まぁ Next 使った方が楽か
• なんでもいいなら、v19 以降の Angular 使ってよ（私の趣味）
• あと静的なブログやコーポレートサイトなら Astro いいよ、Astro（最近の推し）

それでも Next.js が使いたいあなたへ

色々言ったが、それでも今は Next.js の天下だ。それはわかる。

もし、事情により 「今は Next.js が触りたいんだ！いや、Next.js じゃなきゃダメなんだ！」 っていう事情があるなら、以下のポイントを押さえるのが良いかもしれない（意見）。

• まず、React の公式ドキュメント を見ろ！見れっ！
  • ブクマで React/Next 専用フォルダを作り、確実にブクマしろ
  • 特に、テクニックより「思想」を知るのです。 その方向に変化してくので（それすらも裏切られる時あるけどね）
  • Udemy の変な教材より優先です。Udemy の日本語教材は古いのが多すぎる。特に、Create React App（CRA）を説明に使ってるのは見なくていいです。 （※ 補足説明のために利用してるとかなら問題ない）
• React の公式を抑えた後で、Next.js の公式ドキュメントを見ろ！見れっ！
  • そうしないと、初心者は Next の機能なのか、React の機能なのかを混乱するから（当然これもブクマ必須）
  • React 前提のフレームワークだから、ここでさっきの「React の思想をおさえておく」という行動が効いてくる。「お前、React の〇〇のためにこういう方向に行くんじゃなかったんか！？」という アンテナが貼れるようになる
  • 例え偉大なインフルエンサー様やスクールの講師の勧めでも、「Next.js を触りながら React を覚えればいい」という言葉は 信じなくていい。それは地獄の始まりだ 👿
• Next.js のバージョンが上がったら Codemod でアップデートを試す
  • Next.js のバージョンが上がった場合、これを使うと、古いバージョンから新バージョンに移行させると同時に、ソースコードの API 変更や非推奨化に合わせて大量のコード修正を自動でしてくれるので便利
  • ただし、依存関係は見てくれるけど、ビジネスロジック部分は全て最適化してくれない可能性があるので、念のため自己チェックや動作確認も必要
  • 公式と非公式があるので、公式パッケージ（@next/codemod）を使おう
• 周辺技術やツール、ライブラリを把握しよう
  • ただし、原則、時が経つとあっという間に変わり得るので、アプデ監視は必須
  • TypeScript：バージョンアップ情報（大きな変更だけ把握でもいい）
  • Node.js や自分が使うランタイム：バージョンアップ情報（同上）
  • Tailwind CSS： 特に Next.js ではスタイルは今やこいつがデフォ
  • Radix UI： ヘッドレスな UI コンポーネントを実現するオープンソース。
    • こいつが執筆現在時点で、Next.js 周りのエコシステムの裏で毎回暗躍している
  • shadcn/ui： コンポーネントを作りやすくする 「UI コンポーネントコレクション」、公式にもあるが、ライブラリではない。
    • こいつを "ライブラリだ" と言っているインフルエンサーや技術者は、よく理解していない人なので過度な信用は禁物
  • v0： AI 勝手にコンポーネント作れるやつ。今なら UI だけじゃなくアプリレベルでいけるかも。エディタの拡張機能にも登場するかも。情報を追う必要はないが、有名になりすぎたので存在把握だけしてくれ。裏で shadcn/ui が用されてる（＝Radix, Tailwind CSS が動いてる）
  • Tremor：ダッシュボード系のUIを作るオープンソースのライブラリ。
    • 2025年1月に Vercel に買収されて、ダッシュボード系のデフォになった。v0 や Vercel サービスのダッシュボードにも使われてる。有料だった中身が無料になったので知っとくと良い。裏で Radix と Tailwind CSS が用されてる
  • Auth.js（旧 NextAuth.js）： 認証周りでよく出てくる。ただ、Clerk など他の良いツールも出てきているので、何を追うかはお好み
    • 昔の呼び名「NextAuth」を使うインフルエンサーや技術者は、昔の言い方が抜けきれていない古参か、よく最新情報を追いきれていない人のどちらかなので、ちょっと要注意
  • Vite/Turbopack/Rspack とかビルドツール系も入れようと思ったけど、ここも追えと言い始めると人生が溶けるので割愛
  • Vercel 以外のデプロイ環境： Vercel は気が利きすぎるので、AWS・Amplify/GCP・Firebase/Cloudflare などにもデプロイできるようにしておいた方がいい。挙動や仕組みもより理解できる
• SNS （特に "X"）の公式アカウントをフォローして 変更検知しろ
  • Next.js @nextjs： Next.js 情報追っかける起点、ホームポジション
  • Vercel @vercel： Next.js の開発元。React も見たほうがいいけどこっち見とけば良いかも
  • （おまけ）Vercel Changelog @vercel_changes： 意外とこっちで Vercel からの新機能・改善・方針転換などの情報を知れたりする事もある
  • （おまけ）v0 @v0： Next.js めっちゃ絡みある AI サービス
  • （おまけ）AI SDK @aisdk： Vercel がだしてるオープンソースな AI 作れるやーつ。あんま流行ってないけど、興味ある人は好きかもね
• 上記を抑えた上で、Udemy や YouTube をチェックすればいい
  • ただし、ナマモノなので鮮度は大事
  • YouTube や Udemy は 「タイトルと説明欄だけ "最新！" に変えて、中身は古いまま」なんてことはザラ。注意されたし
  • 動画制作者側の気持ちもわかるので、常に最新版に更新するのは結構大変だし…
  • （どの教材が良かったか、とかは後で載せるか迷い中・・・😕）

※ 要は、激しい情報変化を把握する時は、技術情報そのものを押さえるより、"情報の震源地" や "根本思想・方向性" などを押さえておくと良い

結論と主旨（再掲）

改めて書いときます。

• Next.js は非常に便利。とても良い技術で、慣れると最高
• Next.js は好きじゃないですが、今後も使います（市場が大きい内は）
• でも、初心者にはやっぱり「オススメ」ではない
• Next.js 以外にも色んな技術使って、常に身軽に動けるようにはしていますし、今後もそうします

※ 現役の技術者は、フロント触る人なら一回触っておいた方がいいと思う。食わず嫌いは良くない🐟

おまけ：SNS でも新記事を告知

この Qiita アカウントでは、技術的にクリティカルなエラーの解消方法や、トレンド技術を具体的に活用するノウハウを中心に記事を公開（考え方などのポエム記事は控えめにしたい）。

X（旧：Twitter）で、ITや生成AIなど技術的な内容しか吐き出さない専用アカウントがあり、新記事の公開時にはこちらでも周知します。

また、Xでは、お気持ち投稿は控え、ひたすらエンジニアや生成AIに関心がある人向けの情報だけをたまーーに投稿していくつもりです。（※ たまに Udemy や note や Tips などで有料コンテンツの投稿もするかもしれませんが、悪しからず🙏）

今後の情報にもご興味があれば、お気軽にフォローしてください👇