Next.js AWS Deployment Made Easy with AWS Amplify

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.

Prerequisites

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

Creating a Next.js App

You will create a new Next.js app using Create Next App. Open your terminal and run:

Copy
1
2
npx create-next-app amplify-nextjs --javascript --no-eslint
cd amplify-nextjs

This sets up a new Next.js app where you can start adding AWS Amplify features.

Setting Up AWS Amplify

Initializing Amplify

First, initialize an Amplify project:

Copy
1
amplify init

Follow the prompts to configure your project. This will set up your backend environment in AWS.

Adding Authentication

To add authentication to your app, use the Amplify CLI:

Copy
1
amplify add auth

Select the default configuration to allow users to sign in with a username.

After setting up authentication, push the changes to AWS:

Copy
1
amplify push

Configuring the App

Install the necessary Amplify libraries:

Copy
1
npm install aws-amplify @aws-amplify/ui-react

In your pages/_app.js, configure Amplify:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
import "@aws-amplify/ui-react/styles.css";
import { Amplify } from "aws-amplify";
import awsExports from "../src/aws-exports";
import "../styles/globals.css";

Amplify.configure({ ...awsExports, ssr: true });

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export 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.

Implementing Server-Side Rendering and Static Site Generation

Server-Side Rendering (SSR)

To create an SSR page, add the following code to pages/ssr.js:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
export default function SSR({ formattedDate }) {
  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);
  return { props: { formattedDate } };
}

Static Site Generation (SSG)

For an SSG page, update pages/index.js:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
export default function Home({ formattedDate }) {
  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 } };
}

Deploying Your App to AWS Amplify

Connecting to a Git Repository

Commit your code to a Git repository (GitHub, GitLab, Bitbucket, or AWS CodeCommit). Then, in the AWS Amplify Console:

1. Select Host your web app.

2. Choose your Git provider and authorize AWS Amplify to access your repository.

3. Select the repository and branch you want to deploy.

Configuring Build Settings

AWS Amplify automatically detects build settings, but you can customize them in an amplify.yml file if needed. For example:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

Final Deployment

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.

Conclusion

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.