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