はじめに

Nuxt の目標は、優れた開発者体験を念頭に置き、ウェブ開発を直感的でパフォーマンスの高いものにすることです。

Nuxt は無料のオープンソースフレームワークです。直感的で拡張可能な方法で、Vue.js を使用して、型安全で高性能な本番環境レベルのフルスタック Web アプリケーションや Web サイトを作成できます。Vue.js.

開発中はホットモジュールリプレースメント、本番環境ではデフォルトでサーバーサイドレンダリングによる高性能なアプリケーションを楽しみながら、最初から .vue ファイルの記述を開始できるように、すべてを構築しました。

Nuxt にはベンダーロックインがないため、アプリケーションを どこにでも、エッジにも デプロイできます。

ブラウザで Nuxt を試したい場合は、オンラインサンドボックスのいずれかで試す ことができます。

自動化と規約

Nuxt は規約と独自のディレクトリ構造を使用して、反復的なタスクを自動化し、開発者が機能のプッシュに集中できるようにします。設定ファイルは、デフォルトの動作をカスタマイズおよびオーバーライドできます。

  • ファイルベースルーティング: app/pages/ ディレクトリ の構造に基づいてルートを定義します。これにより、アプリケーションの整理が容易になり、手動でのルート設定が不要になります。
  • コード分割: Nuxt はコードを自動的に小さなチャンクに分割するため、アプリケーションの初回ロード時間を短縮できます。
  • すぐに使えるサーバーサイドレンダリング: Nuxt には SSR 機能が組み込まれているため、別途サーバーを設定する必要はありません。
  • 自動インポート: Vue のコンポーザブルとコンポーネントをそれぞれのディレクトリに記述し、ツリーシェイキングと最適化された JS バンドルのメリットを享受しながら、インポートせずに使用できます。
  • データ取得ユーティリティ: Nuxt は、SSR 互換のデータ取得とさまざまな戦略を処理するためのコンポーザブルを提供します。
  • 設定不要の TypeScript サポート: 自動生成された型と tsconfig.json を使用して、TypeScript を学習せずに型安全なコードを記述できます。
  • 構成済みのビルドツール: 開発中のホットモジュールリプレースメント (HMR) をサポートし、ベストプラクティスを組み込んだ本番環境向けのコードをバンドルするために、デフォルトでViteを使用しています。

Nuxt はこれらを処理し、フロントエンドとバックエンドの両方の機能を提供するため、重要なこと、つまり Web アプリケーションの作成 に集中できます。

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

Nuxt には、デフォルトでサーバーサイドレンダリング (SSR) 機能が組み込まれており、自分でサーバーを設定する必要はありません。これにより、Web アプリケーションに多くのメリットがあります。

  • 初回ページロード時間の高速化: Nuxt は完全にレンダリングされた HTML ページをブラウザに送信するため、すぐに表示できます。これにより、特に低速なネットワークやデバイスでは、知覚的なページロード時間が高速化され、ユーザーエクスペリエンス (UX) が向上します。
  • SEO の改善: 検索エンジンは SSR ページをより適切にインデックスできます。これは、HTML コンテンツがすぐに利用可能であり、クライアント側でコンテンツをレンダリングするために JavaScript を必要としないためです。
  • 低電力デバイスでのパフォーマンス向上: クライアント側でダウンロードおよび実行する必要がある JavaScript の量が削減されるため、重い JavaScript アプリケーションの処理に苦労する可能性のある低電力デバイスに有利です。
  • アクセシビリティの向上: コンテンツは初回ページロード時にすぐに利用できるため、スクリーンリーダーやその他の支援技術に依存するユーザーのアクセシビリティが向上します。
  • キャッシュの容易化: ページはサーバー側でキャッシュできるため、コンテンツを生成してクライアントに送信するのにかかる時間を短縮することで、パフォーマンスをさらに向上させることができます。

全体として、サーバーサイドレンダリングは、より高速で効率的なユーザーエクスペリエンスを提供し、検索エンジン最適化とアクセシビリティを向上させることができます。

Nuxt は多用途なフレームワークであるため、nuxt generate を使用してアプリケーション全体を静的ホスティングに静的にレンダリングしたり、ssr: false オプションで SSR をグローバルに無効にしたり、routeRules オプションを設定してハイブリッドレンダリングを活用したりすることができます。

詳細は Nuxt レンダリングモード をご覧ください。

サーバーエンジン

Nuxt サーバーエンジンはNitro新しいフルスタック機能をアンロックします。

開発では、サーバーコードとコンテキスト分離のために Rollup と Node.js ワーカーを使用します。また、server/api/ のファイルを読み取り、server/middleware/ からサーバーミドルウェアを読み取ってサーバー API を生成します。

本番環境では、Nitro がアプリとサーバーを 1 つのユニバーサル .output ディレクトリにビルドします。この出力は軽量です。縮小され、Node.js モジュール (ポリフィルを除く) はすべて削除されています。この出力は、Node.js、サーバーレス、ワーカー、エッジサイドレンダリング、純粋な静的など、JavaScript をサポートするあらゆるシステムにデプロイできます。

詳細は Nuxt サーバーエンジン をご覧ください。

本番環境対応

Nuxt アプリケーションは、Node または Deno サーバーにデプロイしたり、静的環境でホストするためにプリレンダリングしたり、サーバーレスおよびエッジプロバイダーにデプロイしたりできます。

詳細は デプロイメントセクション をご覧ください。

モジュラー

モジュールシステムにより、カスタム機能やサードパーティサービスとの統合で Nuxt を拡張できます。

詳細は Nuxt モジュールコンセプト をご覧ください。

アーキテクチャ

Nuxt はさまざまなコアパッケージで構成されています。:

Nuxt の機能と各パッケージの範囲を完全に理解するために、各概念を読むことをお勧めします。