Reactを使っている人なら聞いたことはあるNext.js。そのVueバージョンがNuxt.jsです。Nuxt.jsはVue.jsをベースに作られたJavaScriptフレームワークです。サーバーサイドレンダリングが可能なので、より早く、SEO対策ができるウェブアプリの開発が可能になります。今日はNuxt.jsのバージョン３について解説していきます。
Nuxt.jsの強み
- SPA（シングルページアプリケーション）でのSEO強化
- モバイルアプリのでパフォーマンス向上
- 静的サイトを作る機能がついてくる
- 静的サイトによるセキュリティ向上
- Vue.jsよりもエンタープライズ向け
- 自動でコードを分割（Automatic code splitting）ローディングタイムの向上
Nuxt.jsの弱み
- よく使われるプラグインがカバーされていないことがある
- トラフィックの多いサイトでのサーバー管理が難しいことがある
- デバッグが難しい
- コミュニティが小さい（Next.jsに比べて）
また、ソースコードはGitHubのリポを確認してください。
Nuxt.jsを始める
Nuxtのインストレーションガイドは公式サイトを参考にしました。コマンドでプロジェクトを作成していきます。バージョン３をインストールします。（Node.jsがインストールされていることが前提です。）
node --version #16.11以上 #npx npx nuxi init <project-name> #pnpmの場合 pnpm dlx nuxi init <project-name> cd <project-name> npm install
ではライブラリがインストールされたところでデベロップメント用のサーバーを起動します。
npm run dev -- -o
これで初期のNuxtのセットアップが完了しました。
ファイル構成
nuxt.config.ts
nuxt.config.tsはNuxtのコンフィグで使用するファイルでTypeScriptで構成されています。JavaScriptファイルの方が良い場合は.jsに変更することも可能です。このファイルでモジュールの登録やカスタムメタデータの登録をすることができます。また、ここにAPIキーなどのEnvironment Variable（環境変数）を登録することもできます。
app.vue
デフォルトのルートコンポーネントになります。デフォルトでは、NuxtWelcomeのコンポーネントがマウントされるようになっていますが、これらのファイルはモジュールに埋め込まれています。Vueの場合はHelloWorldが通常のディレクトリに置かれているのでいちいち削除する必要がありましたがNuxtの場合は無視して削除する必要はありません。npm i でまたインストールされてしまうので。
.nuxt
開発の際にNuxt側で使われるディレクトリです。そのまま放っておいてください。
package.json
おなじみのパッケージが一覧で記載されたコンフィグファイルです。npm i で記載されているライブラリがインストールされますね。
Welcomeページを削除
ではapp.vueにあるNuxtWelcomeを適当に入れ替えてみます。先ほども記載しましたがWelcomeNuxtのコンポーネントは削除しなくて良いです。
<template>
<div>
<p>いらっしゃい</p>
</div>
</template>
これでデフォルトのページがホットリロードされましたね。
お疲れ様でした。
