I’m terrible with frontend. I always say that I CAN do frontend, but you don’t WANT me to do frontend. Unless you don’t care about your web site or mobile app looking like a 3-year-old failed art exam. So I’ve always been big on using styling frameworks like Bootstrap or Tailwind CSS and UI component libraries.

AWS Amplify UI React is one of those and now that Amplify had a massive overhaul with Gen2, I thought I’d give it a go and use it to help me build this demo that I’m working on faster, and, most importantly for me, try to make it look prettier without putting much effort in it.

As the name implies the Amplify UI React library has a bunch of components that you can use within any React frameworks and my favorite of them all by miles is Next.js.

So, in this post, I thought I’d show you the steps to install and configure AWS Amplify with Netx.js and use one of the UI components just to test that everything works and have an app in a state where you can just start using any Amplify UI React components to build whatever you want.

Setting up and configuration

I start by creating a new directory called storage-browser-demo, navigate inside, and then create a new application with the following command:

npx create-next-app@latest ./ --ts --use-npm

Next, I install Amplify using this command:

npm install aws-amplify@latest

I then need to configure it. These steps will vary depending on the framework you are using. You can check out the official documentation for guidance with other frameworks, but in this case, I’ll show you how to configure Amplify for Next.js with AppRouter since that is what I’m using.

I create a new file src/app/providers.tsx and populate it with the following code:

1
2
3
4
5
6
'use client';import {Amplify} from 'aws-amplify';
import { PropsWithChildren } from 'react';Amplify.configure({
    
})export default function Providers({children}: PropsWithChildren) {
    return <>{children}</>
}

It’s fine to leave the configuration values empty. When you make the call to Amplify.configure({}) it’ll just use default values which you can override later.

I then modify src/app/layout.tsx to wrap the application with the new Providers component I just created. Only two simple changes are needed. I add the import for the Providers component and use it to wrap the content for each page which will be loaded where {children} is declared.

For sanity check, I run the app to make sure everything is working by using:

npm run dev

By default, this will host the Next.js application on http://localhost:3000 so I open my browser to test it and verify that it’s working fine.

Great stuff! We haven’t broken anything with our tinkering but this doesn’t prove that Amplify is working specifically.

To do that, I’ll add a simple Amplify UI component and run the application again.

Using Amplify UI components
First, I need to install the Amplify UI React library using:

npm install @aws-amplify/ui-react

Now I just need to add an Amplify component to the application to test.

I start by creating the folder src/app/components where I intend to keep all my future components which is a verycommon way of structuring a Next.js project.

In there, I create the file AmplifyTest.tsx with the following code:

1
2
3
4
5
6
7
8
9
10
11
12
'use client'import {Alert} from '@aws-amplify/ui-react'
import '@aws-amplify/ui-react/styles.css';export default function AmplifyTest(){
    return(
        <Alert 
        variation="success"
        isDismissible={true}
        hasIcon={true}
      >
        Amplify UI is working!
      </Alert>
    );
}

I then open src/app/page.tsx to add it to the main page, right at the bottom but before the footer. I need to import the component and then declare it.

I check it again and verify that it’s all working as expected.

Voila! It’s all working and ready to go.

Now the fun part truly begins! You just need to pick and mix the components available in the Amplify UI React library that take your fancy and start using them in your app to get your UI looking really good with lots of neat features without much effort.

It’s a great way to accelerate your frontend development, but also, really handy for people like me who are terrible at web design and frontend and don’t have much time or patience to deal with “fun things” like CSS (sorry CSS fans!).

There’s a whole lot of those components too! Here’s the full list of goodies: https://ui.docs.amplify.aws/react/components.

Have fun!

Select your cookie preferences

Site Terms, Privacy, and more.

Setting up Next.js with AWS Amplify

Learn how to set up a Next.js app from scratch and integrate it with AWS Amplify ready to start developing!

Setting up and configuration

Comments