「Next.js + AWS」を使用して、Webサイトを爆速で公開する

業務でハンズオン資料を作成したので、Qiitaにも初投稿してみる…！

## この記事でできること
1. Next.js アプリケーションの作成
1. AWS CodeCommit でソース管理
1. AWS Amplify へデプロイ

## 手順の前提
* VSCodeがインストールされていること。
* AWS アカウントを持っていること。

## 手順
### 1. Node.js をインストールする
Next.js を使用するには、Node.js を使用する必要がある。

以下の記事を参考にNode.jsをインストールする。（公式のダウンロードサイトは [こちら](https://nodejs.org/ja)）

https://johobase.com/node-js-install-setup/

:::note warn
上の記事は少々古めだが、**Node.js v16 以上** をインストールするようにする。
:::

### 2. Next.js アプリケーションを作成する
コマンドプロンプトを開き、任意の場所で以下のコマンドを入力する。
```
npx create-next-app ${ 任意のプロジェクト名 } --typescript --no-eslint --no-tailwind --no-src-dir
```

:::note
コマンドやオプションについての詳細は [こちら](https://nextjs.org/docs/app/api-reference/create-next-app)
:::

Next.js / React / React DOM がインストールされていない場合は、以下の質問が現れる。
```shell_session
Need to install the following packages:
  create-next-app@latest
Ok to proceed? (y)
```
`Enter`キーを押下すると、Next.js アプリケーションに必要なものがインストールされる。

その他の質問には以下のように回答する。
* Use App Router (recommended)? → **Yes**
* Would you like to customize the default import alias? → **No**

質問に回答すると、新しいプロジェクトが作成される。
初期状態のファイル構成は以下の通り。
![clipboard (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3471657/aa2a3805-2942-4a96-002c-751fbbe373df.png)

### 3. フォルダをVSCodeで開く
VSCodeを立ち上げ、上部メニューから「**ファイル > フォルダーを開く**」を選択する。
![clipboard (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3471657/0da13ec6-7ff7-3ac7-5eb3-7c3d6da46db4.png)

作成したプロジェクトを選択すると、VSCodeでフォルダを開くことができる。

### 4. 開発環境で出力を確認する
VSCodeの上部メニューから「 **ターミナル > 新しいターミナル** 」を選択する。
![clipboard (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3471657/fed017a2-832e-be26-b61b-c462a13f8bf2.png)

VSCodeのターミナルで以下のコマンドを実行する。
```
npm run dev
```

「 http://localhost:3000 」にアクセスすると出力を確認することができる。
初期状態では以下のような画面になる。「app/page.tsx」にデフォルトで記述されているページの内容が表示される。
![clipboard (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3471657/881e54f1-d13b-aab6-1fa5-e69f0c707423.png)

### 5. ファイルの概要
デフォルトで作成されるファイルの概要は以下の通り。
* page.tsx : ルーティングに対応する UI を定義するファイル。
* layout.tsx : 全ページのレイアウトをまとめて設定するファイル。全ページで共通で使用されるヘッダーなどのコンポーネントや、`<html>タグ`、`<body>タグ`を設定する。

### 6. ページを追加する
**appディレクトリ内** で「 **新しいファイル...** 」を選択し、以下を入力する。
```
${ 任意のディレクトリ名 }/page.tsx
```
![clipboard (5).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3471657/445da39a-959c-2345-34ee-911944479b6f.png) 

インポートするファイルの階層などに気を付けて中身を記述する。
![clipboard (6).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3471657/d33d496f-a034-fa74-b55d-8402712a485c.png)

上記の例の場合、「app/animal/page.tsx」の出力内容は「 http://localhost:3000/animal 」にアクセスすると確認することができる。
![clipboard (7).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3471657/ff492b50-e7c3-3ee3-bf42-771c629063e9.png)

「/animal/dog」というページを作成したい場合は、animalディレクトリ内で「dog/page.tsx」を作成すれば良い。

### 7. ページの遷移方法

Next.jsでのページ遷移の方法は、以下の2種類存在する。
1. 【推奨！】Next.jsで用意されている **Linkコンポーネント** を使用する方法（[公式ドキュメント](https://nextjs.org/docs/app/api-reference/components/link)）
1. 【非推奨】**useRouter** を使用する方法（[公式ドキュメント](https://nextjs.org/docs/app/api-reference/functions/use-router)）

ここでは公式で推奨されている **1. Linkコンポーネントを使用する方法** のみ記述する。

インポート文に以下のコードを追加する。
```jsx
import Link from 'next/link';
```

以下のように、JSX内で使用する。（その他のオプションは公式ドキュメントを参照）
```jsx
<Link href="${ 遷移先のディレクトリ }">${ リンクを与えたいもの }</Link>
```

サンプルとして、4で作成した「 http://localhost:3000/animal 」から、「 http://localhost:3000 」に遷移できる簡単なコードを作成した。
```jsx:app/animal/page.tsx
import styles from '../page.module.css'
import Link from 'next/link';

export default function Animal() {
  return (
    <main className={styles.main}>
        <Link href="/">トップページへ戻る</Link>
    </main>
  )
}
```

Next.jsで用意されている方法でページ遷移するとリロードが発生しない。（[**SPA**（シングルページアプリケーション）](https://digitalidentity.co.jp/blog/creative/about-single-page-application.html)）

### 8. インターネットへ公開する
#### 8.0. CodeCommit の Git 認証情報を設定する
:::note
8.0 の内容は、CodeCommit の Git 認証情報が設定済みの場合、飛ばして良い。
:::
CodeCommitを利用するためには、Git 認証情報の設定をする必要がある。
以下の記事を参考にGit 認証情報を設定する。

https://docs.aws.amazon.com/ja_jp/codecommit/latest/userguide/setting-up-gc.html

#### 8.1. CodeCommit でリポジトリを作成する
AWSにサインインし、サービス「 **CodeCommit** 」にアクセスする。

画面右側にある「 **リポジトリを作成** 」を選択する。
![clipboard (8).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3471657/b592473a-7493-f468-7989-e45950e969cd.png)

リポジトリ名や説明を入力し、「 **作成** 」を選択する。
![clipboard (9).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3471657/b162c74e-a9fc-fc3e-6ef7-a4db0be7263c.png)

画面右側にある「 **URL のクローン > HTTPS のクローン** 」を選択する。
リモートリポジトリの操作に必要なURLがクリップボードにコピーされる。
![clipboard (10).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3471657/cd9e9972-33c8-7f83-5ef8-445b5be799a1.png)

#### 8.2. CodeCommit へコードをPUSHする
VSCode上で `ctrl + shift + P` と入力し、コマンドパレットを表示させる。

コマンドパレットで「 **Git: Add Remote...** 」を検索し、選択する。
8.1 でコピーしたURLを貼り付け、「 **URLからリモートを追加する** 」を選択する。
![clipboard (11).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3471657/299be443-bad2-bb1d-cac8-de1dbfa8bec9.png)

任意のブランチ名を入力し、`Enter` キーを押下する。

コマンドパレットで「 **Git: Push to...** 」を検索し、選択する。
先ほど入力したブランチ名を選択する。

CodeCommitにファイルが追加されていることが確認できる。
![clipboard (12).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3471657/d9bfe782-52ca-52a9-207d-1ecc68112db8.png)

#### 8.3. Amplify Hosting にデプロイする
AWSのサービス「 **AWS Amplify** 」にアクセスする。

画面右側にある「 **新しいアプリケーション > ウェブアプリケーションをホスト** 」を選択する。
![clipboard (13).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3471657/b5e2dcb7-0aad-b56e-4b9c-1a9b720493fb.png)

「 **AWS CodeCommit** 」を選択し、「 **続行** 」を選択する。
![clipboard (14).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3471657/0e4e1542-dae4-e38b-293b-e8bade5ef743.png)

8.1～8.2で作成したリポジトリとブランチを選択し、「 **次へ** 」を選択する。
![clipboard (15).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3471657/3f94a830-9294-6428-171d-0f2f26c49778.png)

必要に応じてビルドの設定を行い、「 **次へ** 」を選択する。（Amplify が自動的に正しいビルド設定を検出するため、設定を変更する必要はない。）
![clipboard (16).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3471657/6b6ab229-9b6d-bb00-17f5-979a8cfe37bf.png)

内容に誤りがないか確認し、「 **保存してデプロイ** 」を選択する。
![clipboard (17).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3471657/0a69b50c-91e1-3f51-19a5-7ff28bfe9e95.png)

作成されたアプリケーションのAmplifyコンソールに画面が切り替わり、プロビジョニング・デプロイが開始される。（この処理には2～3分かかる。）
![clipboard (18).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3471657/3c49e05f-be7f-a459-66ee-18d397f9c676.png)

上の写真の状態になればデプロイは成功。

#### 8.4. アプリケーションを表示する
デプロイが成功した状態でAmplifyコンソールにあるURLにアクセスすると、
![clipboard (19).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3471657/e2a65163-54f7-3f41-0c1b-c067dbd98869.png)

作成したアプリケーションを確認することができる。
![clipboard (20).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3471657/80a1aea7-7423-06ba-5881-8f028e198900.png)
![clipboard (21).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3471657/cd5ab448-4594-0648-d73a-ee32ec3b4080.png)

# 参考サイト まとめ
* [Node.js インストール方法](https://johobase.com/node-js-install-setup/)
* [Next.js - `create-next-app`](https://nextjs.org/docs/app/api-reference/create-next-app
)
* [Next.js - Linkコンポーネント](https://nextjs.org/docs/app/api-reference/components/link)
* [Next.js - useRouter](https://nextjs.org/docs/app/api-reference/functions/use-router)
* [SPA（シングルページアプリケーション）](https://digitalidentity.co.jp/blog/creative/about-single-page-application.html)
* [Next.js 13 アプリケーションを Amplify Hosting でデプロイする（AWS公式が出しているハンズオン資料）](https://aws.amazon.com/jp/blogs/news/amplify-next-js-13/)