Nuxt Nation カンファレンスが開催されます。11月12日～13日にご参加ください。
54.8K

はじめに

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

Nuxtは、Vue.jsを使用して、タイプセーフで高パフォーマンス、かつ本番環境に対応したフルスタックWebアプリケーションとWebサイトを作成するための、直感的で拡張可能な方法を提供する、無料のオープンソースフレームワークです。

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

Nuxtはベンダーロックインがなく、エッジを含むあらゆる場所にアプリケーションをデプロイできます。

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

自動化と規約

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

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

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

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

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

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

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

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

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

サーバーエンジン

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

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

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

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

本番環境対応

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

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

モジュール化

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

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

アーキテクチャ

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

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

インストール

オンラインスターターを使用してNuxtをすぐに使い始めるか、ターミナルを使用してローカルで開始します。