Next.jsの記事一覧

All Tags
Cover Image for ブログに数式を使えるようにした

ブログに数式を使えるようにした

このブログは数式を使っても表示がされなかったので、対応した

Cover Image for next/image で Masonry レイアウトを実現する

next/image で Masonry レイアウトを実現する

next/image で Masonry レイアウトを実現するのは難しい という記事を書いたがレベルが上がって実現できるようになったので訂正記事を書く

Cover Image for next/image で Masonry レイアウトを実現するのは難しい

next/image で Masonry レイアウトを実現するのは難しい

ウソみたいに簡単! Tailwind CSSのみを使用してMasonryレイアウトを実装する方法 をみて、ブログの記事一覧を Masonry レイアウトにしようと思ったが next/image で実現するのは難しかったので img タグで普通に実装した。

Cover Image for indexing API を使ってNext.jsで作ってるブログの全ページをGoogleの indexに登録する

indexing API を使ってNext.jsで作ってるブログの全ページをGoogleの indexに登録する

Next.jsで作ってるブログの記事がGoogleにindexされてないので困っている。ひとつづつ Search Console からクロールリクエストをあげても、らちが開かないのでまとめて index に登録されるように処理する。

Cover Image for Next.jsで作ってるブログにリッチなリンクを貼れるようにした

Next.jsで作ってるブログにリッチなリンクを貼れるようにした

url 貼って紹介したい時とか、amazonのリンク貼りたい時とかにただのリンクだと面白くないので、twitterのカードUI的なリッチなリンクを貼れるようにする

Cover Image for ブログ内のリンクを Next.js の <Link> や Embed に変換したい

ブログ内のリンクを Next.js の <Link> や Embed に変換したい

このブログ内のリンクを Next.js の <Link> や Twitter の Embed に変換したいので対応した

Cover Image for next/image を利用した画像最適化で CWV の数値を改善する

next/image を利用した画像最適化で CWV の数値を改善する

CWVの数値が悪かったので改善する。imgurにあげている画像を参照しているが、最適に表示できていなかったのでCWVの数値が悪い。next/imageの機能を使って最適化してみる

Cover Image for rehypeで生成したhtmlでiframeが表示されるようにする

rehypeで生成したhtmlでiframeが表示されるようにする

markdownからrehypeで生成したhtmlには直接記述したiframeが表示されないので表示されるようにする

Cover Image for OGPを設定してSNSでシェアされた時にプレビューが表示されるようにする

OGPを設定してSNSでシェアされた時にプレビューが表示されるようにする

TwitterやFacebookなどでシェアされた場合にカードUIで表示されるようにOGPを設定する

Cover Image for Medium から export したデータを移行する

Medium から export したデータを移行する

medium + Route53 から gatsby cloud + Route53 に変更した。を読んで、medium からデータを移行できることがわかったので、このブログに移行する。

Cover Image for feed でブログにRSSフィードを追加する

feed でブログにRSSフィードを追加する

RSSフィードを追加した際の手順をメモしておく

Cover Image for next-sitemap でブログにサイトマップを生成する

next-sitemap でブログにサイトマップを生成する

サイトマップを導入した際の手順をメモしておく

Cover Image for vercelにデプロイしているブログに独自ドメインを設定する

vercelにデプロイしているブログに独自ドメインを設定する

このブログに独自ドメインを設定した際の手順をメモしておく

Cover Image for blog-starter-typescript で作ったプロジェクトにstorybookを導入する

blog-starter-typescript で作ったプロジェクトにstorybookを導入する

前回の続き blog-starter-typescript で作ったプロジェクトにstorybookを導入する

Cover Image for 技術ブログのコードフロックにシンタックスハイライトを導入する

技術ブログのコードフロックにシンタックスハイライトを導入する

前回の続き blog-starter-typescript で作った技術ブログのコードブロックにシンタックスハイライトを導入する

Cover Image for 技術ブログの記事Styleをいい感じにする

技術ブログの記事Styleをいい感じにする

前回の続き blog-starter-typescript で作った技術ブログの記事のスタイルが微妙なので、いい感じにStyleを当て直す

Cover Image for blog-starter-typescript を使って技術ブログを作り直してみた

blog-starter-typescript を使って技術ブログを作り直してみた

Next.js + Tailwind UI を使うとたった6時間で技術ブログのプロトタイプを作れるを参考に技術ブログを作り直してみる。そのためにやったことをメモする

Cover Image for Amplify + Next.js でSSRするチュートリアルやってみた

Amplify + Next.js でSSRするチュートリアルやってみた

という記事をZennで書いてみた