利用して、ブログを作成する手順を紹介します。デプロイして、静的生成(SSG)でページを表示します。3.3.0概要Nuxt3でプロジェクトを作成し、Newtのコンテンツ情報を取得できるようにします。/articles/:slug。/articles/article-1)を作成し、ローカル環境で表示できるようにします。続いて、Vercelにデプロイし、静的生成でページを表示します。プロジェクトの作成はじめに、Nuxt3のセットアップを行います。以下のコマンドでプロジェクトを作成します。好きな名前を入力しましょう。いう名前で作成します。<project-name>コマンドを入力すると、以下の質問を聞かれるので、お好きな設定を選びましょう。選択)以下のように表示されます。dev作成したプロジェクトに移動して、開発サーバーを立ち上げます。yarnを利用する場合は以下のようになります。アクセスして、以下のような画面が表示されることを確認します。開発環境でも型のチェックを行うために、以下の設定を行います。開発環境で型のチェックを行わない場合は、1-2のステップを飛ばして構いません。devDependenciesとしてインストールします。typescript最新のvue-tscでは型チェックの際に問題が発生する可能性があるため、ここではvue-tscのv1を利用しています。ドキュメントをご確認ください。オプションを有効にします。}8})これで開発環境でも型のチェックができるようになりました。ドキュメントをご確認ください。Newtのセットアップ次にNewtにコンテンツとAPIトークンを用意し、コンテンツの取得を行うための準備を行います。Appを追加する「Appを追加」をクリックして「テンプレートから追加」を選択します。表示されるテンプレートの中から「Blog」を選択して、「このテンプレートを追加」をクリックします。テンプレートが追加されると、「投稿データ」「タグデータ」「著者データ」が追加されます。UID・モデルUIDを確認するスペースUIDは「スペース設定」から確認できます。この値は3-1で環境変数として定義します。これらの値は、4-4や5-1で投稿情報を取得する際に利用します。Tokenを作成する続いて、APIリクエストに必要なトークンを発行します。Tokenを作成します。名前と取得対象を決めて「作成」を押します。ここで作成したトークンの値は3-1で環境変数として定義します。利用することで、NewtのAPIをより簡単に利用できます。ここではSDKを利用して、NewtのAPIクライアントを作成します。利用して、環境変数を利用できるようにします。ファイルを作成し、2-2で確認したスペースUID、2-3で作成したトークンの値を定義します。以下を、実際の値で置き換えて定義してください。値に置き換えられます。これらの変数はサーバーサイドでのみ参照できる、プライベートな変数となります。ドキュメントをご確認ください。APIを利用するためのクライアントを定義します。プラグインはNuxtアプリケーションの初期化時に実行されます。デフォルトではサーバーサイド、クライアントサイド双方で実行されます。ディレクトリにあるファイルを自動的に読み込んで、Vueアプリケーションの作成時にロードします。いうサフィックスを付けると、サーバー側またはクライアント側でのみプラグインを読み込むことができます。いうファイルを作成します。}15})これで、Vueコンポーネント内から、Newtのクライアントを利用できるようになりました。ドキュメントをご確認ください。