今までUdemyではcodesandboxとか会社で用意されてたstorybook上でやっていたけど、自分で１からローカルに環境作る。
環境構築
どれもnpmをつかってるけどyarnでやっている記事はないのか？
たぶん絶対入れないといけないnode.jsを入れたらnpmが入るからわざわざyarnを入れる必要がない？？
あとnext.jsというフレームワークを使いたい。のでとりあえずこの記事の手順でやった。
Node.jsをダウンロード
そのあと適当にプロジェクトフォルダを作る
コマンドプロンプトでnpx create-next-app アプリ名
でもエラー出る
ChatGPTに聞いたらAppData\Roaming\ に npm フォルダーを手動で作れって言われたので作った。そのうえでもう一回やったらうまくいった。
そして色々聞かれた。よくわからないけど最後の以外Yesにしてみた。
いろいろ入ったみたい
コマンドプロンプトで作ったアプリ名のフォルダに移動して、npm run dev
そして
にアクセスしたら出た～～
バージョン
編集
page.tsxを編集せよと書いてあるので、全部消した。
のブラウザに即時反映される！！！！すごい！！！storybookじゃできなかった
でも背景だけは消えない・・・
ここら辺のどれかのせいなのか？でも色々変えてみたが消えない
いやlayout.tsxでcssをコメントアウトしたら消えた！（１回消してたはずなんだがその時は反映されなかった）
ページ遷移
ここから先やっていくには以下の記事とかよさそう
上の記事を参考にページ遷移できた！
ディレクトリ作って、その中にもう一つpage.tsxというスクリプトを置く
そして以下のアドレスにアクセスするとpagesフォルダの中のpage.tsxの内容が表示される！いっかいnpm run devしないと反映されないかも
でもURLで遷移した先で表示したいページは全部page.tsxという名前じゃないといけないのか？編集しているときわかりにくすぎる。
そういうものみたい
あと私がたまたまpagesというフォルダ名にしてしまったため分かりにくくなったが、pages.tsxを使う方式はAppDirectory方式という新しい方式。フォルダ名はpagesじゃなくていい。
昔はpagesフォルダの中に置いたファイル名がURLになるPagesDirectory方式だった。
併用できず最初に選ぶらしい。App Routerってやつかな？Yesにしてた
ボタン押したらページ遷移
url直たたきではページ遷移できるようになったが、ボタン押したら遷移するようにしたい
"use client";
import { useRouter } from "next/navigation";
export const XXX = () => {
const router = useRouter();
return (
<Button onClick={() => router.push("/フォルダ名")}>ボタン</Button>
"use client";というのをスクリプトの一番上に置く必要がある。
AntDesign使う
モジュール？を追加する
storybookのほうの環境でやっていたAntDesignを使ったページを持ってくるので、AntDesignなどのモジュールをこっちにも入れないといけない。
npm install antd --save
で入ったっぽい。
そのあといっきに移行しようとしたらよくわからないエラーが出たので、とりあえずシンプルなAntDesignのボタンだけでも出す。
storybookの時とは違って、一番下にexport default LicenseText;をつけないといけないっぽい。
これでやっと表示された！！
あとついでに以前使えなかったVSCodeでプレビューを見るpreview.jsという拡張機能も動くようになった。CSSが消えない・・・
最後に
いったんスタートラインに立ったかな。storybookからの移行は一つ一つ
