Taka blog

プログラミングとか

Next.js

Next.jsでコードブロックにシンタックスハイライトで色を付ける

編集対象ファイルの全コード シンタックスハイライトを付ける上で変更するのは、root/pages/blog/[id].tsxファイルのみです。最初に、このファイルの例を貼っています。 import { client } from "../../libs/client"; import type { Article } from '../../t…

Next.js×TypeScript×microCMSで目次を作成する

Next.js×TypeScript×microCMSで目次を作成する方法をご紹介します。 例 : https://tkblog.netlify.app/blog/asbz5h_mr1h 目次を追加したい場合は、ブログの個別記事に当たるtsxファイルに記述します。 この記事の例では、/pages/blog/[id].tsxのコードを貼…

初心者がNext.js×TypeScript×microCMSでブログ作成

JavaScriptもNext.jsもTypeScriptもmicroCMSも初心者の私が、これらを組み合わせてブログを作成してみました。 ブログのリンク : https://tkblog.netlify.app/ ベースはmicroCMS公式ページ(https://blog.microcms.io/microcms-next-jamstack-blog/)に載って…

WSL2でNext.jsの環境構築とアプリケーション作成

wsl2環境で、0からNext.jsの環境構築とアプリケーションの作成まで行う方法をご紹介します。コマンドはそのままコピー&ペーストして使えるようになっているはずです。 npmとyarnをインストール takaittakait.hatenablog.com Next.jsアプリケーションを作成 T…