Today, when we develop modern web applications, we should use a suitable page rendering technique that makes sense to our application. You may use Server-Side Rendering(SSR), Static Site Generation (SSG), Client-side rendering, or a mix of these techniques.

Next.js is a fast and reliable way to build production-ready React web applications that supports all three rendering modes mentioned above.

The best thing about Next.js is that you can use a blend of SSR, SSG or Client-side rendering in the same application as per your use case.

Because of this flexibility, the major players in the IT industry have started embracing Next.js rapidly. Therefore public cloud providers like AWS and Azure began to providing more support and love to Next.js.

In this article, let’s discuss how AWS provides a seamless experience in developing and deploying Next.js applications.

What’s so special about Next.js?

As mentioned above, the ability to use one or more page rendering techniques in the same application is the main benefit of using Next.js. But, there are so many other cool features that Next.js support out of the box.

• Automatic code splitting, minifying JS, and pre-fetch assets for faster page loads
• File system based routing allows your application to scale up for thousands of pages without performance issues
• Built-in CSS and Sass support and support for any CSS-in-JS library
• API routes to build API endpoints with Serverless Functions
• Built on top of webpack, which enables polyfills, ignoring dev only dependencies etc. You can also customize webpack configuration if required.

Because of these benefits and its popularity in the community, AWS has made Next.js a first-class citizen in their platform. Look at the recent announcement from AWS, which announces the out-of-the-box server-side rendering support for AWS Amplify.

Well, this welcoming atmosphere is not only limited to just AWS, but Azure and Netlify are also doing the same.

How to develop Next.js apps on AWS?

We can use AWS Amplify Framework to develop Next.js apps on AWS. Amplify Framework is the easiest way to get started with Web/Mobile application development on AWS. It provides four main components for developers.

• Amplify CLI
• Amplify Libraries
• Amplify UI Components
• Amplify Admin UI

Amplify CLI is used to provision resources at the AWS end and Amplify Libraries are used to communicate with those provisioned resources from different clients such as web browsers, android/ios mobile apps, etc.

Both Amplify CLI and Library have direct support for Next.js apps. Amplify CLI understands the structure of a Next.js app and add the configurations accordingly. Amplify JavaScript Library support unique methods to work with SSR context.

Have a look at the following steps to add Amplify support to your Next.js apps.

Step 01

Create a Next.js app

npx create-next-app next-amplified

Step 02

Initialize an amplify backend with the following command. You have to install Amplify CLI before prior running this command.

amplify init

Step 03

Install amplify libraries to communicate with the AWS backend and use UI components for React.

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

Step 04 (Optional)

Let’s imagine your Next.js app needs a GraphQL API at AWS as its backend. If so add it using the following CLI command.

amplify add api

Step 05

Configure amplify backend with your Next.js app. Open pages/index.js file and add the initial configuration.

import { Amplify, withSSRContext } from "aws-amplify";
import awsExports from "../src/aws-exports";Amplify.configure({ ...awsExports, ssr: true });

Step 06

If we want to configure the Next.js app to communicate with the GraphQL API we can use getServerSideProps, getStaticProps, and getStaticPaths functions and use Amplify library methods that support SSR.

import { Amplify, API, withSSRContext } from "aws-amplify";
import awsExports from "../src/aws-exports";Amplify.configure({ ...awsExports, ssr: true });export async function getStaticPaths() {
  const SSR = withSSRContext();
  const { data } = await SSR.API.graphql({ query: listPosts });  // Example of getting list of posts from GraphQL API
  const paths = data.listPosts.items.map((post) => ({
     params: { id: post.id },
  }));  return {
   fallback: true,
   paths
};}
export async function getStaticProps({ params }) {
  const SSR = withSSRContext();  // Example of getting one post 
  const { data } = await SSR.API.graphql({
     query: getPost,
     variables: {
       id: params.id,
     },
});return {
   props: {
   post: data.getPost,
}
};}