🎉

reactチュートリアル7（Deploying Your Next.js App）

2024/05/19に公開

Next.js

React

tech

NextJSの学習をする。
以下のページを翻訳し記録する。

基礎レッスンの最後として、Next.jsアプリを製品デプロイします。

Vercelにデプロイする方法とNext.jsの開発者によって作られたプラットフォームに付いて学び、その他のデプロイ方法いついて話します。

事前条件: このレッスンにはGitHub accountが必要になります。

このレッスンで学ぶこと。

VercelにNext.jsアプリをデプロイする方法
DPSワークフロー(Develop, Preview, Ship)
ホスティングプロバイダにNext.jsアプリをデプロイする方法

GitHubにpushする

デプロイする前に、Next.jsアプリをGitHub accountにpushしましょう。これでデプロイはより簡単になります。

あなたのgithubアカウントにnextjs-blogという名前で新しいレポジトリを作ります。
レポジトリはpublicでもprivateでも良いです。READMEファイルを含んだ初期化をする必要はありません。
わからない場合はGitHubガイドを参照して下さい

次に

もしレポジトリをローカルで初期化していなければ初期化してください
Next.jsアプリをGitHubレポジトリにpushしてください

GitHubにpushするのは次のコマンドでできます(<username>はあなたのGithub usernameに置き換えてください)

git remote add origin https://github.com/<username>/nextjs-blog.git
git push -u origin main

GitHubレポジトリの準備が完了したら次のページに進みましょう。

Vercelにデプロイする

最初に https://vercel.com/signup に行きVercelのアカウントを作ります。Continue with GitHubを作り、サインアッププロセスに進みます。

nextjs-blogレポジトリをインポートする

サインアップしたらnextjs-blogレポジトリをVercelにインポートします。https://vercel.com/import/gitから実行できます。

Vercel for GitHubをインストールする必要があります。全てのレポジトリへのアクセス権をつけられます。
Vercelをインポートしたらnextjs-blogをインポートします。

次の設定はデフォルトのままで大丈夫で変える必要はありません。VercelはNext.jsを使っていることを検知し、最適なセッティングを選択します。

Project Name
Root Directory
Build Command
Output Directory
Development Command

デプロイするとNext.jsアプリはビルドを開始します。これは１分以下で終わるはずです。

ヘルプが利用可能です: もしデプロイが失敗したらGitHub Discussionsでヘルプを得られます。デプロイについての詳細はout documentationを参照してください。

終わったらデプロイされたURLがわかります。URLのうちの一つをクリックするとNext.jsスターターページがライブで確認できます。

おめでとうございます！Next.jsアプリを製品デプロイできました。次はVercelの詳細と推奨のワークフローについて説明します。

Next.jsとVercel

VercelはNext.jsの開発者によって作られ、Next.jsのサポートは一流です。Next.jsアプリをVercelにデプロイするときデフォルトで次のことが起こります。

Static Generationを使うページとアセット(JS, CSS, images, fonts, etc)は自動的にVercel Edge Networkでサーブされ、猛烈に高速です。
Server-Side RenderingとAPI routesを使うページは自動的に隔離されたServerless Functionになります。これによりページ描画とAPIリクエストは無限にスケールします。

Vercelは更に多くの以下などの特徴を持ちます

Custom Domains: Vercelにデプロイされると、Next.jsアプリにカスタムドメインを割り当てることができます。our documentationを見てください。
Environment Variables: Vercelで環境変数を設定することができます。our documentationを見てください。これらの環境変数をNext.jsアプリで使うことができます。
AUtomatic HTTPS: カスタムドメインを含め、HTTPSがデフォルトで使えます。そしてその他の追加の設定は要りません。SSL証明書は自動更新されます。

詳細はVercel documentationを参照ください。

全てのpushのデプロイをプレビューする

次の手順はオプションです。試してもよいですし、読むだけでも良いです。
デプロイ後、できたら次をやってみましょう。

アプリに新しいブランチを作る
アプリに変更を加えpushする
新しいpull requestを作る

次のようなvercel botからのコメントが見られるはずです。

alt comment-from-vercel-bot

コメント内部のPreviewを押してみましょう。変更点が見られるはずです。

プルリクエストを作成したら、全てのpushに対してVercalは自動的にプレビューデプロイを実行します。プレビューURLは常に最新のプレビューを指します。

このプレビューURLを仲間に共有して迅速なフィードバックを得ることができます。

プレビューデプロイメントが良さそうであればmainにマージしましょう。これによりVercelは自動的に製品デプロイを実施します。

デプロイ、プレビュー、発送

我々がDPS: Develop, Preview, Ship と読んでいるワークフローを見てきました。

Develop: Next.jsでコードを書いて、Next.js開発サーバでホットリローディング機能を活用しました
Preview: GitHubに変更をpushし、Vercelはプレビューデプロイを実施しました。これはURLでアクセスでき、フィードバックをもらうためにURLを共有できます。コードレビューをするためにプレビューのためのデプロイができます。
Ship: 製品デプロイするためにmainにマージをしました。

このワークフローを使うことを強くおすすめします。これにより迅速なイテレーションが可能となります。

Next.jsアプリをデプロイする

Node.jsをサポートするホスティングプロバイダであればNext.jsをデプロイできます。
これまでの説明に従っていれば、あなたのpackage.jsonは次のようなbuildとstartのスクリプトを持つはずです。

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

あなたのホスティングプロバイダで、ビルドスクリプトを一度実行します。これにより、 .next フォルダーに製品アプリがビルドされます。

npm run build

ビルドした後は、startスクリプトがstatic generatedとserver-side rendering、そしてAPI RoutesのハイブリットページをサポートするNode.jsサーバーを開始します。

npm run start

Tips: startスクリプトは"start": "next start -p $PORT"のようにpackage.jsonを更新することで、ポートパラメータを受け入れるようにカスタマイズできます。

以上です！Next.jsのデプロイについて疑問があればGitHub Discussionsで我々のコミュニティに質問できます。

Next.jsアプリをデプロイする

最後に

全ての基礎レッスンを終了しました、お目でおうございます！次のおすすめのステップを紹介します。

あなたのNext.jsアプリを共有する

Twitterであなたがこのチュートリアルで作ったアプリを共有してください。そうしたら、我々も見られるように@vercelにメンションをお願いします。また、本チュートリアルへのフィードバックも嬉しいです。

Next.jsでTypeScriptを使う

TypeScriptを使うのが好みであれば、ここで学習できます。

次に学習するもの

our documentationを見てみてください。特に次のページは面白いかもしれません。

Data Fetching: データ取得について深く学びます
Environment Variables: ビルドインサポートされた環境変数について学びます。
Search Engine Optimization: Next.jsアプリでSEOを最適化する方法を学びます。

会話に参加する

Next.jsに関する疑問があれば何でも、我々のコミュニティGitHub Discussionで歓迎します。