はじめに React開発におけるNext.jsのプレゼンスが日に日に増している今日この頃ですが、Next.jsを使う必要がない小規模なSPAを作る場合の型が欲しくなり、色々調べて技術選定をした上で実際に作ってみるところまでやったので、その技術選定理由とセットアップ手順を共有したいと思います。 フロントエンドの移り変わりは速いとはいえ、割とホットな技術を選定できたと思うのでしばらくは使っていけそうです(そう思いたい…)。 前提 趣味で小規模なSPAを作る場合を想定 ルーティングなしの単機能アプリ SSRが必要ない モーダルなどの動きのあるUIが必要ない 技術スタック Vite Preact TypeScript Tailwind CSS Cloudflare Pages 技術選定理由 Vite 少し前まではこういうケースではcreate-react-appを使用していましたが、Viteに置き
![Next.jsを使う必要がない小規模なSPAの最小構成を考えてみた](https://cdn-ak-scissors.b.st-hatena.com/image/square/98892045ec144d63988fc9054b5f61c8522ef767/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--cBc4XoZ3--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3ANext.js%2525E3%252582%252592%2525E4%2525BD%2525BF%2525E3%252581%252586%2525E5%2525BF%252585%2525E8%2525A6%252581%2525E3%252581%25258C%2525E3%252581%2525AA%2525E3%252581%252584%2525E5%2525B0%25258F%2525E8%2525A6%25258F%2525E6%2525A8%2525A1%2525E3%252581%2525AASPA%2525E3%252581%2525AE%2525E6%25259C%252580%2525E5%2525B0%25258F%2525E6%2525A7%25258B%2525E6%252588%252590%2525E3%252582%252592%2525E8%252580%252583%2525E3%252581%252588%2525E3%252581%2525A6%2525E3%252581%2525BF%2525E3%252581%25259F%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3AYutaro%252520Adachi%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzhmZmYwM2RiYjYuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)