microCMS

2021-07-20

2021-07-20

microCMS + Next.js のブログ構築にトライしてみている。 ひとまず、microCMS公式のチュートリアル記事を写経して、動作させるところまでは到達。 ただ、「ここは何をしてるのか分からん」とか「この書き方でなんでこうなるのか理解できん」なところが何箇所かあるので、Next.js のリファレンスにも立ち戻って、理解できる形に書き直したりしている。 getStaticProps とか getStaticPaths とか、間隔が空いてうろ覚えになってしまった。

Next.jsの日付のフォーマットを整える

Next.jsの日付のフォーマットを整える

日付をフォーマットするために、date-fns ライブラリを使用します。まずはインストールします。 npm install date-fns components/date.js ファイルに Date コンポーネントを作成します。 import { parseISO, format } from 'date-fns'export default function Date({ dateString }) { const date = parseISO(dateStrin

Next.js×microCMSでポートフォリオサイトを作った

Next.js×microCMSでポートフォリオサイトを作った

はじめに少し前にNuxt.jsで作成したポートフォリオサイトをNext.jsに作りなおしました。 上記の記事では、Nuxt.js → Next.jsへの移行の話がメインだったので、作成したポートフォリオサイトの技術構成等をnoteで書いていこうかなと思います。 技術構成・Next.js ・TypeScript ・Chakra UI ・microCMS ・Vercel デザインUI コンポーネントライブラリにChakra UIを使用しています。 Modalなど素

microCMS+Nuxt.jsのブログ個別ページでの前後記事へのリンク設定

microCMS+Nuxt.jsのブログ個別ページでの前後記事へのリンク設定

「_id.vue」 の <script>タグ全体は、下のような感じです。 <script>import axios from 'axios'export default { async asyncData({ $config, params, error }) { try { const { data } = await axios.get(`${$config.apiUrl}/blog/${params.id}`, { headers: { 'X-

Next.jsとmicroCMSでシンプルなポートフォリオサイトを作った

Next.jsとmicroCMSでシンプルなポートフォリオサイトを作った

今年のはじめにNext.jsとmicroCMSをつかって自分のポートフォリオサイト的なものを作ってみました。 Next.jsのチュートリアルほぼそのままで作れるので、自分でそういうサイト作ってみたいなーと思っている人にはオススメです。 (まぁ今の時代NoCodeで十分な気もする) せっかくなのでやったことをまとめておきます。 完成品↓ はじめに:やりたいこと 要件としては、 ・独自ドメインを使った自己紹介サイトの作成がしたい ・ポートフォリオサイトらしく自分の経験(

29
Next.js+Vercel+microCMSでブログを作る

Next.js+Vercel+microCMSでブログを作る

どうも。 Next.jsとmicroCMSでブログを作ったのでその時の話を残しておこうと思います。 作っていく上で色々とハマりポイントがあったことや、実際にmicroCMSやNext.jsをガッツリ使った思いなど残していこうと思います。 今回作ったもの ・microCMSを使ってAPI経由でデータを取得する。 ・新着一覧・カテゴリ一覧・各ページ・カテゴリページ(ページネーション有りのページ)一覧を作る。 ・getStaticPathsとgetStaticPropsをつかって

microCMSで管理者サーバーとバックエンドサーバーを無料構築!

microCMSで管理者サーバーとバックエンドサーバーを無料構築!

「たかがブログサイト作るのに管理者サーバーやバックエンドサーバーも構築しなければならないなんて…」 安心してください。それ、作らなくて良いですよ。 外部のサービスを利用すれば、サイト上で設定するだけでサーバーが使えます。 「でもお高いんでしょ?」 いいえ、無料で使えます。 はじめに こんにちは。ナオツです。 前回はとてもやっかいな話になってしまいました。 フロントエンドサーバーが公開用と管理者用に分割されてしまったからです。 「え、、2個もサイト作るの??」 「おまけ

【超初心者向け】「Micro CMS」のはじめ方。

【超初心者向け】「Micro CMS」のはじめ方。

このnoteの対象者: - Headless CMSというのを聞いたことがある(あるいは勉強したい) - エンジニアではないので、専門用語難しい - 簡単にHeadless CMSの使い方を知りたい。 『Headless CMSとは?』『Micro CMSとは?』『Micro CMSの利用方法』 - Headless CMSとは Headless CMSとは何か、Micro CMSの方が書いているこちらのブログがわかりやすかったです。 - Micro CMSとは 日

16
無事に1周年を迎えることができました

無事に1周年を迎えることができました

こんにちは私です。いつからか、腕立て伏せなどで手を床につくと中指の付け根が痛く結局グーの手で筋トレに励んでいます。 そんな時私はいつもGoogle先生へこんな風に聞きます。 「手の甲 痛い」 そこから画像検索で似たような症状を説明してそうな画像のリンク先へ行くと大体すぐ当たりに辿り着きます。 これが【検索力】です。 ポイントは接続詞を使用せずに、単語で区切って名詞化をする ぜひ試してみてくださいね。 1周年を迎えご報告があります さて、本題ですが今月5日(202

4
microCMS公式ブログを読んでチュートリアルの機能を実装してみた

microCMS公式ブログを読んでチュートリアルの機能を実装してみた

gatsbyに移行しようとしたらnuxtでハマったポイントの解説があったので出戻った件 (--; 読むだけじゃなく、ハンズオンもちょいちょいやってみました。 所感を交えてお話します。 # 成果物 - 動くもの:https://nomuraya-microcms-tutorial.netlify.app/ - ソースコード: https://github.com/shimajima-eiji/Hosting/issues/29 - APIスキーマ(接続情報): https