Next.jsをゼロからマスターする Part 8

2024年12月4日

今回の講座は、ひとまず最終回となります。VercelにNext.jsのプロジェクトを公開する手順を解説します。

Githubにアカウントを持っていることが前提になります。まだGithubのアカウントを作成していない方は、Github(https://github.com/)でアカウントを作成してくおいてください。
GitとGithubの操作を簡単に行うため、まずはGithub Desktopアプリをダウンロードします。

GitHubデスクトップアプリのダウンロードとログイン手順

1. GitHubデスクトップアプリのダウンロード

GitHubデスクトップの公式ウェブサイト（https://desktop.github.com/）にアクセスします。
「Download now」ボタンをクリックして、「Download for Windows (64bit)」または「Download for macOS」ボタンをクリックして、お使いのOSに適したバージョンをダウンロードします。
ダウンロードしたインストーラーを実行し、画面の指示に従ってインストールを完了します。

LinuxでGitHub Desktopをダウンロードする

必要なパッケージのインストールをするために、依存パッケージをインストールします。ターミナルで以下のコマンドを実行します。

sudo apt update
sudo apt install -y wget gpg

GitHub Desktopの.debパッケージをダウンロードをしていきます。
GitHub Desktopのリリースページにアクセスし最新の .deb パッケージをダウンロードします。(https://github.com/shiftkey/desktop/releases)
パッケージをインストールするためにダウンロードした .deb パッケージをインストールします。

sudo dpkg -i github-desktop-linux-x64-<version>.deb
もし依存関係の問題が発生した場合は、次のコマンドで解決できます。
sudo apt –fix-broken install

インストールが完了したら、アプリケーションメニューから「GitHub Desktop」を検索し、起動します。

2. GitHubデスクトップアプリのログイン手順

インストールが完了したら、GitHubデスクトップアプリを起動します。
「Sign in to GitHub.com」ボタンをクリックします。

ブラウザが開き、GitHubのログインページが表示されます。GitHubアカウントの認証情報（ユーザー名とパスワード）を入力してログインします。
GitHubがアプリへのアクセスを確認するメッセージを表示します。「Authorize desktop」をクリックして承認します。

ブラウザでの認証が完了すると、GitHubデスクトップアプリに自動的にログインされます。
アプリ内で「Configure Git」画面が表示されたら、GitHubで使用する名前とメールアドレスを入力し、「Finish」をクリックします。

これで、GitHubデスクトップアプリのダウンロードとログインが完了しました。
アプリを使用してリポジトリのクローン、変更の追跡、コミット、プッシュなどのGit操作を簡単に行うことができます。

Next.jsのプロジェクト作成

Next.jsのプロジェクト作成の手順を説明します。

コマンドラインツール（ターミナルやコマンドプロンプト）を開きます。
プロジェクトを作成したいディレクトリに移動します。
以下のコマンドを実行して、新しいNext.jsプロジェクトを作成します。

npx create-next-app@latest my-lecture-page
ここで、”my-lecture-page”はあなたのプロジェクト名です。好きな名前に変更できます。

プロジェクト作成中に表示される設定オプションに答えます。TypeScriptを使用するかどうかなど、いくつかの質問があります。

注意: Next.jsのバージョン15.0.1を使用して、プロジェクトを作成した場合の事例です。バージョンが異なると、これらのステップが異なる場合があります。

ステップ	回答例 (デフォルト)
Need to install the following packages: create-next-app@15.0.1 Ok to proceed? (y)	Returnボタン
?Would you like to use TypeScript?› No / Yes	Yesを選択
?Would you like to use ESLint?› No / Yes	Yesを選択
? Would you like to use Tailwind CSS? › No / Yes	Yesを選択
?Would you like to use src/directory?› No / Yes	Yesを選択
?Would you like to use App Router? (recommended)› No / Yes	Yesを選択
? Would you like to use Turbopack for next dev? › No / Yes	Noを選択
?Would you like to customize the default import alias (@/*)?› No / Yes	Noを選択