Open3
初めてWebを触る人に教えるNext.jsの使い方
Kaiba初めてプログラミングをする人向けにNext.jsを使ったWeb開発を教える際のメモ
まずは以下をインストール。()はオプション、なくても開発できる
- Node.js
- https://nodejs.org/en/
- LTSをダウンロードすれば良い
- 一応ターゲットOS (MacOS or Windows) に気をつけるように
- Cursor
- VSCodeでもいい
- 右も左も分からない初心者ならAI伴走があると良いかも
- (git)
- あるとかなり開発が楽
- macはデフォで入ってるのでいらない
- (brew)
- nvmを入れるなら
- https://brew.sh/ja/
- (nvm)
- Node.jsのバージョン管理をするなら
- brewをインストールした後で
brew install nvm
Kaibaまずはターミナルで以下のコマンド。
npm(Node Package Manager) で npx(Node Package Executer) をグローバルインストール
npm install npx -g
cd (Change Directory)でターミナルの現在地を変える
cd [Webページをおきたい場所]
ex ) cd kaiba/sample
npxを使ってNext.jsのプロジェクトを作成
出てくるYes/Noの選択肢は全て何も入れずにEnterキーを連打する。
npx create-next-app@latest [Webページ名]
Cursorでプロジェクトのフォルダを開く
Shift+Ctrl+@でターミナルを開いて、以下のコマンドでWebページのサーバーを立ち上げる
npm run dev
成功したらhttp://localhost:3000みたいなリンクが出てくるので、それをブラウザで開く
もしgitがインストールされているなら以下も実行
リポジトリ作成
git init
github DesktopなどがあるならAdd local existing repositoryでプロジェクトファイルを開く
コミット、リモートの設定などは適宜サイトを参照
参考