はじめに
React、Next.jsに触れてみたいと思ったのでNext.js + TypeScriptの環境構築をしてみました。
Vercelはフロントエンド向けのホスティングサービスで，GitHubなどと連携すると簡単にデプロイできます！
ちなみに環境はwindows10です。
Next公式ドキュメント：https://nextjs.org/docs
Next.jsプロジェクトを用意
Node.jsのインストール
ここからダウンロードして展開してインストール。
https://nodejs.org/en/download
今回はWindowsで環境構築するため Windows Installer を選択
Nextプロジェクトを新たに作成
-
node --versionでNodeが動くことを確認 - 適当な場所にディレクトリを作成して移動
-
npx create-next-app --typescriptを実行して新規プロジェクトを作成- 指示に従って必要なパッケージをインストール
- ※ --typescriptは，--ts オプションでも可
パッケージはそれぞれインストールするか選べます。
Need to install the following packages:
create-next-app@14.0.3
Ok to proceed? (y) y
√ What is your project named? ... my-next-app
√ Would you like to use ESLint? ... No / Yes
√ Would you like to use Tailwind CSS? ... No / Yes
√ Would you like to use `src/` directory? ... No / Yes
√ Would you like to use App Router? (recommended) ... No / Yes
√ Would you like to customize the default import alias (@/*)? ... No / Yes
Creating a new Next.js app in D:\devwork\next-app.
ローカルで動作確認
エラーが無ければNextの環境構築ができているはずなので動作確認を行います。
- カレントディレクトリを作成したプロジェクトへ変更。
-
npm run devを実行。 - ブラウザで http://localhost:3000/ にアクセス。
Nextの初期ページが表示されればOKです。
GitHubへプッシュ
リモートに適当なリポジトリを作成してNextプロジェクトをプッシュします。
Vercelへデプロイ
- URL:https://vercel.com/new にアクセス
-
Add github account を選択してアカウントを追加
-
リポジトリを選択してインストール
-
Import Git Repository に追加されたリポジトリのImportボタンを押す
-
適当なプロジェクト名を入力、Framework Preset は Next.jsを選択してDeploy
-
デプロイ成功！
なんと猫の毛繕いタイムより早くデプロイすることが出来ました！
生成されたドメインにアクセスするとNext.jsの初期ページが表示されます。
後は追跡中のブランチに変更を加えればVercelにも反映されます！
Vercelの料金体系
無料のHobby枠でもServerless FunctionsやDB(KV or Postgres)が使える上にCDNも利用できます。
すごい！！0円で遊び放題！！太っ腹！！