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のような画面を作成してくれる。

ただし、最初は、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に質問できる月の回数の上限がある)