Nuxt.jsを始めよう

Reactを使っている人なら聞いたことはあるNext.js。そのVueバージョンがNuxt.jsです。Nuxt.jsはVue.jsをベースに作られたJavaScriptフレームワークです。サーバーサイドレンダリングが可能なので、より早く、SEO対策ができるウェブアプリの開発が可能になります。今日はNuxt.jsのバージョン3について解説していきます。

Nuxt.jsの強み

  • SPA(シングルページアプリケーション)でのSEO強化
  • モバイルアプリのでパフォーマンス向上
  • 静的サイトを作る機能がついてくる
  • 静的サイトによるセキュリティ向上
  • Vue.jsよりもエンタープライズ向け
  • 自動でコードを分割(Automatic code splitting)ローディングタイムの向上

Nuxt.jsの弱み

  • よく使われるプラグインがカバーされていないことがある
  • トラフィックの多いサイトでのサーバー管理が難しいことがある
  • デバッグが難しい
  • コミュニティが小さい(Next.jsに比べて)

また、ソースコードはGitHubのリポを確認してください。

Nuxt.jsを始める

Nuxtのインストレーションガイドは公式サイトを参考にしました。コマンドでプロジェクトを作成していきます。バージョン3をインストールします。(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>

これでデフォルトのページがホットリロードされましたね。

お疲れ様でした。