AsaDesign

Next.jsでヘッドレスCMS【①環境構築】


 yarn create next-app –typescript

✔ What is your project named? … hoge
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like your code inside a `src/` directory? … Yes
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to use Turbopack for `next dev`? … No
✔ Would you like to customize the import alias (`@/*` by default)? … No
  • ESLint　…コードチェックのため必要
  • Tailwind CSS　…CSSを略称で書ける。今回使うことにしました
  • src/ ディレクトリ作るか？　…なんとなくYes
  • App Router使うか？　…今後はPage RouterではなくApp Routerが主流になると思うのでYes
  • Turbopack　…調べたらベータ版らしく挙動が不安定そうだったのでNo
  • インポート時の省略記号をカスタムするか？　…特にこだわりはないのでNo

色々なファイルが追加されました。

yarn dev

ローカルで初期画面が表示されました！

【GitHub】リポジトリ作成

【Git hub】first commit

GitHub側でプッシュ用トークン生成

プッシュ時に聞かれるパスワードはGitアカウントのパスワードではなく、トークンでした。
（パスワードでプッシュしようとすると以下のような認証エラーが出ます。）

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.

リモート: パスワード認証のサポートは、2021 年 8 月 13 日に削除されました。
リモート: 現在推奨されている認証モードについては、https://docs.github.com/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls を参照してください。

トークン生成参考サイト：GitHubエラー #Git

トークンが表示されるのでコピーしておきます。

コマンド実行

% git init                            
Reinitialized existing Git repository in /Users/hoge/workspaces/nextjs/hoge/.git/
% git add -A
% git commit -m "first commit"
On branch main
nothing to commit, working tree clean
% git remote add origin https://github.com/~~.git
% git push -u origin main
Username for 'https://github.com': // アカウント名
Password for 'https://~~@github.com': // ここ！トークンを入力する
branch 'main' set up to track 'origin/main'.
% git config credential.helper store // おまけ：ユーザー名とトークンを毎回聞かれない設定

GitHubにファーストコミットできました！