Integrating AWS Amplify with Next.js is a powerful way to create, deploy, and manage full-stack web applications. AWS Amplify simplifies cloud operations for web and mobile developers, allowing you to focus on your app's code rather than infrastructure management.
This blog will guide you through using AWS Amplify to build and deploy a Next.js app, covering critical concepts like server-side rendering (SSR), incremental static regeneration (ISR), and setting up authentication.
Before you start, ensure you have the following:
• An AWS account
• Node.js 16 and Next.js 13 installed on your machine
• Basic knowledge of JavaScript, terminal operations, and Git
• Amplify CLI installed and configured on your system
You will create a new Next.js app using Create Next App. Open your terminal and run:
1npx create-next-app amplify-nextjs --javascript --no-eslint 2cd amplify-nextjs
This sets up a new Next.js app where you can start adding AWS Amplify features.
First, initialize an Amplify project:
1amplify init
Follow the prompts to configure your project. This will set up your backend environment in AWS.
To add authentication to your app, use the Amplify CLI:
1amplify add auth
Select the default configuration to allow users to sign in with a username.
After setting up authentication, push the changes to AWS:
1amplify push
Install the necessary Amplify libraries:
1npm install aws-amplify @aws-amplify/ui-react
In your pages/_app.js, configure Amplify:
1import "@aws-amplify/ui-react/styles.css"; 2import { Amplify } from "aws-amplify"; 3import awsExports from "../src/aws-exports"; 4import "../styles/globals.css"; 5 6Amplify.configure({ ...awsExports, ssr: true }); 7 8function MyApp({ Component, pageProps }) { 9 return <Component {...pageProps} />; 10} 11 12export default MyApp;
When configuring your Next.js application, you may need to manage settings using environment variables for various aspects such as server-side rendering, API routes, dynamic routes, and middleware.
To create an SSR page, add the following code to pages/ssr.js:
1export default function SSR({ formattedDate }) { 2 return ( 3 <> 4 <h1>Server-side rendered page</h1> 5 <p>This page is server-side rendered. It was rendered on {formattedDate}.</p> 6 <p><a href="/">View a static page.</a></p> 7 </> 8 ); 9} 10 11export async function getServerSideProps() { 12 const renderDate = Date.now(); 13 const formattedDate = new Intl.DateTimeFormat("en-US", { 14 dateStyle: "long", 15 timeStyle: "long", 16 }).format(renderDate); 17 return { props: { formattedDate } }; 18}
For an SSG page, update pages/index.js:
1export default function Home({ formattedDate }) { 2 return ( 3 <> 4 <h1>Static page</h1> 5 <p>This page is static. It was built on {formattedDate}.</p> 6 <p><a href="/ssr">View a server-side rendered page.</a></p> 7 </> 8 ); 9} 10 11export async function getStaticProps() { 12 const buildDate = Date.now(); 13 const formattedDate = new Intl.DateTimeFormat("en-US", { 14 dateStyle: "long", 15 timeStyle: "long", 16 }).format(buildDate); 17 return { props: { formattedDate } }; 18}
Commit your code to a Git repository (GitHub, GitLab, Bitbucket, or AWS CodeCommit). Then, in the AWS Amplify Console:
Select Host your web app.
Choose your Git provider and authorize AWS Amplify to access your repository.
Select the repository and branch you want to deploy.
AWS Amplify automatically detects build settings, but you can customize them in an amplify.yml file if needed. For example:
1version: 1 2frontend: 3 phases: 4 preBuild: 5 commands: 6 - npm ci 7 build: 8 commands: 9 - npm run build 10 artifacts: 11 baseDirectory: .next 12 files: 13 - '**/*' 14 cache: 15 paths: 16 - node_modules/**/*
After configuring your build settings, review and deploy your app. AWS Amplify will provision resources and deploy your app, making it accessible via a public URL.
Using AWS Amplify with Next.js streamlines the process of building, deploying, and managing full-stack web applications. AWS Amplify offers powerful tools to enhance your development workflow, from setting up authentication to leveraging server-side rendering and incremental static regeneration. With this guide, you can confidently create and deploy your Next.js apps on AWS.
Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!
You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.