Next.js から Astro に遷宮

from 20221228 #1228

Next.js から Astro に遷宮

201909あたりに Next.js へ遷宮した自分のポータルサイト的なやつを Astro に書き換えた

next@13 で追加された appDir がまだ Static Export に対応していなかったのと、React も next も元々オーバーキル感が強くて微妙だとおもっていたので思い切って書き換えた

当時は SSG でイイ感じにパッケージングされてる選択肢が限られていて、消極的に next を採用したのもあり

最近はすっかり vite ばっかり使ってて、いける手応えが結構ある

Sveltekit か Qwik City あたりも検討したが、Svelte はやっぱり svelte のテンプレートの記法に抵抗感があるのと、Qwik はまだ1.0じゃないのもあるけどいろいろ不安定で変更も多いので

Astro は1.0出たし、テンプレートの記法はベター JSX といってよいと感じる

もちろん JSX はコンパイルすればピュアな JS に落ちるという利点があるとはおもうが、だから何？って最近はおもってきた

どうせ TypeScript で書くし、babel はもうほぼ使わんけど swc にせよなんらかのコンパイルは挟むわけなので、じゃあ多少のテンプレートは許容できるかなと

TIL

svg をインラインで読みたい:

frontmatter 部分に const { default: innerHTML } = await import("some.svg?raw"); てな具合で import すると innerHTML には svg の中身が string として格納されるので、あとはこいつをテンプレートで参照すればよい

json の string を union に upcast したい:

json の特定の key には string の union として提供されている型の中身しか入ってないけど、それを表現する術がねえ....と困るのだが、hoge as Foo 的な感じで as を使っても、string は Foo に upcast できないよ〜んと怒られてしまう

あまり good なプラクティスにはみえないけど hoge as unknown as Foo と一旦 unknown に落としてやることで無理矢理 upcast できる

VSC でフォーマットされたい:

Astro の ext 入れたらイイ感じになるのかなとおもったら別途 prettier の設定をいれないとダメだった

また、pnpm 使ってると巻き上げられてるので https://github.com/withastro/prettier-plugin-astro#pnpm-support-1 に従って設定しておく