用語集 › 🕸️ Web › Nuxt
【なくすと】

Nuxt とは？

公開:
💡 Vue.jsに翼を授けたフルスタックの相棒
📌 このページのポイント
Nuxtの特徴 Vue.js ベース SSR サーバーサイド レンダリング リクエスト毎にHTML生成 SSG 静的サイト生成 ビルド時にHTML事前生成 ファイルベース ルーティング pages/に置くだけで 自動ルート設定 Nitro エンジン Vercel / Netlify / Cloudflare Workers / Node.js にデプロイ可能
Nuxtの特徴：Vue.jsベースでSSR/SSGに対応するフルスタックフレームワーク
ひよこ ひよこ
NuxtってVue.jsとは違うの？
ペンギン先生 ペンギン先生
Vue.jsはUIを作るためのライブラリで、NuxtはVue.jsを土台にしてルーティングやSSR、ビルドツールなどをまとめて提供するフレームワークだよ。Vue.jsだけだと自分で色々設定が必要だけど、Nuxtなら最初から全部揃ってるんだ
ひよこ ひよこ
SSRとSSGってどう違うの？
ペンギン先生 ペンギン先生
SSRはリクエストのたびにサーバーでHTMLを生成する方式、SSGはビルド時にHTMLを事前生成しておく方式だよ。Nuxtではページごとにどちらを使うか選べるのが強みだね
ひよこ ひよこ
ファイルベースルーティングって何？
ペンギン先生 ペンギン先生
pagesフォルダにファイルを置くだけで自動的にルーティングが設定される仕組みだよ。例えばpages/about.vueを作れば/aboutでアクセスできる。設定ファイルにルートを書く手間がなくなるんだ
ひよこ ひよこ
Next.jsとNuxtってどっちを選べばいいの？
ペンギン先生 ペンギン先生
Reactが好きならNext.js、Vue.jsが好きならNuxtが基本的な選び方だね。機能面ではかなり似ていて、どちらもSSR/SSG対応、ファイルベースルーティング、APIルートを持ってる。Nuxt 3ではNitroエンジンが搭載されて、Cloudflare WorkersやDenoなど様々な環境にデプロイできるようになったのが大きな特徴だよ
ペンギン
まとめ：ざっくりこれだけ覚えればOK！
「Nuxt」って出てきたら「Vue.jsの高機能フレームワーク」と思えればだいたいOK！
📖 おまけ：英語の意味
「Nuxt (Next + Vue)」 ＝ ネクスト＋ビュー
💬 React向けのNext.jsにインスピレーションを受けて、Vue.js版として作られたフレームワーク。Next の「N」とVueの「u」を組み合わせて「Nuxt」になったんだよ
🔗 あわせて読みたい
← 用語集にもどる