Deploy NEXT JS 14^ and NextAuth 5^ in Amplify AWS
Introduction
Today, there are over1.11 billionwebsites, a staggering increase from just one in 1991, with350.4million registered domains. It’s fascinating to see how far we’ve come. Despite the diversity, a common thread is that all these websites are in production. I will cover a guide on how to deploy your NEXT JS 14^ and NextAuth 5^ to production usingAWS amplify.
Prerequisites
Your NEXTJS App with authentication,checkout out how to create one here.
AWS account (Here is how to create one)
Let’s start
Let’s start
Step 1. Creating Amplify APP
Login to your AWS account.
Navigate to the search bar at the top.
3. Click on amplify, it will redirect you to this screen, then click — create new app.
4. Click on Github, if your code is on github, similar if you are using Gitlab or BitBucket, You can click deploy without Git to manually add your project.
5. Click next and connect to your Github account, after redirect, specify the Repository and the branch.
6. Click next and next again, remember to change your name or any other configuration of your choice.
7. Click on save and deploy, then wait for the app to deploy as you grab your mug of coffee
8. After deploying, yow will see this page.
9. On the far left click on the hosting drop down.
Step 2. Setting up Environment and build script
10. Click on Environment Variables
11. Click on manage and add your environment variables.
For my case i will add AUTH_SECRET, AUTH_URL.
If you configured for example github add, AUTH_GITHUB_SECRET, AUTH_GITHUB_ID.
12. Click save and click on build settings.
13. To Make environment variables accessible to server-side runtime, we need to pass them to env.production. Click on edit, on the upper right.
14. After clicking on edit you can change your build settings, on the build setting we will add— env | grep -e AUTH_SECRET -e AUTH_URL>>.env.production
This is how your build should look like, You can add more variables if you have more.
version: 1 frontend: phases: preBuild: commands: - npm ci --cache .npm --prefer-offline build: commands: - env | grep -e AUTH_SECRET -e AUTH URL>>.env.production - npm run build artifacts: baseDirectory: .next files: - '**/*' cache: paths: - .next/cache/**/* - .npm/**/*15. Click on save
16. We need to trigger our app to redeploy we can do this by
1. Making changes and pushing, this will trigger another deployment.
Congratulations you deployed your app in production what’s remaining is the DNS part.
We will cover the DNS in another blog stay tuned.
Please share if you face issues, i will be glad to help.