DenoのSSR/SSGフレームワークAleph.jsについて

Aleph.jsはNext.jsに影響を受けたDenoのフレームワークです

特徴

SSR/SSGサポート

Deno Deployのサポート

プラグインシステムを提供

API Routesのサポート

Vue.jsなどのフレームワークもサポート

UnoCSSをサポート

セットアップ

下記コマンドでプロジェクトを初期化できます (1.0.0-alpha.20の部分は適宜調整ください)

code:shell

ディレクトリ構成

/routes/ - SSRされるコンポーネント

/public/ - 静的ファイル

app.tsx - ページのレイアウトをカスタマイズしたいときに用意します(任意)

devサーバの起動方法

code:shell

$ deno task dev

ルート

/routesディレクトリでReactコンポーネントをdefault exportすると、対応するURLにアクセスした際にそのコンポーネントがSSRされます

ルートはファイル名を元に決定されます (routes/about.tsxは/aboutからアクセスできます)

dataをexportすることで、APIエンドポイントを定義することができます

設定

aleph.config.ts

CSS

公式でUnoCSSがサポートされています

プラグインシステム

プラグインによってAleph.jsのコード変換などの仕組みを拡張できます

公式ではCSS LoaderプラグインとMarkdown Loaderプラグインが提供されています

また、Aleph.jsの作者によってWindi CSSのプラグインが提供されています (https://github.com/ije/aleph-plugin-windicss)

比較対象

参考