こんにちは、フロントエンドチームの谷（@high_g_engineer）です。
今週のフロントエンド定例の内容を記載します。

フロントエンド定例について、以前の記事（ランサーズのフロントエンドチームが取り組んでいること）でお伝えしたのですが、毎週金曜日に開催しており、実際の業務で取り組んでいることや気になった技術情報等をシェアしあう会になっています。

以下が今週の内容です。

Next.js + Amplify

Next.js週次報告の続きです。
今回はAmplify Hostingを利用し、Next.jsで作成したアプリをSSRで配信したいと思います。
その前に軽くAmplifyとは何か？に触れていこうと思います。

Amplify

Amplifyとは？

Amplifyは、Webアプリやモバイルアプリの環境構築、デプロイ、ホスティングまでが簡単に出来るAWSのサービスです。
Next.jsを始めとしたフロントエンドのフルスタックフレームワークとの相性が良く、Vercelを利用しない場合の現実解として用いられることが多くなっています。

Amplifyには大きく3つの扱い方（Amplify CLI, Amplify Console, Amplify SDK）が存在しますが、今回はAmplify Consoleを利用します。

Amplify Consoleには、Amplify HostingとAmplify Studioという2つのサービスがあります。

Amplify Hosting

ウェブアプリケーションをホストします。
Git リポジトリを接続してフロントエンドとバックエンドを継続的にデプロイします。
グローバルに利用可能な CDN でホストします。

Amplify Studio

バックエンド側をAmplifyで管理できるツールです。
簡易的なDataStoreが利用可能です。
Figmaと連携し、素早くコンポーネントとデータを連携させることも可能です。

今回は、Amplify Hostingのみを利用し、Next.jsのコードをデプロイ&ホスティングしていこうと思います。

Next.jsでSSRのコードを書く

Next.jsの環境構築を npx create-next-appで行います。

SSRを確認する為に、以下の様な野良APIを使います。
https://jsonplaceholder.typicode.com/posts

Next.jsのindex.tsxには、以下のコードを記述します。

import Head from 'next/head'
import styles from '@/styles/Home.module.css'
import type { NextPage, GetServerSideProps } from 'next'

type fetchData = {
  userId: number
  id: number
  title: string
  body: string
}

type Props = {
  posts: fetchData[]
}

const Home: NextPage<Props> = ({ posts }) => (
  <>
    <Head>
      <title>Create Next App</title>
      <meta name="description" content="Generated by create next app" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <link rel="icon" href="/favicon.ico" />
    </Head>
    <main className={styles.main}>
      <h1>Hello world</h1>
      <p>hogehoge</p>
      {posts.map((item, key) => (
        <div key={key}>
          <h2>{item.title}</h2>
          <p>{item.body}</p>
          <p>userId: {item.userId}</p>
        </div>
      ))}
    </main>
  </>
)

export const getServerSideProps: GetServerSideProps = async () => {
  // 野良APIから情報を取得
  const res = await fetch('https://jsonplaceholder.typicode.com/posts')
  const posts = await res.json()
  return {
    props: {
      posts
    }
  }
}

export default Home

yarn devコマンドを実行し、ここまでの内容が正しく動作しているかをlocal環境で確認します。
下記の様にgetServerSidePropsでfetchしたデータが正しく動作していることが確認できました。

つぎは、Amplify側の準備を行いましょう。

Amplify 環境構築

Amplifyを利用する為には以下の手順を踏みます。

AWSへログイン
Amplify Consoleを開く（AWSの検索で「Amplify」を入力し、AWS Amplifyを選択でok）
すべてのアプリページで新しいアプリケーション→ウェブアプリケーションをホスティングを選択
リポジトリサービス選択
GitHubとAWSを連携
画面に沿って認証する
Only select repositoriesを選択
リポジトリ選択でNext.jsのソースコードが格納されているものを選ぶ
Install & Authentication
画面に沿ってリポジトリ選択
amplify.ymlの内容を確認（デフォルトでok）
IAMなどを作成したことがなければ新規、以前に作成していれば既存を選択
画面に沿うことでプロビジョン→構築→デプロイが自動化

ここまでが完了すると、Amplifyの画面が表示され、
Next.jsのビルド＆自動デプロイが実行されている状態になります。

数分待つとデプロイが完了し、初期ドメインで内容を確認できます。
SSRのコードも難しい設定をせずに、初期で対応していました。簡単です！

変更を加えたい場合は、ソースコードを編集し、mainブランチにプッシュすると、

都度、CIが動作し、プロビジョン→構築→デプロイが行われます。
（デプロイまで4, 5分ほど待ちます）

以下の様に反映されています。こちらも簡単！

デプロイ時のSSR か SSGかの判定について

Next.js + AmplifyでSSRかSSGは、package.jsonのbuildの内容で判断している様です。

以下、Amplifyの公式からの引用です。

パッケージの JSON ファイル設定 Next.js アプリをデプロイすると、
Amplifypackage.json はファイル内のアプリのビルドスクリプトを検査して、
アプリが SSR か SSG かを検出します。

Next.js SSR アプリのビルドスクリプトの例を次に示します。
“next build”ビルドスクリプトは、アプリが SSG ページと SSR ページの両方をサポートしていることを示しています。

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

Next.js SSG アプリケーションのビルドスクリプトの例を次に示します。
“next build && next export”ビルドスクリプトは、アプリが SSG ページのみをサポートしていることを示しています。

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

ただ、SSGの方も試してみると、

[ERROR]: !!! CustomerError: Cannot read ‘next’ version in package.json.

といったエラーが表示されてしまいました。
少し対応が必要です。。

まとめ

個人的にNext.jsのSSRを利用したホスティングは、少し前までVercel一強だと感じていたのですが、Amplifyでも十分だと思いました。

Amplify Studioなどは未だ使いこなせていないですが、Backendの設定がAWS上で完結できそうで、
他にもS3などの他のAWSサービスとも親和性高く連携できる等といったメリットがある為、Next.js + Amplifyの活用例が増えてきているのかなと思いました。

SSGやISRに関しては、Amplifyでは確認ができていないので、今後確認していきたいところです。

参考

Amplify で Next.js SSR アプリをデプロイする
https://docs.aws.amazon.com/ja_jp/amplify/latest/userguide/deploy-nextjs-app.html

Next.js 13 アプリケーションを Amplify Hosting でデプロイする
https://aws.amazon.com/jp/blogs/news/amplify-next-js-13/

fetchの結果に型を付けたい
https://zenn.dev/uzimaru0000/articles/json-type-validation

ランサーズでは、フロントエンドエンジニアを随時募集しておりますので、まずはお話でもという方はご連絡くださいませ！

フロントエンドエンジニア(本社)の採用情報 | ランサーズ株式

前回の定例内容はこちらから確認可能ですのでご興味いただければ下記のリンクから閲覧いただければと思います。

https://engineer.blog.lancers.jp/?s=フロントエンド定例