Nuxtを秒で始める

はじめに

Nuxtは、Vue.jsベースのアプリケーション開発をより快適かつ強力にするフレームワークです。SSRや静的サイト生成、ルーティング、プラグイン管理など、多くの機能が標準で整備されているため、プロジェクト開始時から高品質な構造にすることができます。

本記事では、Nuxtを「とにかくまず始める」ための簡単な手順を記載します。
（詳しいNuxtの機能については今後別記事で書いていこうかと思います。）

（ここで宣伝）

今回のNuxt関連の開発を始めとして、React・Next.js周りのフロントエンド開発や、
Node.js、Python、Go、Ruby・・・といったバックエンド開発、
AWSやAzure等のインフラ構築、またまたFlutterでのモバイルアプリ開発など
自分の得意な領域の開発で活躍したい方、ぜひ弊社の開発プロジェクトに参加しませんか？

あらゆる領域に関わる開発プロジェクトがあり、自分の強みを十分に活かせるプロジェクトを紹介できます！

興味のある方は是非下記フォームに回答して、弊社の開発プロジェクトに参加してください！
（詳細は回答いただいた後、ご連絡いたします）

👉 フォームはこちら

ご回答のほど、お待ちしております！

Nuxtとは？

Nuxtは、Vue.jsを基盤に、以下のような機能を標準装備しています。

• SSR（サーバーサイドレンダリング）： 初回表示時にサーバー側でHTMLを生成するため、検索エンジン対策（SEO）やパフォーマンスに有利
• 静的サイト生成（SSG）： SPAだけでなく、ビルド時に静的ファイルを出力してデプロイできるため、CDNでの配信が容易
• 自動ルーティング： pagesディレクトリ内にVueファイルを置くと、自動的にルートが生成される
• 豊富な設定オプション： nuxt.config.jsでメタ情報、プラグイン、モジュールなどを簡潔に管理可能

これにより、ルーティングやSSR対応を自前で設定する手間が省け、よりコアの機能開発に集中できます。

Nuxtを始めるための手順

前提

あらかじめNode.js（LTS版推奨）をインストールしておきましょう。
また、ここからはNuxt 3系前提でお話しします。

1. プロジェクトの作成

Nuxt CLI（npx nuxi init）を使用して、新しいNuxtプロジェクトを初期化できます。

npx nuxi init my-nuxt-app
cd my-nuxt-app
npm install

2. 開発サーバーの起動

以下のコマンドで開発サーバーを起動します。

npm run dev

http://localhost:3000にアクセスすれば、Nuxtのウェルカムページが表示されます。

ディレクトリ構成の基本

Nuxtでは、以下のようなディレクトリ構成が基本です。

• pages/：ここにVueファイルを置くと、対応するURLパスが自動的に生成される
• layouts/：共通レイアウトを定義できます。ヘッダーやフッターなど、複数ページで使うUIをまとめるのに便利
• components/：再利用可能なVueコンポーネントを配置
• plugins/：サーバーやクライアントで使いたいプラグインを登録
• nuxt.config.js：メタ情報、プラグイン、ビルド設定など、Nuxt全体の設定を行う

まず上記の構成とその意味を押さえておけば問題ないでしょう。

初期ファイル（ app.vue ）

インストール直後、 app.vue は下記のようなコードになっているはずです。

app.vue

<template>
  <div>
    <NuxtRouteAnnouncer />
    <NuxtWelcome />
  </div>
</template>

<NuxtRouteAnnouncer /> や <NuxtWelcome /> の意味はこの記事では割愛しますが、上記のコードがNuxtのウェルカムページを出力します。

まずはこのファイルを修正していくところからスタートになるかと思います。

ルーティングのしくみ

pagesディレクトリに以下のようなファイルを置くとします。

pages/
  index.vue       -> "/" ルート
  about.vue       -> "/about"
  blog/
    index.vue     -> "/blog"
    [id].vue      -> "/blog/:id"

これらのファイルが自動的に対応するルートを生成します。[id].vueのような動的セグメントを使えば、/blog/123など任意のIDでアクセス可能なページが作れます。

面倒なルーティング設定ファイルを書く必要がないため、ルート管理がとてもシンプルです。

ルーティングしてみよう

まずは、 app.vue を下記のように修正します。

app.vue

<template>
  <div>
    <NuxtPage />
  </div>
</template>

ルーティングのために <NuxtPage /> を入れる必要がございます。

そして、 pages/index.vue を作成し、中身を下記のようにします。

pages/index.vue

<template>
  <div>
    <h1>Hello, world!</h1>
  </div>
</template>

そうして、再度http://localhost:3000 にアクセスすると、「Hello, world!」が画面に出力されるかと思います。

pages/page1.vue を作成し、中身を下記のようにすれば、、

pages/page1.vue

<template>
  <div>
    <h1>これはpage 1です。</h1>
  </div>
</template>

http://localhost:3000/page1 にアクセスすると、「これはpage 1です。」が画面に出力されます。

まとめ

Nuxtの始め方について、限りなく簡単に記載しました。Nuxtをこれから始めようと思っている人は参考にしていただければと思います。

今後、もっと込み入った機能の話やそもそもの仕組みの話を別記事でできればと思います！

おわりに

繰り返しになりますが、弊社ではフリーランスエンジニアの方を募集しております！

熱意を持って新しいプロジェクトに挑戦したい方、様々な大規模開発プロジェクトに興味のある方は、下記フォームにてあなたの経歴をご回答ください！

👉 フォームはこちら

たくさんのご応募、お待ちしております！