【Nuxt.js × Newt】Nuxt.jsとNewtでポートフォリオサイトをリニューアルしてみた
はじめに
今回はWordPressで制作・運用していたポートフォリオサイトを、CMSをNewt・フロントエンドをNuxt.jsでリニューアルしたので作業をまとめておこうと思います。ポートフォリオサイトは基本的に認証をかけていて一般に公開はしていないので、ここで公開することはできないのは残念ですが、、、
当ブログはReactのフレームワークであるNext.jsで構築したため、Next.jsとよく比較されるVueのフレームワークであるNuxt.jsでポートフォリオサイトを構築することにしました。
基本的には以下のNewt公式のチュートリアルを参考に機能面を実装しました。
公式のチュートリアルがしっかりしているので、こちらを参考にしていただければ簡単に実装することができます。
Newtには以下のようなさまざまなフレームワークのチュートリアルが用意されているので、こちらもぜひ参考にしていただければ幸いです。
- Nuxt
- Next
- Gatsby
- Astro
- SvelteKit
各フレームワークのチュートリアルは以下で確認できます。
主な使用技術
- nuxt: ^3.6.5
- typescript: ^5.1.6
- tailwindcss: ^3.3.3
- newt-client-js: ^3.2.6
今回の要件では、制作実績の一覧ページと制作実績の詳細ページの2パターンのテンプレートがあれば良いだけなので現状ライブラリは入れていません。見た目はTailwind CSSを使用して調整しました。
NuxtとNewtの連携は公式のチュートリアルで問題なく実装できるかと思うので、以下で一部補足を紹介します。
Newtのチュートリアルの補足
チュートリアル内でインターフェースを定義する際に、_id・title・slug・bodyのフィールドを定義していてその他のフィールドのIDはどこから参照すれば良いのか少し探すことになってしまったので、まとめておきます。
各フィールドの情報を確認する
Newt管理画面にて、以下の画像のように確認・編集したい「モデル」を選択してください。
こちらから各モデルで使用しているフィールドのID等を確認することができます。また、フィールドの追加やカスタムフィールドの作成ができるようです。
こちらでフィールドIDを確認して、インターフェースやselectパラメータに追記をして、取得するフィールドを操作してみてください。
また、APIで利用できるクエリパラメータに関して以下のページに記載がありましたので、カスタマイズする際に参考にしていただければ幸いです。
まとめ
今回はNuxt.jsとNewtでポートフォリオサイトをリニューアルした話を紹介しました。
公式のチュートリアルが整備されているので、特に話すこともなく、、、
手順通りに進めるだけで簡単に投稿型のページが実装できますので、ぜひお試しください！
Nuxt 3にTailwind CSSを導入する手順を以下の記事にまとめていますので、よければご覧ください。
執筆者：Nobu
1994年生まれ。
Webフロントエンドエンジニアは3年目。
コーヒーと読書が好きです。主にコーヒー豆の紹介や読んだ本の紹介をしていこうと思います。
