Nuxt独自

【Nuxt.js】Nuxt文法編:generateプロパティ

前置き

公式: https://ja.nuxtjs.org/api/configuration-generate/
静的ページを作成するgenerateプロパティ🌟
contentfulのブログ記事を
静的に生成したい場合にも便利です😉💕
この記事の1番下にサンプルurlとコードを貼っておきます!

静的ページのメリットと
generateプロパティの使い方を解説します🙋‍♀️


静的サイトのメリット

既に多くの記事で題材にされているため
あまり細かく書きませんが
主なメリットはこちらです!

❤️ 予め生成されいるので表示が早くなる。
(SEOがよくなる)
❤️ 記事ごとにmeta, title, ogpが変更できる

動的サイトとの違いなど、
もっと細かく知りたい方は
こちらが参考になりますよ👀
https://www.itra.co.jp/webmedia/static-dynamic-difference.html


generateプロパティの使い方

静的ページごとにtitleを設定してみます🌟
nuxt.config.jsでは全体の設定を、
静的ページではそれぞれのtitleを指定します。


コード

modessr(universal)にしないと
ページごとの設定が反映されません。

routes_index.vue
静的ページにするので
名前は適当に🍎

) pages

静的ページでtitleを指定しなおします。


まとめ

これだけでSEO対策が
しやすくなるのは嬉しいですね🌟
管理もページごとにできるのも
良いポイントです👍💖

contentfulを静的ページに
した場合はこんな感じです♪
https://www.netlify.com/blog/2020/04/20/create-a-blog-with-contentful-and-nuxt/
(一番最後に載っています!)

nuxt.config.js ファイルで、下のような記事を自動で作ってくれるようにするために…

まずはcontentfulと繋げて、、

実際に作る部分を書いて完成!!

-Nuxt独自

© 2024 aLiz Nuxt