Nuxt.jsでブログサイトを作りました。

こんにちは。今日は、Nuxt.jsで作ったブログサイトのソースコードの紹介と感想をシェアしたいと思います。

ソースコードはこちらのGitHubリポから確認してください。

サイトはこんな感じです。リスポンシブでモバイルにも対応しています。

UIはPrimeVueというNuxtにも対応しているコンポーネントを使用しました。

またアプリがデプロイできた際にアクセスできるドメインを紹介したいと思います。

Nuxt.jsとは

NuxtはJavaScriptのSPAフレームワークのVueをもとに作られたフレームワークです。Nuxt.jsの最大の特徴のひとつとしてVueでできなかったSSR（サーバーサイドレンダリング）を可能にすることができます。

これによりGoogleなどのウェブクロウラーがサイトの採点をする際にデータを返してあげられるので検索結果のランキングに上がりやすいという事になります。

Nuxtと似たようなものでReactのNext.jsというものもあるので比較してみるのも良いかもしれません。

Nuxt.jsでVueの時には意識しづらかったクライアント側のレンダーとサーバー側のレンダーの違いを意識せざるべき状況に置かれることが多々あり、良い勉強になりました。

ブラウザで表示されるNuxtアプリはすべてサーバー側でレンダーした後に見れるものになります。

それをHighlight.jsなどのwindowオブジェクトを使う関数などを使用しようとした場合に、サーバー側ではwindowオブジェクトがつかめないエラーが発生してしまうため、 Nuxtのアプリが準備された後にブラウザ側で実行する関数などを呼び出すようにデバッグすることができました。

NuxtはVueよりも簡単だなと思った部分があります。

当たり前ですが、VueとNuxtの基本がわかっていないとなぜこうなるのかわからないまま、なぜかできてしまう部分もあるので、調べてちゃんと理解してからNuxtのやり方を導入しないと後からデバッグが難しくなります。

SSRが不要ならNuxtをわざわざ使う必要はないと思いました。特に苦労した部分を記載します。

layoutディレクトリでカスタマイズしたレイアウトのプリセットを作れるがlayoutディレクトリのネスト化したファイルは使えない。（例：layout/mobile/default、例:layout/desktop/portfolio）みたいなのは無理。これはあったらいいなくらいですが。。
他のライブラリのセットアップが難しい場合がある、Axiosをインポートしてもエラーになってしまいました。最終的にはNuxtについてくるフェッチのメソッドで対応しました。これは使いやすかったです。
デプロイする際にNitroのウェブサーバーを使ってプロキシさせないといけない。そんなに悪くないですが、ちょっと面倒でした。

ではGitHubに上げたようにNuxtのファイル構成を見てみます。

assets:Nuxtで指定されたフォルダです。ここにフォントやグローバルで使いたいCSSを格納します。

components：これもNuxtで指定されてフォルダです。ここにコンポーネントを入れるとインポートの文を書かずにグローバルで使うことができます。書き方はcomponents/base/header.vueだと<BaseHeader>のようにフォルダ名とファイル名の頭が大文字になります。

layouts：レイアウトを作成します。<slot/>を使って各スロットにダイナミックなデータを指定し、それ以外のレイアウトを作成できます。deafault.vueを作成するとデフォルトでそのレイアウトを使ってくれるようになります。

pages:index.vueを作成するとそれがランディングのページになります。ここにhome.vueを作成すると〇〇.com/homeのURLにアクセスすると自動でhome.vueを見に行くようになります。便利ですね。

plugins：PrimeVueなどの外部ライブラリの設定ファイルをここに置きます。

public：画像やアイコンを置きます。assetsと似ていますが、機能的に違うので確認しておいてください。

以上がNuxtで指定されたフォルダです。他にも使えるフォルダ名があると思うので是非確認してください。

Nuxtの<script>タグにuseServerSeoMeta()などを設定して各ページにダイナミックなmetaタグを設定することができます。

ここら辺は、まだテスト中なのでまた、詳しいことが理解でき次第、紹介していきます。

では、お疲れ様でした。