Nuxt.jsとNext.jsを比較して、表とグラフにまとめてみた!

![ 2021-07-03 9.34.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166484/a5903afb-047a-41e1-2669-9e5eb6392ecc.png)

Vue.jsベースの[Nuxt.js](https://ja.nuxtjs.org/)とReactベースの[Next.js](https://nextjs.org/)は、人気のフロントエンドフレームワークとしてよく比較されますが、実際どんな違いがあるのか、様々な角度から表とグラフにまとめてみました。

2021/07/03、雇用需要比較の情報を更新しました。

![nuxtnext.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166484/9119669c-9923-a3dc-aae8-2784e839d1dd.png)


## 表

### ⭐ 概要  

|  | Nuxt.js | Next.js |
|:-----------|------------:|------------:|
|  作者   |  Alexandre Chopin, <br> Sebastien Chopin, <br> Pooya Parsa    | Guillermo Rauch |
|    開発元 |   -   |     [Vercel](https://vercel.com/)社 と open-source community  |
|    リポジトリ |  https://github.com/nuxt/nuxt.js    |     https://github.com/vercel/next.js  |
|    初版 |   2016/10/26   |     2016/10/25  |
|   プラットフォーム  |   Web Platform   |   Web Platform    |
|   タイプ  |   JavaScript library   |   JavaScript library    |
|   ベース  |   Vue.js   |   React    |
|   最新バージョン  |   2.14   |    11.0   |
|   ライセンス  |   MIT   |   MIT    |
|   採用企業  | Rakuten Bic coconala, 転職会議, Skeb, ReRe, hey, GitLab, PLAID,  他多数（公式サイトより）   |   hulu, Uber, Tencent, NETFLIX, GitHub, twitch, docker, 他多数(公式サイトより)    |
|   公式サイト  |   https://nuxtjs.org/   |   https://nextjs.org/    |
|   wiki  |    [Nuxt.js](https://ja.wikipedia.org/wiki/Nuxt.js)  |   [Next.js](https://en.wikipedia.org/wiki/Next.js)    |
|   特徴  |      |   ゼロコンフィグ <br> ページ単位での事前レンダリング    |

### ⭐  GitHubリポジトリ

|  | Nuxt.js | Next.js |
|:-----------|------------:|------------:|
|  スター数   |  36.6k    |   69.9k    |
|  ウォッチャー   |   0.8k   |   1.2k    |
|  フォーク数   |   3.0k   |    13.1k   |
|  Used by   |   130.0k   |    324.0k   |
|  Contributors   |   0.3k   |    1.6k   |
|  Issues数(Closed)   |   5,923   |    8,789   |
|  プルリク数(Closed)   |   2,792   |    8,303   |
|  リリース数   |   155   |   1,174    |
|  最終バージョン   |   v2.15.7   |   v11.0.0    |

k = 1,000

https://github.com/nuxt/nuxt.js

https://github.com/vercel/next.js/

### ⭐   ドキュメント

|  | Nuxt.js  | Next.js  |
|:-----------|------------:|------------:|
|   公式ドキュメント  |    [はじめる](https://ja.nuxtjs.org/docs/2.x/get-started/installation)   |    [Getting Started](https://nextjs.org/docs/getting-started)   |
|   公式チュートリアル  |  -  |   [Create a Next.js App](https://nextjs.org/learn/basics/create-nextjs-app?utm_source=next-site&utm_medium=nav-cta&utm_campaign=next-website)    |
|   サンプルコード  |  [例](https://ja.nuxtjs.org/examples)  |   [examples](https://github.com/vercel/next.js/tree/canary/examples)    |
|  ドキュメントの日本語化   |   ほぼされている   |   部分的    |


### ⭐   実装

|  | Nuxt.js  | Next.js  |
|:-----------|------------:|------------:|
|   ベース  |   Vue.js   |    React   |
|   プロジェクトの作成方法  |  npx create-nuxt-app   |   npx-create-next-app    |
|   テンプレート言語  |   vue template  <br><br> \<h1>Hello, {{ name }} \</h1>|    JSX  <br><br> \<h1>Hello, {name}\</h1> |
|   ルーティング  |   ファイルシステムベース   |    ファイルシステムベース   |
|   基本ルート  |   pages/index.vue  → href="/" |    pages/index.js → href="/"  |
|   動的ルート  |   pages/store/[id].vue  → href="/store/:id" |    pages/store/[id].js → href="/store/:id"  |
|   テンプレートへの変数の代入  |   {{ count }}   |   { count }    |
|   stateの初期化  |   data( ) { return { name: "hey" }  } |   const [hey, setHey] = useState("hey") <br> (React Hooks)   |
|   イベントバインディング  |   \<button @click="save( )">   |    \<button onClick={save} >   |
|   子コンポーネントへのstateとイベントの伝達  |   prop, $emit   |    props   |
|  フォルダ構成   |   components、layoutsなど <br> 規定のフォルダ名が存在。   |    フォルダ名に制約なし。   |
|  グローバルヘッダ・タグ設定   |   nuxt.config.js   |    _document.js   |
|  設定ファイル   |   nuxt.config.js   |   next.config.js <br> （プロジェクト作成時、同ファイルは存在しない）    |
|  エラーページの扱い   |   /layouts/error.vue   |   pages/404.js <br> pages/_error.js    |
|  規定のCSSライブラリ   |   Bootstrap Vue、BalumUIなどから選択   |   styled-jsx <br> （css-in-jsライブラリ）    |
|  カスタムイベント   |   methods: { handle( ) { ... } }  |   const handle = ( ) => { ... }   |
|  Compute   |   computed: { calc: function( ) { ... } }  |   -   |
|  Watch   |   watch: { price: function (newPrice, oldPrice) { ... } }  | -     |
|  条件レンダリング   |  data( ) { return { isFinished: true } } | return ( \<>  { isFinished && <span>Fin</span> } \</> ) <br> { isLoading ? \<div>Fin.\</div> : \<div> Not Fin. \</div> }   |
|  リスト   |   v-for="item in items" :key="item.id" |  { items.map((item) => { ... } }    |
|   Ref  |  this.$refs.input \<input ref="input" />   |   const ref = useRef(null) <br> \<div ref={ ref }>...\</div>  |
|   最適化  |  \<keep-alive> ... \</keep-alive>  <br>  |   useCallback <br> useMemo   |
|  サーバでのFetch   |   async fetch( ) { }  |  async function getServerSideProps( ) { }  |
|  レイアウト   |  layout: \<コンポーネント>   |   _app.jsへの組み込み   |
|  メタタグ   |  head( ) { return { ... } }   |   \<Head>...</Head> <br> "next/head"   |
|   画像最適化モジュール  |   @nuxt/image   |   Image    |
|  Linkモジュール   |   \<NuxtLink to="">  |    \<Link href="">  |
|   state管理ライブラリ  |   [Vuex](https://vuex.vuejs.org/ja/)   |   [Redux](https://redux.js.org/), [Redux Toolkit](https://redux-toolkit.js.org/)    |


### ⭐  ライフサイクル 

|  | Nuxt.js  | Next.js  |
|:-----------|------------:|------------:|
|  呼び出し方   |   mounted()など <br> 規定の関数名で呼び出す。   |    useEffect() <br> (React Hooks)   |
|  マウント後   |   mounted   |    componentDidMount, useEffect( ,[ ] )  |
|  更新後   |   updated   |     componentDidUpdate, useEffect( ) |
|  破棄前   |   beforeDestroy   | componentWillUnmount, useEffect( return{ } ,[ ] )|
|   メソッド名  |       beforeCreate( ) <br> created( ) <br>    beforeMount( ) <br>    mounted( ) <br>    beforeUpdate( ) <br>    updated( ) <br>    beforeDestroy( ) <br>    destroyed( ) <br>  |     getDerivedStateFromProps( ) <br>  componentDidMount( ) <br>  shouldComponentUpdate( ) <br> getSnapshotBeforeUpdate( ) <br>  componentDidUpdate( ) <br>  componentWillUnmount( ) <br>   |
|  ドキュメント   |  [vueのライフサイクル](https://jp.vuejs.org/v2/guide/instance.html#%E3%83%A9%E3%82%A4%E3%83%95%E3%82%B5%E3%82%A4%E3%82%AF%E3%83%AB%E3%83%80%E3%82%A4%E3%82%A2%E3%82%B0%E3%83%A9%E3%83%A0)    |   [Reactのライフサイクル](https://ja.reactjs.org/docs/state-and-lifecycle.html)    |

※ Reactは、ライフサイクルの実装方法がクラスと関数コンポーネントで異なる。
クラスの場合、メソッド名で呼び出すが、関数コンポーネントでは、HooksのuseEffectを使用し制御を行う。

### ⭐  サーバサイドレンダリング

|  | Nuxt.js  | Next.js  |
|:-----------|------------:|------------:|
|   SSR （HTMLをリクエスト毎に生成） |   asyncData( ) {  }   |   getServerSideProps( ) {  }    |
|   SSG （HTMLをビルド時に生成） |   -   |    getStaticProps( )   |
|  ページ単位の指定が可能か？   |   ✕   |    ○   |
|   バックエンドAPI  |   -   |   API Route    |


## グラフ

### ⭐ Google トレンド

#### 世界のトレンド

直近、過去5年で比較。

![ 2021-06-19 14.11.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166484/89a4cf2d-5959-c7cd-e20c-9ca33814fa07.png)

https://trends.google.co.jp/trends/explore?date=today%205-y&q=nuxt.js,next.js

#### 日本のトレンド

直近、過去5年で比較。

![ 2021-06-19 14.12.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166484/f17bb43f-5290-34e3-e3e8-9c35e6b6719c.png)

https://trends.google.co.jp/trends/explore?date=today%205-y&geo=JP&q=nuxt.js,next.js

### ⭐ npm ダウンロード数

直近、過去5年で比較。

![ 2021-06-19 14.55.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166484/f19d2a4d-5745-218e-d251-682405a12e8d.png)

#### ダウンロード数

- nuxt.js:   388,511
- next.js: 1,458,756

（2021.6.13時点）

[next-vs-nuxt](https://www.npmtrends.com/next-vs-nuxt)

### ⭐ コードの更新頻度

グラフの緑色がコードの追加、赤色がコードの削除を意味します。

#### Nuxt.js


![ 2021-06-19 14.29.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166484/723cb3d2-1e13-6879-de42-5853a21578a1.png)

[Nuxt.js Code frequency](https://github.com/nuxt/nuxt.js/graphs/code-frequency)

#### Next.js


![ 2021-06-19 14.29.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166484/87e82852-fa5f-a007-4bb4-11261182aa83.png)

[Next.js Code frequency](https://github.com/vercel/next.js/graphs/code-frequency)


### ⭐ 雇用需要 (linkedin)

![nuxtnext.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166484/c2f1335c-d754-3b4a-db23-fbbc248b07be.png)


https://www.linkedin.com



### ⭐ 案件数 (CroudWorks, フリーランススタート)

![ 2021-07-02 8.33.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166484/3a27521a-754c-0d1b-1377-3e31d163f18e.png)

![ 2021-07-02 8.33.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166484/6eeabfc7-a91b-58ad-af3a-6ed2924834e0.png)

https://crowdworks.jp/public/jobs/search?search%5Bkeywords%5D=Next.js&keep_search_criteria=true&order=score&hide_expired=false

https://freelance-start.com


 
### ⭐ 技術記事数 (Qiita, Zenn, Medium)

![ 2021-07-02 8.30.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166484/1cc85ba6-f2ed-d03f-cc29-1a2c431c6f7f.png)

![ 2021-07-02 8.31.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166484/58a7126b-76f4-605c-39be-d0f405b31d1d.png)

![ 2021-07-02 8.31.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166484/d7ede49c-8a9a-5509-37e4-783666a6f2cc.png)


https://qiita.com

https://zenn.dev

https://medium.com


### ⭐ メンター数 (MENTA)


![ 2021-07-02 8.29.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166484/66a90301-18dc-309c-2453-4130d631dcdd.png)


https://menta.work/plan?tag=3899


### ⭐ 動画教材 (Udemy)

![ 2021-07-02 8.28.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166484/6f89f043-731d-cb76-88f6-72a1413232ba.png)


※日本語対応は、いずれも２本のみ。

https://www.udemy.com/topic/nextjs/


### ⭐ 質問数 (stack overflow, teratail)

#### stack overflowによる質問数

![ 2021-07-02 8.24.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166484/44960f00-63e3-2b86-666b-324fb9d4cf96.png)


https://stackoverflow.com/questions/tagged/next.js


#### teratailによる質問数

![ 2021-07-02 8.18.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166484/6a876f35-8548-1665-8e82-b84f03e451b8.png)

https://teratail.com/tags/Next.js


### ⭐ イベント数 (connpass)

![ 2021-07-02 8.45.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166484/9393435e-ee48-e3b7-3bb9-04f0be7164b2.png)

※ 2021年は、2021/06/25日時点でカウント。

https://connpass.com/search/?q=nuxt.js&start_from=2020%2F01%2F01&start_to=2020%2F12%2F31

### ⭐ 満足度 

![satisfaction.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166484/29fa7919-8154-85fa-21ea-5742a5d309ef.png)


https://2020.stateofjs.com/ja-JP/technologies/back-end-frameworks/

### ⭐ 利用度

![jamstack.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166484/d1799f35-2005-2191-af7b-d7ab96532368.png)


https://tsh.io/state-of-frontend/#jamstack


## 参考

- [公式 Nuxt.js](https://nuxtjs.org/)
- [公式 Next.js](https://nextjs.org/)
- [vue.js](https://vuejs.org/v2/guide/#Getting-Started)
- [react.js](https://reactjs.org/docs/getting-started.html)
- [gatsby gatsby-vs-nextjs-vs-nuxtjs](https://www.gatsbyjs.com/features/jamstack/gatsby-vs-nextjs-vs-nuxtjs)
- [Vue.js 他のフレームワークとの比較](https://jp.vuejs.org/v2/guide/comparison.html)