NextJSブログをexportしてみた
NextJSのブログのデプロイ先を、Vercelではなく、契約しているサーバー上にしてみました。ローカルでは問題なかったんですが、サーバーにアクセスしてみると、CSSが表示されない＆画像が表示されないとか色々ありましたが、とりあえず見れる様にはなりました。今後NextJSに関することは、新しいブログの方に投稿して行こうかと思っています。
Node.jsをアップデートしてみる
NextJSをビルドしようとした所、Node.jsのバージョンが古いからアップデートしてと怒られました。GatsbyJSをセットアップした際に、nvmをインストールした覚えがあるので、nvmでアップデートしてみる事に。nvmでアップデートしても、古いバージョンのまま。nvm currentやnpm list -gを実行してみたら、どうやらnodebrewでインストールしたものがアクティブになっていたみたいです。バージョン管理にはnodebrew、nvm、n、volta などがありますが、今後どれを使っていくか検討してみたいと思います。
inputエリアの入力値に変化があったら、検索が行われる様にしてみた
inputエリアに検索語句を入力してEnterキーを押すと、検索結果が表示される。そうではなくEnterキーを押さずに、検索処理を走らせたいなと。それも複数語句対応で。これまではonKeyDownイベントを使って、Enterキーが押されたら検索処理を行なっていました。それをonChangeイベントを使って、inputエリアの入力値に変化があったら、検索処理が走る様にしてみました。値の受け渡しにはuseStateを使っているのですが、useReducerの方がいいのかなぁ… useReducer、勉強をせねば！
querySelectorとpreventDefaultを使ってみる
inputエリアの値はgetElementById、e.target.value以外にも、querySelectorを使っても取得出来るみたいなので、試してみました。セレクタにid属性なら#、class属性なら.を指定することで値を取得出来るので、便利ですね。Enterキーが押されたかの判断は、e.key===Enterで行なっていましたが、formタグを使っての方法も試してみました。formにonSubmitを設定しただけでは、Enterを押した際に、ブラウザのリロードが行われ、検索処理が行われない事象が発生。preventDefaultを設定することで、値を取得することが出来ました。
GatsbyJSブログの検索フォームを、複数語対応にしてみる
GatsbyJSブログの検索フォームを、複数語対応にしてみました。以前はinputエリアに検索語句を入力すると、リアルタイムに記事がリストアップされる感じでしたが、検索語句は1語のみの対応でした。複数語句を入力しようとして、半角スペースを入力した時点で、何もリストアップされなくなっていました。複数語句対応にしたかったので、ひとまず検索語句は3語まで対応。inputエリアに入力し、Return（Enter）キーを押すと、記事がリストアップされます。今回はonKeyPressではなく、onKeyDownイベントを使ってみました。inputエリアの値は、getElementById、e.target.valueどちらを使っても取得出来ました。
NextJSブログにTocbotを使って、目次（TableOfContents）を作成してみる
NextJSのブログに目次（TableOfContents）を作成してみました。remarkプラグインを使った方法はGatsbyJSで試したので、別の方法はないかと探していたら、Tocbotを使った方法があるみたいなので、今回試してみる事に。contentSelectorで設定したクラス名を、表示させたい箇所に同一のクラス名を設定してあげる必要があります。headingSelectorに設定したタグをreturn内で見出しを囲むタグとして使ってしまうと、目次の項目として認識されてしまうので、注意が必要です。
TailWindCSSのlast、@apply、last-of-typeを使ってみる
TailWindCSSで最後の要素のみに適用したい場合、（:notは使えなさそうなので）要素全体に値を設定した上で、最後の要素（last）のみ値を適用しないみたいに設定する必要がありそう。@applyやlast-of-typeの使い方も調べてみました。前者はボタンやフォームなど、小さい範囲で再利用可能なものに使うのが良さそうなのかな？ 後者は意図した結果が得られなかったので、再度検証してみる必要がありそう…
yarn buildしたら、エラーが出る
NextJSとTailWindCSSで作成しているブログ。yarn devでは出なかったエラーが、yarn buildでは出てくるように。pagesフォルダ内にはlibやcomponentsフォルダを配置しないとか、next-sitemapを使ってサイトマップを作成する際には、ファイル名をnext-sitemap.config.jsに。feedを作成する際にmarkedも併せて使う場合には、（export functionと定義されているので）import {marked} from markedにするなど、注意点が沢山。デプロイ先をVercelにしようかは、思案中です。
GitHubのpersonal access tokensを作り直してみる
GitHubのpersonal access tokensの有効期限が切れそうなので、更新しようかと思ったのですが、Updateするボタンみたいなのが見当たらなかったので、新規作成（Generate new token）して、古いものはDeleteしてみました。後で気づいたのですが、作成したトークン名の青色のリンクをクリックすると、画面が遷移し、Regenerate tokenボタンがありました。次回はこちらの方法でやってみようかと思っています。
NextJSのblog-starter を検証してみる
GitHubで公開されているNextJSのblog-starter を色々検証してみました。画像はpublicフォルダ内に配置しておけば、markdown記法での画像配置も問題なさそうということが分かりました。公式のチュートリアルには無かった_document.jsファイルの使い方や、getStaticPathsはdynamic route内でしか使えないなど、なるほど…と思うことが沢山ありました。
NextJSのチュートリアルをやってみる
NextJSも触ってみようかなと思い、まずは公式のチュートリアルを試してみることに。自分はyarnを使って、プロジェクトを作成してみました。markdownファイルのファイル名を個別記事のURLパスにしたり、固定ページの作成方法など、GatsbyJSと似ている点も。異なる点といえば、LinkコンポーネントのURL指定などでしょうか… getStaticPaths、getStaticPropsの使い方は、きちんと理解したいと思っています。
GatsbyJSのブログに検索機能を実装してみる
GatsbyJSで作成したブログに、検索フォームを実装してみました。Algoliaの様に全文検索とまではいきませんが、記事内の検索されそうな語句を用いて要約を作成し、それに対しfilterやindexOfを使って検索処理を行うことで、投稿された全記事から絞り込む仕様にしてみました。graphql の filter を使ったクエリは、comparatorの値で意図したものにならなかったりしたので、断念しました。
Gatsbyの記事に目次を作成してみる
GatsbyJSの個別記事に、目次（table-of-contents）を作成してみました。Graphql のクエリにtableOfContentsを追加し、後はgatsby-remark-autolink-headersもインストールします。markdownRemarkの場合は、dangerouslySetInnerHTMLを使って簡単に表示出来ましたが、allMdxを使った場合は、一手間が必要でした。
このブログについて
GatsbyJSのバージョンを3から4にアップデートし、mdxの読み込みに対応したブログに作り直してみました。gatsby-plugin-mdxをインストールした後は、（allMarkdownRemarkではなく）allMdxを使うらしい。StaticImageはクエリを使わずに画像を表示出来るみたいで便利そう。今後もReact、GatsbyJS、CSSの勉強を続けながら、TypeScriptとNextJSでブログでも作ろうかなと思ったりしています。