Next.js×ContentfulでJamstackなブログを作りました。

はじめまして。

きつねと申します。今回Next.jsとContentfulでJamstackなブログサイトを制作したため、記事にしてみます。

全体のソースコードはgithubに公開しています。

制作経緯は、モダンなJavaScriptの技術学習のアウトプットと、一つ自分のメディアを持っておくのも悪くないなという気持ちから制作しました。基本的にはYoutube動画を参考に制作しました。

The net ninjaさんの動画





Codevolutionさんの動画





英語のハードルはありますが、非常に優良な動画だと思います。 コードを書きながら解説の英語ということと、多分ネイティブじゃない人も視聴することを想定されているので、少し聞きやすい英語で話してくれている気はします。何とかくらいついていきました。。

ソースコードも少しあげておきます。

getStaticPropsとAPI連携

全体のコードはこちらのgithubに公開しています。

export async function getStaticProps() {
  const client = createClient({
    space: process.env.CONTENTFUL_SPACE_ID,
    accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,  });
  const res = await client.getEntries({
    content_type: 'blog',
    order: '-sys.createdAt',
    limit: 6,  });
  return {
      props: {
      blogs: res.items 
   }
  };
}

トップページの新着記事一覧生成のためのコードですが、 Next.js特有の静的HTMLを生成するための関数getStaticPropsの中でapiキーを使って投稿データを取得しています。

こちらで取得したデータをJavaScriptのmap関数なんかで頑張ってjsxの中に反映すると、投稿データをレンダリング後の最終HTMLがビルド時に生成されて、SSGな構成にできあがると。

これと同じ要領で記事詳細ページも作れます。

難しかったのはサイト内検索と、ページネーションですがこちらはまた後日記事にしたいと思います。

ご挨拶

ここまでお読みいただき、ありがとうございました！

初回は技術ブログのようになってしまいましたが、正直技術面のことを発信できるレベルにないですので、 日常的なことも含めてざっくばらんなテーマでこのブログを運用するつもりです。

またご訪問頂けましたら幸いです。