ファイルを編集してFast Refreshを体感してみよう
「Welcome to Next.js!」を「Learn Next.js!」に変更してみましょう。「npm run dev」で立ち上げたサーバーはそのままにしておいてください。
Visual Studio Codeでfirst-learnのブランチを作成します。続いて、「pages」ディレクトリにある「index.js」を開き、13行目（執筆時点）にある「Welcome to」を「Learn」に変更して保存します。
保存した瞬間にブラウザ上の文字がLearnに変わるのを確認できます。これがFast Refreshです。
DPS Workflowでアプリを開発
ここまでローカルの開発環境で確認できましたら、Gitでfirst-learnのブランチを作成し、今までの変更をコミットし、GitHubにfirst-learnブランチをプッシュします。
GitHubでリポジトリを見ると、プルリクエストが作成できるようになってますので、「Create pull request」をクリックし、プルリクエストを作成します。
プルリクエストのページを確認すると、数分でビルドが完了し、プレビュー環境が出来ます。「Visit Preview」をクリックすると本番環境とは別のプレビュー環境が確認できます。
プレビュー環境にて「Lean Next.js!」に表示が変わっていることを確認できましたら、「Merge pull request」をクリックして本番環境に反映させます。
この一連のデプロイの流れをVercelではDPS Workflowと呼んでいます。DPSはDevelop（開発環境での確認）、Preview（プレビュー環境での確認）Ship（本番環境へのデプロイ）の略です。VercelとNext.jsを組み合わせることで最適なDPS Workflowを体験することが可能となります。
なお、ここまでのソースコードはGitHubにて確認できます。
Next.jsでWebアプリを実装するための規約
Webで表示したいhtmlや画像の置き場所を指定するのに、何千行にもわたる設定ファイルを読み解いて、指定するのは骨が折れる作業です。
設定より規約という言葉がありますが、Next.jsでは標準化された規約があり、そちらに従って実装することで、難解な設定ファイルを読み解く必要はありません。
Visual Studio Codeで先ほどのひな形を開いていただくと次のような構成になっています。
今のところ、「pages」と「public」の2つのフォルダを使うとだけ覚えていただければ問題ありません。
「pages」はNext.jsのコードがおかれる場所となります。ビルドが必要なページと覚えておくと良いでしょう。
「public」はビルドが必要のない画像やfavicon、robots.txtなどを置くのに使います。
その他のファイルやフォルダはNext.jsをビルド時に使う設定やモジュールだと思っていただければと思います。
