データベースに登録、更新、削除を行なった際に、簡単なflashメッセージを表示させてみようかと。一定時間が経過 or ボタンクリックでメッセージが消えるアニメーションを、jQueryで実装してみたいと思います。npmを使ってインストールしたjQueryを使うと、javascriptの実行順が意図しないものになってしまい、jQueryが実行されなくなってしまいました。色々調べてみると、@viteで作成されるjavascriptにはtype='module'が付き、その有無により実行順が異なるようです。
久しぶりにLaravelを触る機会があったのですが、以前Laravelでブログを作ろうとして触っていた時のバージョンは確か、5.8とかだった様な。随分と時間が経ってしまい、あれ、どうするんだっけ？ とか、今はこう書くのか…とか色々出てきました。where&getとfindを使った時の違いや、モデル作成時のオプションの指定、カラムのデータ型の変更方法、バージョンによって異なるlangディレクトリの扱い、ヘルパ関数であるto_routeや、Bladeコンポーネント等を触ってみました。
前回 rehype-sanitize の記事を書いたんですが、その際色々と調べていたら、zenn-markdown-html というものを知りました。機能も色々充実しているみたいなので、ちょっと試してみることに。scriptタグを使ったら、Synchronous scripts should not be used.のエラーが。next/scriptかasync・deferを使ったコードに変更すれば、エラーは出なくなりました。
NextJSでrehype-sanitizeを使ってみようかなと思って試してみたら、ソースコードがハイライト表示されなくなってしまいました。rehypeSanitize と rehypeHighlightの記述位置を入れ替えてみても変化なし。ドキュメントを見てみると、rehypeSanitizeとrehypeHighlightを一緒に使う際には、defaultSchemaの設定を追加しないと駄目みたいです。defaultSchemaの設定を追加すると、きちんとハイライト表示されました。attributesのcodeに言語の設定を行う際にも、注意点が…
getStaticProps で取得したデータに型を付与したいって場合、色々方法はあるかと思います。markdownファイルを読み込み、記事に変換しているので、予めtitleやsummaryなどにデータ型を設定しておきます。それをpropsに適用していたんですが、NextJSのドキュメントを見ていたら、InferGetStaticPropsTypeなるものが… これを使えばpropsで渡ってくるデータの型を類推してくれるみたいです。
NextJSで記事（markdownファイル）を読み込もうとしてyarn devしたら、ENOENTエラーが発生。以前もこんな事あったなぁ…と思い出し、その対処法をメモっておくことに。調べてみたら、ENOENTはError NO ENTry の略らしい。markdownファイルを置いてあるディレクトリに移動して、ls -aコマンドを実行。すると作成した覚えがない.DS_Store.mdファイルが… こいつが悪さをしているっぽいので、rmコマンドで削除。再度yarn devしてみると、ちゃんと記事を読み込めました。
NextJSのブログをTypeScriptを使って作り直してみました。サーバーにもNodeの最新のLTSを、バージョン管理ツールを使ってインストール。NextJSのバージョンも12から13に上げてみました。13だとLinkタグ内にaタグを記述すると、エラーになりました。tsconfig.jsonのCompilerOptionsにpathsを設定することで、import文を相対パスで書かずに済むので便利です。
NextJSで作成したブログがある程度形になったので、次はNextJSとTypeScriptで作り直そうかな？ と思っています。先ずはApp Routerを使ったルーティーングではなく、従来通りのpagesフォルダを使った動的ルーティングでやってみようかと。作成されたプロジェクト内のindex.tsxを見てみると、next/fontが使われていました。subsetsを指定しないとエラーになったのですが、Read Moreのリンク先にあるようにpreload: falseに。tsconfig.json>compilerOptions>pathsを設定をすることで、相対パスでの長々としたパスの記述が避けられて良さそう。
nginxのconfファイルに変更を加えて、その記述が正しいのか文法チェックをすべくnginx -tを実行したら、13: Permission deniedなどエラーが色々表示されました。エラーをみたらスーパーユーザー権限で実行する必要があるみたいなので、sudoを付けて再度実行すると、無事チェックが通りました。（confは頻繁に変更を加えないのもあり）sudoの付け忘れで怒られるので、aliasにでも登録しておこうかと思います。
1語での検索結果が意図したものになったので、NextJSでも複数語句での検索が出来る様にしてみました。検索ワードを無制限にするのもあれなので、一応3語までと制約を設けてあります。検索ワードを複数入力する際の区切り文字ですが、GatsbyJSの時はスペース（半角・全角）のみでしたが、今回はスペース（半角・全角）に加えて、カンマと読点（、）でも検索を行えるようにしてみました。