Amplify Hosting で Next.js 13 がデプロイできるようになったよ
2022-12-07
![](https://blog.tacck.net/wp-content/uploads/2020/04/4aab834b9b2492990f3a9f760c800fef.png)
こちらは、 “ゆるWeb勉強会@札幌 Advent Calendar 2022” の 7日目の記事です。
なったよ!
Deploy a Next.js 13 app to AWS with Amplify Hosting | Amazon Web ServicesJune 27, 2024: This blog post covers Amplify Gen 1. For new Amplify apps, we recommend using Amplify Gen 2. You can learn more about Gen 2 in our launch blog post. Today, AWS Amplify Hosting announces Next.js 12 and 13 support. Your app can take advantage of Next.js features including server-side rendering (SSR), API routes, middleware, […]
aws.amazon.com
![Deploy a Next.js 13 app to AWS with Amplify Hosting | Amazon Web Services](https://blog.tacck.net/wp-content/uploads/yahman_addons_cache/aws.amazon.com.png)
![Deploy a Next.js 13 app to AWS with Amplify Hosting | Amazon Web Services](https://blog.tacck.net/wp-content/uploads/yahman_addons_cache/d2908q01vomqb2.cloudfront.net_0a57cb53ba59c46fc4b692527a38a87c78d84028_2022_11_16_AWS_Amplify_Hosting_announces_Next.js_13_support.png)
ざっくりと、下記の改善が入っているとのことです。
- Faster builds. Next.js apps deploy at least 3x faster, helping developers deliver changes to production faster.
ビルドが少なくとも3倍は早くなった。 - Amazon CloudWatch integration. Server-side logs are delivered to Amazon CloudWatch, allowing teams to observe, monitor and troubleshoot their apps.
Amazon CloudWatch と統合され、サーバサイドのログの確認や、アプリケーションの監視などができるようになった。 - Next.js apps work seamlessly with Amplify back-ends such as Authentication and Data.
Next.js のアプリケーションが Authentication や Data といった Amplify のバックエンドとシームレスに使えるようになった。 - Fully managed hosting infrastructure reduces operational overhead for development teams, with fewer resources to manage in your AWS account. To learn more about pricing visit https://aws.amazon.com/amplify/pricing/.
フルマネージドのホスティング環境により、AWSアカウントでのリソース管理を少なくする。(これは元々では?)
上記記事にチュートリアルもありますが、こちらでもデプロイまでをざっくり紹介します。
手順
手元で Next.js のプロジェクトを作成します。
% npx create-next-app@latest next-app --ts % cd next-app % git init % git add . % git commit -m "Create Next App"
GitHub にリポジトリを作成し、pushします。
% git branch -M main % git remote add origin git@github.com:[your-account]/next-app.git % git push -u origin main
![](https://blog.tacck.net/wp-content/uploads/2022/12/20221207_001-1024x843.png)
AWS Amplify コンソールでプロジェクトを作成し、上記リポジトリと連携します。
![](https://blog.tacck.net/wp-content/uploads/2022/12/20221207_002-1024x843.png)
![](https://blog.tacck.net/wp-content/uploads/2022/12/20221207_003-1024x843.png)
![](https://blog.tacck.net/wp-content/uploads/2022/12/20221207_004-1024x843.png)
![](https://blog.tacck.net/wp-content/uploads/2022/12/20221207_005-1024x843.png)
![](https://blog.tacck.net/wp-content/uploads/2022/12/20221207_006-1024x843.png)
デプロイを待ちます。
![](https://blog.tacck.net/wp-content/uploads/2022/12/20221207_007-1024x768.png)
デプロイできたら、ページを確認しましょう。
![](https://blog.tacck.net/wp-content/uploads/2022/12/20221207_008-1024x768.png)
![](https://blog.tacck.net/wp-content/uploads/2022/12/20221207_009-1024x768.png)
SSRなども使えるので、ぜひ試してみてください!