まえがき

個人開発歴は半年程度しかない僕ですが、今日まで挫折しながらいくつかの方法を試してきました。

そんな僕が、今最もオススメな、挫折しない個人開発の始め方を紹介します。

ステップ1：nodeのインストール

nodeが入ればなんでもいいです。以下ではnodenvを使った方法を説明します。
nodenvはディレクトリごとにnodeのバージョンを切り替えられるのが利点です。
僕のように仕事でもnodeを使う人には特にオススメできます。

nodenvをインストールする
nodeの好きなバージョンをインストールします
- 使いたいライブラリが最新版に対応していないなどの特殊な理由がなければ、最新版を選択するのがいいでしょう
```
# インストール可能なバージョンの一覧を見る
nodenv install -l
# 特定のバージョンのnodeをインストール
nodenv install 13.11.0
```
適当なディレクトリを作成します
```
mkdir node-dev
cd node-dev
```

nodeのバージョンを指定

nodenv local 13.11.0
# nodenv install したバージョンしか指定できないので注意
# これでこのディレクトリではnodev13.11.0が使われるようになりました

linux (wsl)だとコレがラクそう
https://qiita.com/seibe/items/36cef7df85fe2cefa3ea

ステップ2：next.jsプロジェクトを新規作成

next.jsプロジェクトをつくる

npm init next-app
# プロジェクト名など、少しの質問に答えていきます

noxt.jsプロジェクトをローカルで確認する
- 以下コマンドを入力すると、devサーバーが立ち上がるので、ブラウザでhttp://localhost:3000にアクセスしてみてください
```
cd your-project-name
npm run dev
```

ステップ3：コードをちょっと変更してみる

your-project-name/pages/index.jsのコードをテキトーに変更して、保存してみましょう

おめでとうございます！今ここに、世界に一つだけのnext.jsプロジェクトが爆誕しました。

ステップ4：githubリポジトリにnext.jsプロジェクトをpushする

github(gitlabでも可)のページ上で新しいリポジトリを作成する

add&commit して作成したリポジトリにpushする

git add .
git commit -m "launch"
git remote add origin git@github.com:XXXXXXXXXX/xxxxxxxxxx.git
git push -u origin HEAD

ステップ5：vercelでデプロイする

vercelにサインアップ
- Continue with GitHub (GitLab)でサインアップする
先ほど作成したgithubリポジトリと接続する
- From Git Repositoryを選択
- Import Project from GitHub から先ほどのリポジトリを選択
- あとは次へ連打でOK

なんとこれでデプロイ完了！今ここに、世界に一つだけのwebアプリが爆誕しました。

少し待つと、ビルドが終了し、世界に向けてwebアプリが公開されます。右上にあるvisitボタンをクリックして見に行ってみましょう。当然、スマホからでも見られます。

vercelのすごいところは、CD(Continuous Deployment)の設定も自動でやってくれることです。
そのほかにも、pull requestをつくると、自動で動作確認環境を作ってくれたりもします。
さらに、最も驚くべきが価格、なんとこれ、永久無料です！！！

Vercelは別にnext.js専用のプラットフォームではないです。

HTML＋CSS＋JSで作ったアプリとか、create-react-appで作ったアプリとか、Gatsbyで作ったアプリとかなら、なんでも動きます。

ただ、Vercelとnext.jsは作っている会社が一緒なので、相性が良いです。

さらに、next.jsはバックエンドAPIも同一のプロジェクト内に定義できるので、フロントエンドもバックエンドもまとめてVercelでデプロイできるのが良いです。

CDの良さを体感できる動画

コード変更 → git push → 40秒待つ → 本番環境に自動デプロイ の様子
コードを変更してそれがすぐにデプロイされるのをみると、モチベが落ちにくいです。このスピード感がキモなのです。

おまけ：このあとどうすれば良い？

何か作りたいものを作ってみましょう。それが一番学べるんじゃないかなと僕は思っています。
作りたいものが見つからない人は定番の、カウンターやtodoリストを作ってみましょう。
Reactって何？って人は公式のチュートリアルを参考に、your-project-name/pages/index.jsを書き換えていくと、Reactがわかってくるかもしれません。
next.jsの公式のチュートリアルもわかりやすかったです。
いい感じの見た目にならなくて困っている方は、Material UIなどのライブラリを使用することをオススメします。
DBを使うwebアプリを作りたい場合は、RDSやCloud Firestoreなどを使うと良いかもしれません。
- 実は僕も模索中なので、安くて使いやすいDBサービスあったら教えてください。

質問あったらコメントください。

不適切な表現があったら教えてください。

【なろう系】たったの『15分』で個人開発者になれるんですか？【Next.js x Vercel 】