reactとNext.js勉強しようと思って、それぞれチュートリアルをやったんだけど、実際に画面を作ってみたいと思ってたら、下記の記事を見つけて挑戦してみた。
最初に
当然、cursorをインストールする。
そして会社でも最近cursorに乗り換えてて、作業してたら、APIの上限に到達したので、これを機に、cursor proにしてみた。（月20$）
NxでNext.jsプロジェクトを作成
コマンド
npx create-nx-workspace@latest like-amazon --preset=next
これで、Next.jsのプロジェクトができる
フォルダ構成を理解してもらう
この記事の冒頭で紹介したQiita記事の通り、Chat欄に@を入力し、フォルダを選択、フォルダの候補が出てくるので、appsを指定し、フォルダ構成を理解してもらう。
Amazonのスクスショを貼り付けてコーディングしてもらう
こちらも記事の通り、Amazonのスクショを貼り付けて、「このデザインで画面を作成して欲しいです」と入力すれば、対象のファイル名リンクとコーディング内容が表示されるので、ファイル名リンクを押下し、ファイルをオープン。
そして、コーディング内容を適用するというのを繰り返せば、Amazonのような画面を作成してくれる。
ただし、最初は、CSSが誤ってたり、画像が表示されないなどあったので、その辺は適宜修正した。
※Nx Cloudを使ってたせいか、Cloud上でコンパイルや、Playwrightのエラーが出たので、その辺の修正に時間がかかったが、ここもcursorのchatで全て解決した。
結果
4時間くらいかかって、こんな感じ！
参考にしたAmazonのスクショはこれ！
まあまあ、いい感じ
学び
Cursorにすることで、コーディングの効率は確実に上がる気がする。
ただ、エラーや、問題の解消で質問する→Chatの回答が出る→それを適用する→エラー解消しないのループがまあまああって、質問の仕方変えたり、ネットで調べたりする必要は当然ある。
あと、過去の履歴を全て持ってないので、時間が経つと、前回の続きで質問したいみたいなのができない（一からやり直す必要がある）
今回は、ページを作るのが目的だったので、Chatの回答をそのまま貼り付けたので、React, Next.jsの理解は全然深まらなかった。
※基本、自分でコード書くときに、サポートとして、Chatに聞くのが一番良いだろう
※途中で、問題が解決しないときに、VSCodeでcopilotに聞いてみたけど、copilotでも問題は解決しなかった
最後に
長らく使用してた、VSCodeは卒業してcursorに乗り換える。
使ってたイメージだけだけど、github copilotよりもcursorでchat gpt使う方が、コーディングの効率は良さそう（完全に主観です）
自分はフリーランスなので、課金に抵抗ないけど、cursor使うなら課金した方が良い。(Freeだと、chatに質問できる月の回数の上限がある)