短歌とバレットジャーナル、手帳についてと、コード関係の備忘録。

歪月開発者を改装しました

2020/08/22

なぜローカル環境が立ち上がらなかったのか……。
たぶん気分だったのかと思います。

Next.jsとは

(改装に至った経緯はつまらないので省略します)

Next.jsはReact製のフレームワークです。
これまで使っていたGatsbyJSと異なるのは、圧倒的に 日本語のドキュメントが少ないことです(それは違いじゃない)。
困りました。ええ、いつものことですが英語もっと勉強しないとなですよ。
世界ではNext.jsわりかし流行ってるみたいです。npmしてる数を見る限りでは。

特徴的な部分

ブラケットを使って[slug].jsのように使うと、テンプレートを作成できます。
二重にブラケットを使うファイル名もあるのですが、今回使わなかったですね。

嵌ったところ

おまけでつけようと思ってたあたりを最初に解決してるあたり、優先順位? ですね。

拍手ボタンが欲しい

参照したのが、ReactでClap(拍手)ボタンを導入したいの巻
記事の下にある緑のボタンがそうです。
後述しますが、今回TailwindCSSを使用したところ、拍手の手の部分(画像:svg)が円の中央に表示されず、あとからCSSに書き足すことになりました。
……TailwindCSSでdisplay:block;が指定されていたから、だったようです。

TailwindCSSが適用されない

これはもう、GithubにNext.jsのexapmleがあったのでクローンしてきました。
ただそれでもなぜかデプロイの環境になるとCSSが適用されず。なぜ???

原因が、なんとNetlifyでは「_(アンダースコア)」がついたディレクトリをデプロイしてくれない(!)からでした。
Next.jsだと「out」ディレクトリにファイルを生成してくれるのですが、CSS系は「out/_next」配下に生成され、なんでだかNetlifyの初期設定だとディレクトリ自体生成してくれなかったようなのです。
ちょっとわたしの手には負えなかったので、今回Vercelにお世話になることにしました。
Next.jsとは相性ばっちりなところです(制作してるから……)。

シンタックスハイライトしない

これはコードをブログに載せるには致命的な欠陥。

$ npm i markdown-it markdown-it-highlightjs

ちなみにCSSは各自持ってこないとだめです。
わたしはsolarized-lightをダウンロードしてきて「_app.js」で読み込みました。
これに限らず、CSSは「_app.js」で読み込まないとエラー吐かれます。

ついでに、JSを読み込む際は「_document.js」で読み込んでやる必要があります。

参考

Next.jsを使ったJAMstackなブログの始め方

大幅にリニューアルされたNext.jsのチュートリアルをどこよりも早く全編和訳しました

Ads

蜘蛛の海