nzxtのご紹介
お世話になっております。本日は昨日予告いたしましたとおり、 nzxt
の紹介をいたします。
よろしくお願いします。
nzxt?
nzxt(んずくすと)
Next.jsやNuxt.jsのようなサーバーサイドフレームワークです。Next.jsのことしか存じ上げませんので、Next.jsを踏襲したスタイルになっています。
development?
以下のようなフォルダ構成にしていただき、 pages
下にファイルを作っていただくことで、アプリのルーティングも同時に可能です。
package.jsonのscriptsに "start": "nzxt"
と記述して、 yarn start
すれば8080で起動します。
├── package.json ├── pages │ └── documents │ ├── _id_.tsx │ └── index.tsx ├── tsconfig.json └── yarn.lock
上記例では、 /documents
, /documents/xxxx
というふたつのパスが生成されます。
documentation?
こちらです。 nzxt
を使って作っています。さっき作りました。
なお、Herokuにデプロイしてあるため、初回は遅いです。ご注意ください。 Oracle Cloudに移行したので早いです。
concept?
Next.jsを真似て、ZheleznayaのSSRフレームワークを作ってみたかっただけです。
feature?
- No config(嘘。tsconfig.jsonが必要。いつか、ファイルがなければ作る、をやりたい。)
- Server Side Rendering + SPAとしても動く。
- 型定義付き
sample?
nzxt-docsをご覧ください。 fsを使ってサーバーサイドでProps(ドキュメント本文)を取得しています。
technology?
- サーバーフレームワーク: summer-framework(オレオレフレームワーク)
- フロントエンドフレームワーク: Zheleznaya(オレオレフレームワーク)
- SSRの処理: Zheleznaya(同上)
- SPA用のJS Bundler: parcel
ReactのSSRを自力で実現してみたときはWebpackを使ったのですが、今回はparcelを使いました。
parcelのいいところは、ブラウザ向けのバンドルでは自動的にNode.js用のパッケージが落とされるところです(よくわかんないけど、勝手に落とされたからそう思っている)。
parcelの悪いところは、JS用のAPIの説明がどこにもないことです。
JS Bundlerもいつか自力で作って、自給自足のフレームワークにしたいところですが、JS Bundlerだけはなかなかヘビーだと思うので、いつかきっと、という気持ちです。
以上です。よろしくお願いします。