Next.jsのApp Routerを用いて開発をしていて、それぞれのディレクトリにcomponentsディレクトリがある設計にしている。これを逆手にとってcomponentsディレクトリにpage.tsxを作り、そこでcomponentの見た目をテストすることができるのではないか？と考えました。

StoryBookより薄いものが欲しい

単純にComponentの見た目を見ることができるようなシステムのものが欲しいと考えていて、storybookのためにファイルを複数作ったり、面倒なconfigを作ったりせず、これくらい簡単に書けるものが欲しい。

ts
copy
import 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見てます）。