【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を指定します。

コード

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

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

export default {
  mode: 'ssr',
  generate: {
    routes: [
      '/abc',
    ]
  },
  head: {
    title: '全体共通のタイトル',
  },
}

export default {

mode: 'ssr',

generate: {

routes: [

'/abc',

]

head: {

title: '全体共通のタイトル',

}

) pages

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

<template>
  <div class="page">
    <p>静的ページ</p>
  </div>
</template>

<script>
export default {
  head: () => ({
    title: '変更',
  })
}
</script>

<p>静的ページ</p>

</div>

</template>

export default {

head: () => ({

title: '変更',

})

}

</script>

まとめ

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

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

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

export default {
  generate: {
    routes: [
      '/post1',
      '/post2',
      '/post3'
    ]
  },
}

export default {

generate: {

routes: [

'/post1',

'/post2',

'/post3'

]

}

まずはcontentfulと繋げて、、

 const contentful = require("contentful");
  const client = contentful.createClient({
    space: process.env.CONTENTFUL_SPACE,
    accessToken: process.env.CONTENTFUL_ACCESSTOKEN
  });

const contentful = require("contentful");

const client = contentful.createClient({

space: process.env.CONTENTFUL_SPACE,

accessToken: process.env.CONTENTFUL_ACCESSTOKEN

});

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

export default {
  ...
  generate: {
   routes() {
     return Promise.all([
       client.getEntries({
         content_type: "blogPost"
       })
     ]).then(([blogEntries]) => {
       return [...blogEntries.items.map(entry => entry.fields.slug)];
     });
   }
  }
}

export default {

...

generate: {

routes() {

return Promise.all([

client.getEntries({

content_type: "blogPost"

})

]).then(([blogEntries]) => {

return [...blogEntries.items.map(entry => entry.fields.slug)];

});

}