Next.js と Nuxt は、どちらも最近人気のフロントエンドのフレームワークで、両者ともに SSR (サーバーサイドレンダリング) や SSG (静的サイトジェネレーター) などの機能を備えています。
ただ、両者ともに名前も機能も結構似ており、違いをしっかり理解していないとどちらを選ぶのが良いのか迷ってしまうかもしれません。
そこで、この記事では、Next.js と Nuxt の違いを徹底的に比較していきます。
概要
| Next.js | Nuxt | |
|---|---|---|
| 公式サイト | https://nextjs.org/ | https://nuxt.com/ |
| リポジトリ | https://github.com/vercel/next.js | https://github.com/nuxt/nuxt |
| 作者 | Guillermo Rauch | Alexandre Chopin, Sebastien Chopin, Pooya Parsa |
| 開発元 | Vercel | NuxtLabs |
| 初リリース | 2016/11/04 | 2018/01/09 |
| ベース | React | Vue.js |
| 最新バージョン | v13.4.9 | v3.6.2 |
| ライセンス | MIT | MIT |
まず、Next.js と Nuxt の最も大きな違いと言ってもいいのが、ベースのライブラリだと思います。
Next.js は React を、Nuxt は Vue.js をベースにしています。
React は Meta (旧 Facebook) が開発したライブラリで、JSX という記法で HTML (正確には JS の一部だけど) を書いていきます。
また、Hooks という機能を使って、コンポーネント内で状態管理などを行うことが可能です。React は割とシンプルで自由度が高いライブラリという印象です。
Vue は Evan You 氏が開発したライブラリで、こちらは個人開発になります。
テンプレート構文で HTML に JS を埋め込むことができます。HTML からプログラミングに入った人には親しみやすい記法で、私も最初触ったときには簡単さと使いやすさに感動した記憶があります。
また、Vue v3 より Composition API がリリースされ、コンポーネント内で状態管理などを定義することができるようになりました。Vue.js は初心者に優しいライブラリですが、その分ルールや規則が多く、設計についてはある程度決められています。
リポジトリ
| Next.js | Nuxt | |
|---|---|---|
| リポジトリ | https://github.com/vercel/next.js | https://github.com/nuxt/nuxt |
| スター | 109k | 46.3k |
| フォーク | 24.4k | 4.1k |
| ウォッチャー | 1.4k | 0.7k |
| Used by | 1600k | 260k |
| Contributor | 0.5k | 2.7k |
| Issue | 16k | 12k |
| Pull Request | 16k | 4k |
| 最新バージョン | v13.4.9 | v3.6.2 |
ドキュメント
どちらのドキュメントも相当丁寧に書かれており、困ったらドキュメントを見る、で大体解決すると思います。サンプルも豊富で参考になります。
Nuxt は v2 のドキュメントは日本語化されていたので、そのうち v3 のドキュメントも日本語化されるかもしれません。
実装
| Next.js | Nuxt | |
|---|---|---|
| ベース | React | Vue.js |
| テンプレート言語 | JSX | vue template または JSX |
| プロジェクトの初期化 | $ npx create-next-app@latest | $ npx nuxi@latest init |
| 基本ルート | app/hoge/page.js → href = “/hoge” | pages/hoge.vue → href = “/hoge” |
| 動的ルート | app/fuga/[id]/page.js → href = “/fuga/:id” | pages/fuga/[id].vue → href = “/fuga/:id” |
| 変数の代入 | { message } | {{ message }} |
| イベントバインディング | <button onClick={hoge}> | <button @click="hoge"> |
| state の初期化 | const [count, setCount] = useState(1); | const count = ref(1); |
Next.js はプロジェクト作成時に色々と質問され、諸々のセットアップまでやってくれます。
Nuxt は v2 まではいろいろオプションを選べたんですが、v3 以降は方針が変わり、自分で lint などの設定を行う必要があります。個人的には便利だったので残念です。
ライフサイクル
| Next.js | Nuxt | |
|---|---|---|
| 呼び出し方 | useEffect() | onMounted() など関数で呼び出す |
| マウント後 | useEffect( , []) | onMounted() |
| 更新後 | useEffect() | onUpdated() |
| 破棄前 | useEffect(return {}, []) | onUnmounted() |
| メソッド名 | getDerivedStateFromProps()componentDidMount()shouldComponentUpdate()getSnapshotBeforeUpdate()componentDidUpdate()componentWillUnmount() | onMounted()onUpdated()onUnmounted()onBeforeMount()onBeforeUpdate()onBeforeUnmount() |
| ドキュメント | useEffect – React | Composition API: ライフサイクルフック | Vue.js |
SSR (サーバーサイドレンダリング)
| Next.js | Nuxt | |
|---|---|---|
| SSR （HTMLをリクエスト毎に生成） | getServerSideProps() | asyncData() |
| SSG （HTMLをビルド時に生成） | getStaticProps() | – |
| ページ単位の指定が可能か？ | 〇 | 〇 (v3〜) |
| バックエンドAPI | API Route | – |
トレンド
過去5年間の Next.js と Nuxt の Google 検索回数の比較です。
昔は少し Nuxt の方が話題だったようですが、最近は Next.js が圧倒的です。
ダウンロード数
Next.js のダウンロード数が圧倒的です。
更新頻度
やはり Next.js は企業が保守しているだけあってめちゃくちゃ開発が活発です。リリース頻度も Next.js の方が圧倒的に高いです。
Nuxt は v3 へのアップデートが何度も延期されていた (確か最終的には1年以上延期された) ことから、開発リソースが全然足りてない印象があります。
記事数
| Next.js | Nuxt | |
|---|---|---|
| Zenn | 2,480 | 720 |
| Qiita | 2,582 | 4,065 |
| dev.to | 3,626 | 703 |
| Medium | 6.2k | 1.2k |
全体的に Next.js が多いです。
なぜか Qiita だけは Nuxt の方が多いのが気になります。(日本人は Nuxt 使いがち？)
質問数
| Next.js | Nuxt | |
|---|---|---|
| StackOverflow | 32,950 | 11,902 |
| Teratail | 653 | 11,490 |
まとめ
この記事では Next.js と Nuxt の違いを比較してまとめてみました。フレームワーク選定の参考になれば幸いです。
※この記事に間違いなどあればコメント欄までお願いします
コメント