flabaka.com

zenn-markdown-htmlを使ってみる

前回 rehype-sanitize の記事を書いたんですが、その際色々と調べていたら、zenn-markdown-html というものを知りました。機能も色々充実しているみたいなので、ちょっと試してみることに。scriptタグを使ったら、Synchronous scripts should not be used.のエラーが。next/scriptかasync・deferを使ったコードに変更すれば、エラーは出なくなりました。

rehype-sanitizeを使ってみたら、コードがハイライト表示されなくなった

NextJSでrehype-sanitizeを使ってみようかなと思って試してみたら、ソースコードがハイライト表示されなくなってしまいました。rehypeSanitize と rehypeHighlightの記述位置を入れ替えてみても変化なし。ドキュメントを見てみると、rehypeSanitizeとrehypeHighlightを一緒に使う際には、defaultSchemaの設定を追加しないと駄目みたいです。defaultSchemaの設定を追加すると、きちんとハイライト表示されました。attributesのcodeに言語の設定を行う際にも、注意点が…

InferGetStaticPropsTypeを使ってみる

getStaticProps で取得したデータに型を付与したいって場合、色々方法はあるかと思います。markdownファイルを読み込み、記事に変換しているので、予めtitleやsummaryなどにデータ型を設定しておきます。それをpropsに適用していたんですが、NextJSのドキュメントを見ていたら、InferGetStaticPropsTypeなるものが… これを使えばpropsで渡ってくるデータの型を類推してくれるみたいです。

markdownファイルの読み込みで、ENOENTエラーになる

NextJSで記事(markdownファイル)を読み込もうとしてyarn devしたら、ENOENTエラーが発生。以前もこんな事あったなぁ…と思い出し、その対処法をメモっておくことに。調べてみたら、ENOENTはError NO ENTry の略らしい。markdownファイルを置いてあるディレクトリに移動して、ls -aコマンドを実行。すると作成した覚えがない.DS_Store.mdファイルが… こいつが悪さをしているっぽいので、rmコマンドで削除。再度yarn devしてみると、ちゃんと記事を読み込めました。

TypeScriptでブログを作り直してみた

NextJSのブログをTypeScriptを使って作り直してみました。サーバーにもNodeの最新のLTSを、バージョン管理ツールを使ってインストール。NextJSのバージョンも12から13に上げてみました。13だとLinkタグ内にaタグを記述すると、エラーになりました。tsconfig.jsonのCompilerOptionsにpathsを設定することで、import文を相対パスで書かずに済むので便利です。

NextJSとTypeScriptでの環境を構築してみる

NextJSで作成したブログがある程度形になったので、次はNextJSとTypeScriptで作り直そうかな? と思っています。先ずはApp Routerを使ったルーティーングではなく、従来通りのpagesフォルダを使った動的ルーティングでやってみようかと。作成されたプロジェクト内のindex.tsxを見てみると、next/fontが使われていました。subsetsを指定しないとエラーになったのですが、Read Moreのリンク先にあるようにpreload: falseに。tsconfig.json>compilerOptions>pathsを設定をすることで、相対パスでの長々としたパスの記述が避けられて良さそう。

nginx.confの文法チェック。sudoの付け忘れで怒られるので、aliasにでも登録しておく

nginxのconfファイルに変更を加えて、その記述が正しいのか文法チェックをすべくnginx -tを実行したら、13: Permission deniedなどエラーが色々表示されました。エラーをみたらスーパーユーザー権限で実行する必要があるみたいなので、sudoを付けて再度実行すると、無事チェックが通りました。(confは頻繁に変更を加えないのもあり)sudoの付け忘れで怒られるので、aliasにでも登録しておこうかと思います。

Next.jsでも複数ワードでの検索が出来る様にしてみた

1語での検索結果が意図したものになったので、NextJSでも複数語句での検索が出来る様にしてみました。検索ワードを無制限にするのもあれなので、一応3語までと制約を設けてあります。検索ワードを複数入力する際の区切り文字ですが、GatsbyJSの時はスペース(半角・全角)のみでしたが、今回はスペース(半角・全角)に加えて、カンマと読点(、)でも検索を行えるようにしてみました。

検索結果が意図したものではなかったので、コードを修正

検索結果が意図したものでなかったのでコードを見直してみたら、おかしな箇所を発見。全記事から検索を行うべきところを、(ページネーション用に取得した)最新の記事10件から検索を行なっていました。そりゃ、検索結果が意図したものにならないはずです。正常に動作する様に、コードを修正しました。

tailwind.config.jsにGridTemplateColumnsの設定を追加してみる

TailWindCSSでGridTemplateColumnsを使いたいんだけど、ドキュメントに書かれていない方法を試すにはどうすればいいの? と。やり方が分からなかったので、別途cssファイルに設定を記述していました。どうにか方法はないものかとドキュメントを見ていたら、tailwind.config.jsのテーマに設定すれば使えるようになるよと書かれていたので、早速試してみることに…