
Next.jsのApp RouterでのComponentの見た目のテストでこんなシステムが欲しいという話
Next.jsのApp Routerを用いて開発をしていて、それぞれのディレクトリにcomponentsディレクトリがある設計にしている。これを逆手にとってcomponentsディレクトリにpage.tsxを作り、そこでcomponentの見た目をテストすることができるのではないか?と考えました。
StoryBookより薄いものが欲しい
単純にComponentの見た目を見ることができるようなシステムのものが欲しいと考えていて、storybookのためにファイルを複数作ったり、面倒なconfigを作ったりせず、これくらい簡単に書けるものが欲しい。
tsimport NextPreview from "next-previewer";
import JoinWaitListButton from "./JoinWaitListButton";
const preview = new NextPreview()
preview.add("button", () => <JoinWaitListButton />)
export default preview.preview()
また、next dev
のコマンドで実行し、すぐに全体の画面のプレビューに戻りたいと思っています。
Tailwind Variantsとうまく組み合わせたい
Tailwind Variantsというものがあり、これを使うことでうまくcssの変更を行うことができます。紹介はこの記事に譲ります。
端的に言えばstyledComponentのようなことを実現することができるというものですが、styleだけテストするのに便利です。
これを使ってclassNameを適用しただけのComponentを表示するだけのシステムが欲しいと思っています。
じゃあ作れば?
今App Routerではpage.t(j)sxというファイルが起点となってRoutingされています。これをdevelopment限定にする方法がよくわかっていない状況です。
page.test.tsxなどを作ってみましたがうまく動かなかったので、issueとかを見て調べているが、まだ解決法が見つかっていない。情報提供よろしくお願いします(Twitter見てます)。