④AIに頼んでVercelで公開用のNext.jsコードを作らせたら聞かれたこと

Vercelのプロジェクト名（例：firstpj）

まず、ローカルパソコン上のDocumentsにプロジェクト名と同名のフォルダが作られる

Documents
└── firstpj
├── app
├── public
├── package.json
└── …

次に、GitHubに「firstpj」というリポジトリが作られる

イメージとしては、以下の流れで自動更新される（VercelとGitHubを連携させておく必要がある）

【あなたのパソコン】
firstpj フォルダ
↓
【GitHub】
firstpj リポジトリ
↓
【Vercel】
firstpj プロジェクト
↓
インターネット上のWebサイト

AppRouter

AppRouter、PagesRouterの２種類のルーティングがあるが、現在はAppRouterが主流

MDX記事

Markdown形式で

<CTButton>Contact US</CTButton>

のように書いて、React側でCSSを変えるスタイル

firstpj/
├── app/
│ ├── page.tsx
│ └── articles/
│ └── [slug]/
│ └── page.tsx
│
├── content/
│ └── articles/
│ ├── survivor-pension.mdx
│ ├── japanese-income-tax.mdx
│ ├── resident-tax.mdx
│ └── social-insurance.mdx
│
├── components/
│ ├── Button.tsx
│ ├── NoticeBox.tsx
│ └── CalculationBox.tsx
│
└── …

のようにフォルダ構成される

新しい記事を書きたいときは、contentフォルダのarticlesフォルダ内に新しい.mdxファイルを新規作成して、そこにMarkdown形式で記事を書く感じ

記事ができたらGitにCommitすると、Vercelが自動更新される

※CMS

CMSを使えば、他人が記事を書けるようになる

（MDXで記事を作る場合はフォルダ操作が必要となのでサイト運営者しか記事を書けない）

Node.js LTS

「ダウンロードフォルダやiCloudなどのローカルファイルにアクセスして良いか」という確認ポップアップが出るのでOKする

Node.jsのLTSのインストールなどが始まる。20分くらいかかる

http://localhost:3000で動くサンプルブログが出来上がった

Terminal

MacBookの日本語キーボードなら、Control＋Shift＋へ　（ショートカット）の同時押しでターミナルを起動させる

Macbok -Air　firstpj %

と表示される

Vercelへログイン

まずは、Vercelにログインするために

npx vercel login

というコマンドを入力してEnter

Log in to Vercel

? Log in with GitHub
? Log in with GitLab
? Log in with Bitbucket
? Log in with Email

と、ログイン方法を聞かれるので、Vercelのアカウントを作った方法でログインする

ログインが成功するとターミナル上に

Congratulations! You are now logged in.

と表示される

Vercelにデプロイ（公開）する

次に、 npx vercel –prod　というコマンドを入力してEnter

【? Link to existing project? [y/N].】

今回初めてサイトをVercelに公開する場合は「N」

【? What’s your project?】

＞　Create a new projects （こっちを選択）

　Search all projects（既存プロジェクト）

すると

? Name? Press ↑ to return to project options (firstpj)

となり、そのままEnterを押すとfirstpj というプロジェクト名になる

【? Customize settings? [y/N]】

Y

【? Which settings would you like to overwrite (select multiple)?
(Press to select, to toggle all, to invert selection,
and to proceed)
❯◯ Build Command
◯ Development Command
◯ Output Directory】

⚪︎の状態は空欄の状態。　何もセレクトせずにEnterで標準のままで進める

デプロイ成功するとターミナル上に「Production: https://xxxxx.vercel.app」と表示される

※ Git経由でVercelにデプロイ

npx vercel –prod. はGitを経由せずにVercelへアップする方法