リハビリがてらNext.jsでクジアプリを作ってみた〜MacでNext.jsプロジェクトを作成〜
自己紹介
マネーフォワードのQA亀井です。DevOpsにおけるQAをテーマに品質向上させるために日々奮闘しています。
元々はプログラマーなのですが、4年くらい書いておらず、鈍っていてエンジニアとして危機感を覚えています（笑）
はじめに
小説を書いたので、SNSでプロモーションをしようと考えました〜
ネタとして物語に即した言葉を毎日考えようと思ったのですが、きっかけが欲しいなと。
そこで、テーマをクジに書いてを毎日引いて考えようと思い立ちました（なんだその理由はと言われそう）。
ブランクを取り戻すためのリハビリがてら、今まで書いたことない言語に挑戦しようと、Next.jsで実装します！
Next.jsインストール
Node.jsをインストール
Node.js本家サイトから、パッケージをダウンロードして、インストールします。マネージャに従ってポチポチすればインストールできるので、詳細は割愛します。
インストールが終わると「パス通してね」って表示されるので、パスを通します。
ホールディレクトリで下記コマンドを実行します。
.bash_profileが無ければ作成します。
$ touch .bash_profile
ファイルを開きます。
$ vim .bash_profile
パスを記載します。
export PATH=$PATH:/usr/local/bin
ターミナルを再起動した後に、インストールされているかを確認します。
バージョンを表示させます。※バージョンは2023年2月12日現在
$ node -v
v19.6.0
$ npm -v
9.4.0
Next.jsプロジェクト作成
いよいよプロジェクト作成です。対話形式で作成できます。
$ npx create-next-app@latest
What is your project named? … [プロジェクト名を任意で入れる]
Would you like to use TypeScript with this project? … No / Yes
TypeScriptを使ってみたいのでYesにします。
Would you like to use ESLint with this project? … No / Yes
QA（品質保証）としてESLintは必須です（笑）
Would you like to use `src/` directory with this project? … No / Yes
srcディレクトリがあるとスッキリするのでYesにします。
Would you like to use `src/` directory with this project? … No / Yes
appディレクトリがあるとスッキリするのでYesにします。
What import alias would you like configured? … @/*
大人しくデフォルトに従います（笑）
これでNext.jsのプロジェクトが立ち上がりました！
ビルドインサーバ起動！
Next.jsはビルドインサーバを持っているので起動します。
$ npm run dev
http://localhost:3000/ にアクセスします。
下記のような画面が表示されれば成功です！
次回予告
- VSCodeインストール
- くじ引きアプリを作成したよ（ESLintとか）
Next.jsとは直接関係ないこと
ターミナルに表示されるユーザ名を非表示にする
デスクトップのキャプチャを取ることが多く、ユーザ名などがターミナルに表示されているとセキュリティリスクがあるので、非表示にします。
ホームディレクトリにある「.zshrc」に"「export PS1="%~ $ "」を追記します。
export PATH="${PATH}:${HOME}/.krew/bin"
export PS1="%~ $ "
すると、下記のようにユーザ名が非表示になります。
$
ターミナルの色を変える
ターミナル > 環境設定 > プロファイル を開きます。
元々あるプロファイルを複製します。
フォントを大きくしたり、背景色（画像も読める）・文字色をカスタマイズします。
筆者の例
Discussion