🌙

AWS Amplify にサクッと Next.js 13 をデプロイしてみる

2022/11/19に公開

Next.js

Amplify

tech

AWS Amplify Hosting が Next.js 12 & 13 のサポートを発表

SSRやISR、画像最適化だとか、Next.js の様々な機能が Amplify Hosting で利用可能になりました。Amplify の上で Next.js を走らせることのメリットとして主に以下が挙げられています。

ビルドが早い
少なくとも3倍早くデプロイできるようになったらしいです。何と比較してなのかは明記されていませんでしたが、おそらく従来との比較かなと思います。
CloudWatch との統合
サーバーサイドのログを CloudWatch に吐くことができます。AWS をメインで採用していると、バックエンドは大体 CloudWatch にログが集約されるケースが多いと思います。フロントのログもそこで見ることができるのはデバッグ等の負担が少なくなるかもしれません。
Amplify のバックエンドとのシームレスな連携
認証やDB周りとの連携が捗りそう。
フルマネージドのホスティングインフラ
フルマネージドはやっぱり楽ちんですよね。その分、値段は気になりますが。

触ってみる

セットアップ。

$ yarn create next-app --typescript
$ cd my-next-app-on-amplify

SSG と SSR を試します。

pages/index.tsx

export default function Home({ formattedDate } : { formattedDate: string }) {
  return (
    <>
      <h1>Static page</h1>
      <p>This page is static. It was built on {formattedDate}.</p>
      <p>
        <a href="/ssr">View a server-side rendered page.</a>
      </p>
    </>
  );
}

export async function getStaticProps() {
  const buildDate = Date.now();
  const formattedDate = new Intl.DateTimeFormat("en-US", {
    dateStyle: "long",
    timeStyle: "long",
  }).format(buildDate);

  return { props: { formattedDate } };
}

page/ssr.tsx

export default function SSR({ formattedDate } : { formattedDate: string }) {
  return (
    <>
      <h1>Server-side rendered page</h1>
      <p>
        This page is server-side rendered. It was rendered on {formattedDate}.
      </p>
      <p>
        <a href="/">View a static page.</a>
      </p>
    </>
  );
}

export async function getServerSideProps() {
  const renderDate = Date.now();
  const formattedDate = new Intl.DateTimeFormat("en-US", {
    dateStyle: "long",
    timeStyle: "long",
  }).format(renderDate);
  console.log(
    `SSR ran on ${formattedDate}. This will be logged in CloudWatch.`
  );
  return { props: { formattedDate } };
}

Amplify ホスティングを選択します。

あとは、GitHub のリポジトリを連携したりして、デプロイを実行すると、以下のようにフレームワークが自動検出されるのであとはGUIでぽちぽちするだけです。

所感

だいたい3分くらいでビルドからデプロイが完了した。vercel が諸事情で使えない場合のオルタナティブとしてはかなり良さそうなので、テストアプリをデプロイする分には重宝できる。
ただ、ランタイム周りの問題（ランタイムのサポートが切れるとか、ライブラリが特定のランタイムで使えないとか）はおそらく発生しうるので、それだとコンテナの方が結局リスク少ないよねとなってしまうのかなと。
ちなみにまだ experimental ですが、Next.js 13 の目玉機能の一つである app ディレクトリも動きました。

GitHubで編集を提案

AWS Amplify Hosting が Next.js 12 & 13 のサポートを発表

触ってみる

所感

Discussion