⛩️

Waku v0.20.0をリリースしました

2024/03/27に公開

Wakuって知ってますか。WakuはReactのフレームワークで、Next.jsのようなものです。かれこれ1年以上開発してます。今回、v0.20.0をリリースしました。アナウンス記事はこちら：

この記事ではあえて、WakuをSPA開発に使う方法を書いてみます。

npm create waku@latest

でテンプレートが作られます。

コンポーネントファイルを src/components/app.tsx に用意します。

src/components/app.tsx

'use client';

const App = () => {
  return <h1>Hello</h1>;
};

これはクライアントコンポーネントと呼ばれるものです。これは好きにいじって大丈夫で、他のコンポーネントをインポートしても構いません。その場合、app.tsx以外のファイルに 'use client'; を付与する必要はありません。

次に、サーバ側のコンポーネントを src/pages/index.tsx に用意します。

src/pages/index.tsx

import { App } from '../components/app.js';

export default function Index() {
  return <App />;
}

こちらはdefault exportを使う必要があります。こちらのファイルはいじりません。

開発時はdev serverを使います：

npm run dev

完成したらビルドします：

npm run build

今回の例では、サーバ側は全てstaticなため、ビルドするとSSGのようになります。
dist/public 配下のファイルをサーバにアップロードすれば動くはずです。
npx serve dist/public でも動くと思います。

Wakuの機能のほんの一部（というかほとんどVite）しか使ってませんが、こういうことも視野に入っていますという意味で紹介しました。