NextJSに移行する際に修正した箇所あれこれ
GatsbyからNextJSに移行するにあたり、修正が必要な箇所がありました。最初にnext.config.jsに設定していたbasePathの記述を、コメントアウト。次にmarkdownファイル内のhero_imageのパスを変更。markdownのテーブル記法が正しく表示されていなかったので、remark-gfmを用いたコードに修正。最後に個別記事へのパスの設定を変更し、Gatsbyの個別記事のURLと同じになる様にしてみました。
flabaka.com
GatsbyからNextJSに移行してみた
Gatsby5にしてから、ビルドに時間が掛かる様になりました。記事を一つ投稿するだけでも、数十分掛かるみたいな感じです。Gatsby5の新機能（新しいGraphQL・Slice API）を使ってみても、同じ様に時間が掛かる。サーバーのOSを変更したことも関係あるのかな？ と思いつつ、NextJSで同じ様にビルドしてみると。こちらは十数秒でビルドが完了。Gatsby Cloudを使えばビルドに時間は掛からないのかもしれませんが、暫くはNextJSを使っていこうかと思っています。
markdownのtable記法、ブラウザでの表示が崩れる
markdownでのtable記法が、ブラウザで正常に表示されなくなっていました。Gatsby4から5にアップデートしてから、表示が崩れていたみたいです。いつの間にかremark-gfmを使うように変更になっていたみたいです。gatsby-plugin-mdxのmdxOptionsに、remark-gfmの設定を記述。これで大丈夫かと思ったんですが、現状ではもう一手間、必要でした…
ビルドすると、mdxファイルがパースエラーになる
ブログ記事をmdxファイルに記述してビルドを行うと、パースエラーに。エラーは、Could not parse expression with acorn: Expecting Unicode escape sequence \uXXXX と表示されました。＠mdx-jsのバージョン2からは、<や{を使う際には、エスケープ処理が必要になったみたいです。シンタックスハイライト（prism.js）やfrontmatter内では、エスケープ処理は必要なさそう。それ以外にUnexpected characterのエラーも発生しました。
CentOSからRockyLinuxへ移行してみた
Gatsby5はnode18が推奨とのことだったので、CentOS7にインストールしてみるも、エラーが。サポート期間も来年で切れるみたいなので、これを機にRockyLinuxに移行する事に。ガイドなどを見ながら、Nginx や Let's Encryptをインストール。yarn installの際に、There appears to be trouble with your network connection.が出て、強制終了。他にもFATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memoryのエラーが発生しました。
GatsbyJS を4から5にアップデートしてみる
GatsbyJSを4から5にアップデートすることに。4の最新版にすると、Browserslistやgatsby-plugin-react-helmetの警告が出たので、Browserslistの最新版をインストールしたり、Gatsby Head APIに置き換えるなどして対応。5にアップデートしてみたら、今度はgraphqlやページテンプレート周りでエラーが。graphql内のslugの記述位置や、動的に作成するページのファイル名を変更、MDXRendererではなくchildrenを使うと、エラーはなくなりました。
voltaをインストールしてみた
Nodeの管理をnvmからVoltaに変更してみました。特に理由はなく、単にvoltaを使ってみたかっただけです。nvmをアンインストールして、次にvoltaをインストール。インストールは無事に完了したのに、command not found: voltaに。.zshrcに（voltaへの）パスはちゃんと書かれているのに、何故？ と思ったら、単純なミスが原因でした。
next.config.jsの設定
作成したNextJSブログのデプロイ先を Vercel ではなく、Static HTML Exportをした上で、契約しているサーバーに配置してアクセスしてみると、CSSが適用されていない＆個別ページにアクセスすると、404エラーが… assetPrefix、basePath、trailingSlashなど、next.config.jsの設定を色々見直してみました。他にも画像やfaviconも表示されていなかったので、meta.jsファイルやmarkdownファイルのパスを修正してみました。
Node.jsをアップデートしてみる
NextJSをビルドしようとした所、Node.jsのバージョンが古いからアップデートしてと怒られました。GatsbyJSをセットアップした際に、nvmをインストールした覚えがあるので、nvmでアップデートしてみる事に。nvmでアップデートしても、古いバージョンのまま。nvm currentやnpm list -gを実行してみたら、どうやらnodebrewでインストールしたものがアクティブになっていたみたいです。バージョン管理にはnodebrew、nvm、n、volta などがありますが、今後どれを使っていくか検討してみたいと思います。
NextJSとTailWindCSSでブログを作ってみる
公式のチュートリアルが一通り終わったので、NextJSとTailWindCSSでブログを作ってみました。デプロイ先は Vercel にしようかな？ と思ったんですが、頻繁に更新するものではないので、SSG（Static Site Generation）で十分かな？ と。静的ファイルを作成し、契約しているサーバーに配置する事にしました。Static HTML Exportを実行すると、next/imageでエラーが発生。どうやらImageコンポーネントが使えない様なので、通常のimgタグに置き換えexportを行うと、静的ファイルを書き出すことが出来ました。
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でブログでも作ろうかなと思ったりしています。