Account Settings components are a set of standalone components that add user management flows to your application with minimal boilerplate.
Account Settings components require end user to be authenticated. You can use the
Authenticator component to add authentication UI to your application.
Next.js 13.4+ introduces App Router with the usage of Server Components. Amplify UI components are interactive and designed to work on the client side. To use them inside of Server Components you must wrap them in a Client Component with
"use client". For more info, visit Next.js third party package documentation.
If you are using Next.js Pages Router, no changes are required to use Amplify UI components.
Step 1. Configure Backend
Account settings components work seamlessly with the Amplify CLI to automatically work with your backend.
npm install -g @aws-amplify/cli@latest
yarn global add @aws-amplify/cli@latest
Step 2. Install Dependencies
npm install @aws-amplify/ui-react aws-amplify
yarn add @aws-amplify/ui-react aws-amplify