前置き
公式: 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プロパティの使い方
![](https://i1.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/09/スクリーンショット-2020-09-29-15.44.35.png?resize=458%2C146&ssl=1)
静的ページごとにtitle
を設定してみます🌟nuxt.config.js
では全体の設定を、
静的ページではそれぞれのtitle
を指定します。
コード
mode
はssr(universal)
にしないと
ページごとの設定が反映されません。
routes
は_index.vue
を
静的ページにするので
名前は適当に🍎
1 2 3 4 5 6 7 8 9 10 11 |
export default { mode: 'ssr', generate: { routes: [ '/abc', ] }, head: { title: '全体共通のタイトル', }, } |
) pages
静的ページでtitle
を指定しなおします。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<template> <div class="page"> <p>静的ページ</p> </div> </template> <script> export default { head: () => ({ title: '変更', }) } </script> |
![](https://i0.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/09/スクリーンショット-2020-09-29-15.44.28.png?resize=612%2C650&ssl=1)
![](https://i1.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/09/スクリーンショット-2020-09-29-15.44.35-1.png?resize=458%2C146&ssl=1)
まとめ
これだけでSEO対策が
しやすくなるのは嬉しいですね🌟
管理もページごとにできるのも
良いポイントです👍💖
contentfulを静的ページに
した場合はこんな感じです♪
https://www.netlify.com/blog/2020/04/20/create-a-blog-with-contentful-and-nuxt/
(一番最後に載っています!)
nuxt.config.js ファイルで、下のような記事を自動で作ってくれるようにするために…
1 2 3 4 5 6 7 8 9 |
export default { generate: { routes: [ '/post1', '/post2', '/post3' ] }, } |
まずはcontentfulと繋げて、、
1 2 3 4 5 |
const contentful = require("contentful"); const client = contentful.createClient({ space: process.env.CONTENTFUL_SPACE, accessToken: process.env.CONTENTFUL_ACCESSTOKEN }); |
実際に作る部分を書いて完成!!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
export default { ... generate: { routes() { return Promise.all([ client.getEntries({ content_type: "blogPost" }) ]).then(([blogEntries]) => { return [...blogEntries.items.map(entry => entry.fields.slug)]; }); } } } |