Souta Tech Blog.

Next.js + microCMSでJamstackなテックブログを作り始めた話投稿日: 2022年 1月26日

自己紹介

初めまして!

記念すべき、一つ目の記事となります!
Acvationという肌悩みに悩む人を結びつけるプラットフォームを開発しているSoutaと言います。
まず、この記事をご覧いただきありがとうございます。

趣味

よく友達とサッカーをやったり筋トレをしたりしています。🥩
結構、体育会のかもしれません(笑)
自分のマインドは努力すればなんでもできるみたいな考えがとても多いです。

どんな人物か?

最近友達に「努力家なカメレオン」と言われました🦎
どんな環境でも結果を残すことができる。そしていつでも安定したパフォーマンスを目指しています。

背景

マインド

自分の考えとして
人から学び、人に伝える。それが1番のインプット」だと思っています。
理由として、自分で学んだ知見を人に説明するためにより深く知る。そのことで自分の頭の中の考えていること整理することができるようになり
すんなり自分の学んだことが吸収される❗️
そんなこと最近考えるようになりました。
そうすると自然に自分の学びや経験の知見を広めたい。そしてさらに自分の成長につなげていきたい
そんな機会になると思ったからです。

技術的な話

多分この記事を読んでくれている方はこちらからが気になる部分だと思っています。🤗
※自分の間違っている認識があるかもしれません。そこの部分はご了承ください。

使用技術

  • TypeScript, FW: Next.js
    • TypeScriptは即決だったのですが、フレームワークに関してはGatsby.jsNuxt.jsとでかなり迷いました。
    • Gatsby.jsとの比較
      • GraphQL使える ← API開発するときに使っていてかなり使いやすかった。
      • エコシステム周りがブログサイト向き ← CMS向きが多いなど
      • ネットで出てくるテーマは大体Gatsby ← これはどうしようもありません。参考にさせていただく立場なので
    • Nuxt.jsとの比較
      • Vue使える ← よく使ったことないので使ってみたい気持ちはあった。
      • エコシステム周りが推奨品が結構あったりする ← reactでも問題なし◎
      • Typescript周り ← 実際によく触れたことないからわからない


みたいな感じで考えていました。
それで結局SEOできて使い慣れているNext.jsにしました!

// create static paths
export const getStaticPaths: GetStaticPaths = async () => {
  const data = await client.get({ endpoint: "blog" });
  const blogs = data.contents as Blogs;


  const paths = blogs.map((blog) => `/blog/${blog.id}`);
  return { paths, fallback: false };
};

// create props data
export const getStaticProps: GetStaticProps = async (context) => {
  const id = context.params.id;
  const blog = (await client.get({ endpoint: "blog", contentId: id })) as Blog;


  return {
    props: {
      blog: blog,
    },
  };
};


環境周り

まず、最初にどのようなシステム構成にするか悩んだんですが、

  • DBで管理する ← 記法的に静的サイトであり、ゆえにあまりリクエストサーバーに送ることないからバックエンド側は不要かな
  • Dockerで管理 ← これは自分以外も開発者がいればやろうと思いましたが、いないので今後もし時間があればやる程度の感じ
  • NoSQL ← できればデータベースをも不必要としたい。ブログなので単純なデータ管理ができればいい
  • デプロイ時のクラウド周り(AWS, GCP, Azure) ← 今まで使ってきて便利だとはわかりつつNext.jsだしレンダリング周りの設定もしてくれるvercelでいいのでは?

みたいな感じで結局Vercelになりました(笑)

CMS周り(microCMS)

シンプルに管理しやすく最小構成で開発をしたかった。
その部分を考えると使ったことのないCMSをやってみて学んでいくといいかもしれない ← 実際にこれで構築してみましたが扱いやすかったので後悔はないです⚽️

苦労した部分

圧倒的にデザイン周りの部分です!!!
というのも自分自身、あまりデザインの経験がなくいつも逃げてばかりでありました。。。
実はこのスタイルもtailwindCSSを使っているのですが、テンプレートを参考に作っているので正直一部おかしい部分があるかもしれません。(そこの部分があれば報告ください🙇‍♂️)
しかし、、、自分もこれをきにデザインの部分もしっかりと学んでいこうと思いました。

こちらの記事は随時更新していきます......!