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.

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

Next, I install Amplify using this command:

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:

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:

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:

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:

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!