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?

ReactのSSRを自力で実現してみたときはWebpackを使ったのですが、今回はparcelを使いました。

parcelのいいところは、ブラウザ向けのバンドルでは自動的にNode.js用のパッケージが落とされるところです(よくわかんないけど、勝手に落とされたからそう思っている)。

parcelの悪いところは、JS用のAPIの説明がどこにもないことです。

JS Bundlerもいつか自力で作って、自給自足のフレームワークにしたいところですが、JS Bundlerだけはなかなかヘビーだと思うので、いつかきっと、という気持ちです。

以上です。よろしくお願いします。