Next.jsでプロジェクト作成&初期設定を備忘も兼ねて_その1

急にオセロを作ってみたくなってNext.jsでプロジェクトを作ろうとしたところ、毎回プロジェクト作成時に作り方やら初期設定を調べながらやっている気がするんなぁと思ったので、共通になりそうな部分だけでも書いておこうと思います。

プロジェクトを作成する

yarn create next-app [my-app] --typescript

僕はいつもtypescriptを使うのでoptionに --typescript をつけていますが必要ない場合はなくて大丈夫です。[my-app] の部分は作るプロジェクトの名前を任意で入れてください。

【参考】
https://nextjs.org/docs/api-reference/create-next-app

プロジェクトをGitでソース管理

リポジトリができたらまずgit管理です。作成したコードはPCに保存してゴニョゴニョとかではなくgitにあげてソース管理をしましょう。
アカウント登録は必須なのでまだ持っていない方はこちらからどうぞ！

Githubでリポジトリを作成

ログインしたら以下のような画面になるので赤枠の『New』をクリックしてリポジトリを作成します。

Github画面

リポジトリの設定

リポジトリの設定画面

• リポジトリの名前は作成しようとしている名前入力（必須）

• Descriptionに説明にリポジトリの説明を入力（省略可）

• Public or Privateを選択する（必須）

  • Public：全公開

  • Private：非公開

• Initialize this repository with を選択（任意）

  • 初期で作っておきたいファイルを選択。こちらはnextのプロジェクトで作れば良いのでここではチェックなしでいきます。

全てを選択したらCreate repositoryをクリックで完了。

作成したリポジトリと連携

Create repositoryが成功すると以下の画面に遷移しています。create next app ですでにプロジェクトを作成しているので枠内を実行して現在の状態をpushしておこうと思います。

と思いましたがそのまま素直にはいきませんので、1つずつクリアしながら進めていきましょう。

作成されたプロジェクトではまだgitないので、git系コマンドが動きませんので、まずは以下のコマンドで.gitファイルを追加します。

git init

ここで.gitignoreといファイルを作成しておきます。変更があってもgitでソース管理をしないファイルを定義することができますのでroot直下に置いておきましょう。初期だとnode_modulesがいらないのでそれだけ書いておけば大丈夫かと思われます。後々必要になったら追加すれば良いだけです。

node_modules

これでpushできるかとと思いきやまだエラーは出ます…。
以下の手順で解決していきます。

// ステージングに変更を追加
git add .

// ステージングのファイルをコミットする
git commit -m "first commit"

// ブランチの名前をmasterからmainに変更
git branch -m main

// gitへプッシュ
git push -f origin main

まず初期のブランチ名がmasterになっているのでgitに合わせてmainに変更しないといけないのですが、コミットされていないと変更ができないので一度コミットします。

mainに変更したら内容をpushしたいのですが、githubでリポジトリを作ったときの内容が残っていてpushできません……。
ローカルの内容で上書きしましょう。-fをつけることで問答無用でローカルの内容をpushできるようになります。

その１のまとめ

まだ先は長いですがキリが良いのでここまでにします。
そんなに難しくないところではありますが、毎回エラー出て腹が立つと思うので同じようにムカついている人の役に立てれば良いなあ。

環境によっていろいろは全く同じではないかもしれないので、参考にする程度でお使いください。

次回は・・・

その2では、pritterやESlint、next.jsの設定、最低限のプラグインのインストールなんかをやっていければ良いかな？と思ってます。（あくまで予定ですが）