From c7a6502282e478c825723cc057fe2799a31aa5cd Mon Sep 17 00:00:00 2001 From: Kevin Old Date: Tue, 9 Jan 2024 16:22:07 -0600 Subject: [PATCH 01/20] wip - cut page for app router server components --- src/directory/directory.mjs | 5 +- .../index.mdx | 4 +- .../index.mdx | 48 +++++++++++++++++++ 3 files changed, 54 insertions(+), 3 deletions(-) rename src/pages/gen2/start/quickstart/{nextjs-app-router => nextjs-app-router-client-components}/index.mdx (93%) create mode 100644 src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx diff --git a/src/directory/directory.mjs b/src/directory/directory.mjs index 0fad3322748..2a8039c3796 100644 --- a/src/directory/directory.mjs +++ b/src/directory/directory.mjs @@ -1934,7 +1934,10 @@ export const directory = { path: 'src/pages/gen2/start/quickstart/nextjs-pages-router/index.mdx' }, { - path: 'src/pages/gen2/start/quickstart/nextjs-app-router/index.mdx' + path: 'src/pages/gen2/start/quickstart/nextjs-app-router-client-components/index.mdx' + }, + { + path: 'src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx' } ] }, diff --git a/src/pages/gen2/start/quickstart/nextjs-app-router/index.mdx b/src/pages/gen2/start/quickstart/nextjs-app-router-client-components/index.mdx similarity index 93% rename from src/pages/gen2/start/quickstart/nextjs-app-router/index.mdx rename to src/pages/gen2/start/quickstart/nextjs-app-router-client-components/index.mdx index dcd40b1b8b0..85091a9cfbd 100644 --- a/src/pages/gen2/start/quickstart/nextjs-app-router/index.mdx +++ b/src/pages/gen2/start/quickstart/nextjs-app-router-client-components/index.mdx @@ -1,5 +1,5 @@ export const meta = { - title: 'Next.js App Router', + title: 'Next.js App Router (Client Components)', description: 'Get started with AWS Amplify (Gen 2) using the Next.js App Router.' }; @@ -11,7 +11,7 @@ export function getStaticProps(context) { }; } -This Quickstart guide will walk you through how to build a task list application with TypeScript, Next.js **App Router**, and React. If you are new to these technologies, we recommend you go through the official [React](https://react.dev/learn/tutorial-tic-tac-toe), [Next.js](https://nextjs.org/docs/getting-started/installation), and [TypeScript](https://www.typescriptlang.org/docs/handbook/typescript-from-scratch.html) tutorials first. +This Quickstart guide will walk you through how to build a task list application with TypeScript, Next.js **App Router with Client Components**, and React. If you are new to these technologies, we recommend you go through the official [React](https://react.dev/learn/tutorial-tic-tac-toe), [Next.js](https://nextjs.org/docs/getting-started/installation), and [TypeScript](https://www.typescriptlang.org/docs/handbook/typescript-from-scratch.html) tutorials first. import prerequisites from 'src/fragments/gen2/quickstart/prerequisites.mdx'; diff --git a/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx b/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx new file mode 100644 index 00000000000..094721bdc72 --- /dev/null +++ b/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx @@ -0,0 +1,48 @@ +export const meta = { + title: 'Next.js App Router (Server Components)', + description: 'Get started with AWS Amplify (Gen 2) using the Next.js App Router using Server Components.' +}; + +export function getStaticProps(context) { + return { + props: { + meta + } + }; +} + +This Quickstart guide will walk you through how to build a task list application with TypeScript, Next.js **App Router with Server Components**, and React. If you are new to these technologies, we recommend you go through the official [React](https://react.dev/learn/tutorial-tic-tac-toe), [Next.js](https://nextjs.org/docs/getting-started/installation), and [TypeScript](https://www.typescriptlang.org/docs/handbook/typescript-from-scratch.html) tutorials first. + +import prerequisites from 'src/fragments/gen2/quickstart/prerequisites.mdx'; + + + +import createProject from 'src/fragments/gen2/quickstart/create-nextjs-project.mdx'; + + + +import buildABackend from 'src/fragments/gen2/quickstart/build-a-backend.mdx'; + + + + +## Build UI + +Let's add UI that connects to the backend data and auth resources. + +### Add a login form + +First, install the Amplify UI component library: + +```bash +npm install @aws-amplify/ui-react +``` + + +### Terminate dev server + +Go to `localhost` in the browser to make sure you can now log in and create and list to-dos. You can end your development session by shutting down the frontend dev server and cloud sandbox. The sandbox prompts you to delete your backend resources. While you can retain your backend, we recommend deleting all resources so you can start clean again next time. + +import deployAndHost from 'src/fragments/gen2/quickstart/deploy-and-host.mdx'; + + From 166183ff59a8b667ceef416090eadd2851f15d97 Mon Sep 17 00:00:00 2001 From: Kevin Old Date: Fri, 12 Jan 2024 12:52:30 -0600 Subject: [PATCH 02/20] wip - iterate on app router server component quickstart --- .../index.mdx | 162 +++++++++++++++++- 1 file changed, 161 insertions(+), 1 deletion(-) diff --git a/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx b/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx index 094721bdc72..3d2e5247611 100644 --- a/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx +++ b/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx @@ -30,7 +30,8 @@ import buildABackend from 'src/fragments/gen2/quickstart/build-a-backend.mdx'; Let's add UI that connects to the backend data and auth resources. -### Add a login form + +### Configure Amplify Client Side First, install the Amplify UI component library: @@ -38,6 +39,165 @@ First, install the Amplify UI component library: npm install @aws-amplify/ui-react ``` +Next, create a `components` folder in the root of your project and the contents below to a file called `ConfigureAmplify.tsx`. + +```ts title="components/ConfigureAmplify.tsx" +// components/ConfigureAmplify.tsx +"use client"; + +import config from "@/amplifyconfiguration.json"; +import { Amplify } from "aws-amplify"; + +Amplify.configure(config, { ssr: true }); + +export default function ConfigureAmplifyClientSide() { + return null; +} +``` + +Update `app/layout.tsx` to import and render ``. This client component will configure Amplify for client pages in our application. + +```ts title="app/layout.tsx" +// app/layout.tsx +import ConfigureAmplifyClientSide from "@/components/ConfigureAmplify"; +import "@aws-amplify/ui-react/styles.css"; +import type { Metadata } from "next"; +import { Inter } from "next/font/google"; +import "./globals.css"; + +const inter = Inter({ subsets: ["latin"] }); + +export const metadata: Metadata = { + title: "Create Next App", + description: "Generated by create next app", +}; + +export default function RootLayout({ + children, +}: { + children: React.ReactNode; +}) { + return ( + + + + {children} + + + ); +} +``` + +### Add a login page + +Create a new route under `app/login/page.tsx` to render the [Amplify Authenticator component](https://ui.docs.amplify.aws/react/connected-components/authenticator) when a user is not logged in or redirect to the root route. + +```ts title="app/login/page.tsx" +// app/login/page.tsx + +"use client"; + +import { withAuthenticator } from "@aws-amplify/ui-react"; +import { redirect } from "next/navigation"; +import { useEffect } from "react"; + +function Login() { + useEffect(() => { + redirect("/"); + }, []); + return null; +} + +export default withAuthenticator(Login); +``` + +### Configure Amplify Client Side + + +```ts title="utils/amplify-utils.ts" +// utils/amplify-utils.ts +import { type Schema } from "@/amplify/data/resource"; +import config from "@/amplifyconfiguration.json"; +import { createServerRunner } from "@aws-amplify/adapter-nextjs"; +import { generateServerClientUsingCookies } from "@aws-amplify/adapter-nextjs/api"; +import { cookies } from "next/headers"; + +export const { runWithAmplifyServerContext } = createServerRunner({ + config, +}); + +export const cookiesClient = generateServerClientUsingCookies({ + config, + cookies, +}); +``` + +### Add middleware for server-side redirect + +Create `middleware.ts` in the root of the project with the contents below to redirect to `/login` when a user is not logged in. + +```ts title="middleware.ts" +// middleware.ts + +import { runWithAmplifyServerContext } from "@/utils/amplify-utils"; +import { fetchAuthSession } from "aws-amplify/auth/server"; +import { NextRequest, NextResponse } from "next/server"; +//import * as mutations from '@/mutations'; + +export async function middleware(request: NextRequest) { + const response = NextResponse.next(); + + const authenticated = await runWithAmplifyServerContext({ + nextServerContext: { request, response }, + operation: async (contextSpec) => { + try { + const session = await fetchAuthSession(contextSpec, {}); + // reqResClient.graphql(contextSpec, { + // query: mutations.createPost, + // variables: { + // input: { + // body: "hello from Middleware", + // link: "https://google.com", + // title: "Hello from Middleware. Called at: " + Date.now().toLocaleString() + // } + // }, + // authMode: 'userPool' + // }) + return session.tokens !== undefined; + } catch (error) { + console.log(error); + return false; + } + }, + }); + + if (authenticated) { + console.log("request.url", request.url); + return response; + } + + return NextResponse.redirect(new URL("/login", request.url)); +} + +export const config = { + matcher: [ + /* + * Match all request paths except for the ones starting with: + * - api (API routes) + * - _next/static (static files) + * - _next/image (image optimization files) + * - favicon.ico (favicon file) + */ + "/((?!api|_next/static|_next/image|favicon.ico|login).*)", + ], +}; +``` + + +Run your application with `npm run dev` and navigate to `http://localhost:3000`. You should now see the authenticator, which is already configured and ready for your first sign-up! Create a new user account, confirm the account through email, and then sign in. + + + ### Terminate dev server From e8dfd5a66207a72cbb4e8e4aeb1e41c3b994fd34 Mon Sep 17 00:00:00 2001 From: Kevin Old Date: Fri, 12 Jan 2024 13:25:17 -0600 Subject: [PATCH 03/20] wip - iterate on middleware for RSC quickstart --- .../index.mdx | 19 +++++-------------- 1 file changed, 5 insertions(+), 14 deletions(-) diff --git a/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx b/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx index 3d2e5247611..15affb0133e 100644 --- a/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx +++ b/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx @@ -134,7 +134,10 @@ export const cookiesClient = generateServerClientUsingCookies({ ### Add middleware for server-side redirect -Create `middleware.ts` in the root of the project with the contents below to redirect to `/login` when a user is not logged in. +Create `middleware.ts` in the root of the project with the contents below. + +This middleware runs `fetchAuthSession` wrapped in `runWithAmplifyServerContext` and will redirect to `/login` when a user is not logged in. + ```ts title="middleware.ts" // middleware.ts @@ -142,7 +145,6 @@ Create `middleware.ts` in the root of the project with the contents below to red import { runWithAmplifyServerContext } from "@/utils/amplify-utils"; import { fetchAuthSession } from "aws-amplify/auth/server"; import { NextRequest, NextResponse } from "next/server"; -//import * as mutations from '@/mutations'; export async function middleware(request: NextRequest) { const response = NextResponse.next(); @@ -152,17 +154,6 @@ export async function middleware(request: NextRequest) { operation: async (contextSpec) => { try { const session = await fetchAuthSession(contextSpec, {}); - // reqResClient.graphql(contextSpec, { - // query: mutations.createPost, - // variables: { - // input: { - // body: "hello from Middleware", - // link: "https://google.com", - // title: "Hello from Middleware. Called at: " + Date.now().toLocaleString() - // } - // }, - // authMode: 'userPool' - // }) return session.tokens !== undefined; } catch (error) { console.log(error); @@ -172,7 +163,6 @@ export async function middleware(request: NextRequest) { }); if (authenticated) { - console.log("request.url", request.url); return response; } @@ -187,6 +177,7 @@ export const config = { * - _next/static (static files) * - _next/image (image optimization files) * - favicon.ico (favicon file) + * - login */ "/((?!api|_next/static|_next/image|favicon.ico|login).*)", ], From 4b6b6b281b25f6f69da231fe45402b0cb24596e3 Mon Sep 17 00:00:00 2001 From: Kevin Old Date: Fri, 12 Jan 2024 16:34:36 -0600 Subject: [PATCH 04/20] wip - add amplify utils for server configuration --- .../quickstart/nextjs-app-router-server-components/index.mdx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx b/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx index 15affb0133e..783e80572cf 100644 --- a/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx +++ b/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx @@ -111,7 +111,9 @@ function Login() { export default withAuthenticator(Login); ``` -### Configure Amplify Client Side +### Configure Amplify Server Side + +Next, create a `utils/amplify-utils.ts` file from the root of the project and paste the code below. `runWithAmplifyServerContext` and `cookiesClient` are declared here and will be used to gain access to Amplify assets from the server. ```ts title="utils/amplify-utils.ts" @@ -184,7 +186,6 @@ export const config = { }; ``` - Run your application with `npm run dev` and navigate to `http://localhost:3000`. You should now see the authenticator, which is already configured and ready for your first sign-up! Create a new user account, confirm the account through email, and then sign in. From 1aad2c90170f29f483e59e5fce73c8539dac07db Mon Sep 17 00:00:00 2001 From: Kevin Old Date: Fri, 12 Jan 2024 16:51:28 -0600 Subject: [PATCH 05/20] wip - finalize todos section --- .../index.mdx | 72 +++++++++++++++++++ 1 file changed, 72 insertions(+) diff --git a/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx b/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx index 783e80572cf..7234449e044 100644 --- a/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx +++ b/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx @@ -188,8 +188,80 @@ export const config = { Run your application with `npm run dev` and navigate to `http://localhost:3000`. You should now see the authenticator, which is already configured and ready for your first sign-up! Create a new user account, confirm the account through email, and then sign in. +### View list of to-do items +Now, let's display data on our app's frontend. +The code below uses the `cookiesClient` to provide access to the `Todo` model defined in the backend. + +Modify your app's home page file, `app/page.tsx`, with the following code: + +```ts title="app/page.tsx" +// app/page.tsx + +import { cookiesClient } from "@/utils/amplify-utils"; + +async function App() { + const { data: todos } = await cookiesClient.models.Todo.list(); + + return ( + <> +

Hello, Amplify 👋

+
    + {todos && todos.map((todo) =>
  • {todo.content}
    • )} +
+ + ); +} + +export default App; +``` + +Once you save the file and navigate back to `http://localhost:3000`, you should see a blank page for now because you have only an empty list of to-dos. + +### Create a new to-do item + +Let's update the component to have a form for prompting the user for the title for creating a new to-do list item and run the `addTodo` method on form submission. In a production app, the additional fields of the `Todo` model would be added to the form. + +After creating a todo, `revalidatePath` is run to clear the Next.js cache for this route to instantly update the results from the server without a full page reload. + +```ts title="app/page.tsx" +// app/page.tsx + +import { cookiesClient } from "@/utils/amplify-utils"; +import { revalidatePath } from "next/cache"; + +async function App() { + const { data: todos } = await cookiesClient.models.Todo.list(); + + async function addTodo(data: FormData) { + "use server"; + const title = data.get("title") as string; + await cookiesClient.models.Todo.create({ + content: title, + done: false, + priority: "medium", + }); + revalidatePath("/"); + } + + return ( + <> +

Hello, Amplify 👋

+
+ + +
+ +
    + {todos && todos.map((todo) =>
  • {todo.content}
    • )} +
+ + ); +} + +export default App; +``` ### Terminate dev server From 106f0452c68df3fbc5b7a63c7e046753248b95d4 Mon Sep 17 00:00:00 2001 From: Kevin Old Date: Tue, 16 Jan 2024 14:15:58 -0600 Subject: [PATCH 06/20] update to conditionally redirect if user --- .../nextjs-app-router-server-components/index.mdx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx b/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx index 7234449e044..d07eda5f11a 100644 --- a/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx +++ b/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx @@ -101,10 +101,12 @@ import { withAuthenticator } from "@aws-amplify/ui-react"; import { redirect } from "next/navigation"; import { useEffect } from "react"; -function Login() { +function Login({ user }) { useEffect(() => { - redirect("/"); - }, []); + if (user) { + redirect("/"); + } + }, [user]); return null; } From dd80efcdfbd92513e646f6a73c45c09b78754222 Mon Sep 17 00:00:00 2001 From: Kevin Old Date: Wed, 17 Jan 2024 16:09:29 -0600 Subject: [PATCH 07/20] fix fragment path --- .../quickstart/nextjs-app-router-server-components/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx b/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx index d07eda5f11a..8b18b412ef5 100644 --- a/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx +++ b/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx @@ -17,7 +17,7 @@ import prerequisites from 'src/fragments/gen2/quickstart/prerequisites.mdx'; -import createProject from 'src/fragments/gen2/quickstart/create-nextjs-project.mdx'; +import createProject from 'src/fragments/gen2/quickstart/create-nextjs-app-router-project.mdx'; From 5c0f60b34a061cf7eed8cc085bdf7f96c364707d Mon Sep 17 00:00:00 2001 From: Kevin Old Date: Fri, 19 Jan 2024 14:27:54 -0600 Subject: [PATCH 08/20] add signout button to server components example --- .../quickstart/nextjs-app-router-server-components/index.mdx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx b/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx index 8b18b412ef5..beb83dd5b39 100644 --- a/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx +++ b/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx @@ -232,8 +232,10 @@ After creating a todo, `revalidatePath` is run to clear the Next.js cache for th import { cookiesClient } from "@/utils/amplify-utils"; import { revalidatePath } from "next/cache"; +import { useAuthenticator } from "@aws-amplify/ui-react"; async function App() { + const { user, signOut } = useAuthenticator((context) => [context.user]); const { data: todos } = await cookiesClient.models.Todo.list(); async function addTodo(data: FormData) { @@ -250,6 +252,7 @@ async function App() { return ( <>

Hello, Amplify 👋

+ {user && }
From d7551d96d39da086875ebd7a4d05ab997923aab5 Mon Sep 17 00:00:00 2001 From: Kevin Old Date: Fri, 19 Jan 2024 14:46:00 -0600 Subject: [PATCH 09/20] Import AuthUser to avoid TypeScript error Co-authored-by: Scott Rees <6165315+reesscot@users.noreply.github.com> --- .../quickstart/nextjs-app-router-server-components/index.mdx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx b/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx index beb83dd5b39..3f93c176f93 100644 --- a/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx +++ b/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx @@ -97,11 +97,12 @@ Create a new route under `app/login/page.tsx` to render the [Amplify Authenticat "use client"; +import { AuthUser } from "aws-amplify/auth"; import { withAuthenticator } from "@aws-amplify/ui-react"; import { redirect } from "next/navigation"; import { useEffect } from "react"; -function Login({ user }) { +function Login({ user }: { user: AuthUser }) { useEffect(() => { if (user) { redirect("/"); From 99f8a9a436defdb38e0ad6e9fc000d261941d216 Mon Sep 17 00:00:00 2001 From: Kevin Old Date: Fri, 19 Jan 2024 14:48:41 -0600 Subject: [PATCH 10/20] add installation of amplify next.js adapter --- .../nextjs-app-router-server-components/index.mdx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx b/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx index 3f93c176f93..9c1805cd68f 100644 --- a/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx +++ b/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx @@ -116,6 +116,12 @@ export default withAuthenticator(Login); ### Configure Amplify Server Side +First, install the Amplify Next.js Adapter: + +```bash +npm install @aws-amplify/adapter-nextjs +``` + Next, create a `utils/amplify-utils.ts` file from the root of the project and paste the code below. `runWithAmplifyServerContext` and `cookiesClient` are declared here and will be used to gain access to Amplify assets from the server. From 6e183550d3629ab0c8741802d59648a0467b2673 Mon Sep 17 00:00:00 2001 From: Kevin Old Date: Fri, 19 Jan 2024 14:50:48 -0600 Subject: [PATCH 11/20] Group imports into logical sections Co-authored-by: Caleb Pollman --- .../nextjs-app-router-server-components/index.mdx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx b/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx index 9c1805cd68f..3a3e9be1c7d 100644 --- a/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx +++ b/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx @@ -127,11 +127,13 @@ Next, create a `utils/amplify-utils.ts` file from the root of the project and pa ```ts title="utils/amplify-utils.ts" // utils/amplify-utils.ts -import { type Schema } from "@/amplify/data/resource"; -import config from "@/amplifyconfiguration.json"; +import { cookies } from "next/headers"; + import { createServerRunner } from "@aws-amplify/adapter-nextjs"; import { generateServerClientUsingCookies } from "@aws-amplify/adapter-nextjs/api"; -import { cookies } from "next/headers"; + +import { type Schema } from "@/amplify/data/resource"; +import config from "@/amplifyconfiguration.json"; export const { runWithAmplifyServerContext } = createServerRunner({ config, From 97e524cd70aa7bf82f9ce033df1a4beb65f41494 Mon Sep 17 00:00:00 2001 From: Kevin Old Date: Fri, 19 Jan 2024 14:53:34 -0600 Subject: [PATCH 12/20] update additional section imports in logicial groups --- .../index.mdx | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx b/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx index 3a3e9be1c7d..c61743b868d 100644 --- a/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx +++ b/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx @@ -45,9 +45,10 @@ Next, create a `components` folder in the root of your project and the contents // components/ConfigureAmplify.tsx "use client"; -import config from "@/amplifyconfiguration.json"; import { Amplify } from "aws-amplify"; +import config from "@/amplifyconfiguration.json"; + Amplify.configure(config, { ssr: true }); export default function ConfigureAmplifyClientSide() { @@ -59,12 +60,13 @@ Update `app/layout.tsx` to import and render ``. ```ts title="app/layout.tsx" // app/layout.tsx -import ConfigureAmplifyClientSide from "@/components/ConfigureAmplify"; import "@aws-amplify/ui-react/styles.css"; import type { Metadata } from "next"; import { Inter } from "next/font/google"; import "./globals.css"; +import ConfigureAmplifyClientSide from "@/components/ConfigureAmplify"; + const inter = Inter({ subsets: ["latin"] }); export const metadata: Metadata = { @@ -97,9 +99,10 @@ Create a new route under `app/login/page.tsx` to render the [Amplify Authenticat "use client"; +import { redirect } from "next/navigation"; + import { AuthUser } from "aws-amplify/auth"; import { withAuthenticator } from "@aws-amplify/ui-react"; -import { redirect } from "next/navigation"; import { useEffect } from "react"; function Login({ user }: { user: AuthUser }) { @@ -154,10 +157,11 @@ This middleware runs `fetchAuthSession` wrapped in `runWithAmplifyServerContext` ```ts title="middleware.ts" // middleware.ts +import { NextRequest, NextResponse } from "next/server"; -import { runWithAmplifyServerContext } from "@/utils/amplify-utils"; import { fetchAuthSession } from "aws-amplify/auth/server"; -import { NextRequest, NextResponse } from "next/server"; + +import { runWithAmplifyServerContext } from "@/utils/amplify-utils"; export async function middleware(request: NextRequest) { const response = NextResponse.next(); @@ -239,8 +243,9 @@ After creating a todo, `revalidatePath` is run to clear the Next.js cache for th ```ts title="app/page.tsx" // app/page.tsx -import { cookiesClient } from "@/utils/amplify-utils"; import { revalidatePath } from "next/cache"; + +import { cookiesClient } from "@/utils/amplify-utils"; import { useAuthenticator } from "@aws-amplify/ui-react"; async function App() { From cc9f6785233280a0f1762b6448e3f1a58bfb6ac7 Mon Sep 17 00:00:00 2001 From: Kevin Old Date: Mon, 22 Jan 2024 12:27:58 -0600 Subject: [PATCH 13/20] add custom accordion --- .../index.mdx | 55 +++++++++++++++++++ 1 file changed, 55 insertions(+) diff --git a/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx b/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx index c61743b868d..6c58fc99e3a 100644 --- a/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx +++ b/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx @@ -117,6 +117,61 @@ function Login({ user }: { user: AuthUser }) { export default withAuthenticator(Login); ``` + + +Some applications require customizing the `` component the following example shows how to add a custom Header to the ``. + +```ts title="app/login/page.tsx" +// app/login/page.tsx - Custom + +"use client"; + +import { + Authenticator, + Text, + View, + useAuthenticator, +} from "@aws-amplify/ui-react"; +import { redirect } from "next/navigation"; +import { useEffect } from "react"; + +const components = { + Header() { + return ( + + Authenticator Header + + ); + }, +}; + +function CustomAuthenticator() { + const { user } = useAuthenticator((context) => [context.user]); + + useEffect(() => { + if (user) { + redirect("/"); + } + }, [user]); + + return ; +} + +export default function Login() { + return ( + + + + ); +} + +``` + + + + + + ### Configure Amplify Server Side First, install the Amplify Next.js Adapter: From 94584def0663a947153ce7901b8bc8f618b21145 Mon Sep 17 00:00:00 2001 From: Kevin Old Date: Wed, 24 Jan 2024 13:23:10 -0600 Subject: [PATCH 14/20] revert signout functionality from server components guide --- .../quickstart/nextjs-app-router-server-components/index.mdx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx b/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx index 6c58fc99e3a..b452c6dae85 100644 --- a/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx +++ b/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx @@ -301,10 +301,8 @@ After creating a todo, `revalidatePath` is run to clear the Next.js cache for th import { revalidatePath } from "next/cache"; import { cookiesClient } from "@/utils/amplify-utils"; -import { useAuthenticator } from "@aws-amplify/ui-react"; async function App() { - const { user, signOut } = useAuthenticator((context) => [context.user]); const { data: todos } = await cookiesClient.models.Todo.list(); async function addTodo(data: FormData) { @@ -321,7 +319,6 @@ async function App() { return ( <>

Hello, Amplify 👋

- {user && } From 7d897197052b6c57fcee75237620be83d981f04d Mon Sep 17 00:00:00 2001 From: Kevin Old Date: Thu, 25 Jan 2024 11:35:37 -0600 Subject: [PATCH 15/20] fix typo for AuthUser import --- .../quickstart/nextjs-app-router-server-components/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx b/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx index b452c6dae85..6d8a90dc82a 100644 --- a/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx +++ b/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx @@ -101,7 +101,7 @@ Create a new route under `app/login/page.tsx` to render the [Amplify Authenticat import { redirect } from "next/navigation"; -import { AuthUser } from "aws-amplify/auth"; +import { AuthUser } from "@aws-amplify/auth"; import { withAuthenticator } from "@aws-amplify/ui-react"; import { useEffect } from "react"; From e72781a7e55ecfd285e7f830caa05ccd7ca7bdd7 Mon Sep 17 00:00:00 2001 From: Kevin Old Date: Thu, 25 Jan 2024 15:30:08 -0600 Subject: [PATCH 16/20] add separate Login component and update Login page --- .../index.mdx | 28 ++++++++++++------- 1 file changed, 18 insertions(+), 10 deletions(-) diff --git a/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx b/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx index 6d8a90dc82a..f349f7234de 100644 --- a/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx +++ b/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx @@ -92,20 +92,17 @@ export default function RootLayout({ ### Add a login page -Create a new route under `app/login/page.tsx` to render the [Amplify Authenticator component](https://ui.docs.amplify.aws/react/connected-components/authenticator) when a user is not logged in or redirect to the root route. - -```ts title="app/login/page.tsx" -// app/login/page.tsx +```ts title="components/Login.tsx" +// components/Login.tsx "use client"; -import { redirect } from "next/navigation"; - -import { AuthUser } from "@aws-amplify/auth"; import { withAuthenticator } from "@aws-amplify/ui-react"; +import { AuthUser } from "aws-amplify/auth"; +import { redirect } from "next/navigation"; import { useEffect } from "react"; -function Login({ user }: { user: AuthUser }) { +function Login({ user }: { user?: AuthUser }) { useEffect(() => { if (user) { redirect("/"); @@ -117,6 +114,19 @@ function Login({ user }: { user: AuthUser }) { export default withAuthenticator(Login); ``` + +Create a new route under `app/login/page.tsx` to render the [Amplify Authenticator component](https://ui.docs.amplify.aws/react/connected-components/authenticator) when a user is not logged in or redirect to the root route. +```ts title="app/login/page.tsx" +// app/login/page.tsx + +import Login from "@/components/Login"; + +export default function LoginPage() { + return ; +} +``` + + Some applications require customizing the `` component the following example shows how to add a custom Header to the ``. @@ -170,8 +180,6 @@ export default function Login() { - - ### Configure Amplify Server Side First, install the Amplify Next.js Adapter: From 4147474f1dde808232103c65610fe1eaeff27011 Mon Sep 17 00:00:00 2001 From: Kevin Old Date: Fri, 26 Jan 2024 08:41:04 -0600 Subject: [PATCH 17/20] updates per internal feedback --- .../nextjs-app-router-server-components/index.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx b/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx index f349f7234de..a7664a504e4 100644 --- a/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx +++ b/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx @@ -129,7 +129,7 @@ export default function LoginPage() { -Some applications require customizing the `` component the following example shows how to add a custom Header to the ``. +Some applications require more customization for the `` component. The following example shows how to add a custom Header to the ``. ```ts title="app/login/page.tsx" // app/login/page.tsx - Custom @@ -149,7 +149,7 @@ const components = { Header() { return ( - Authenticator Header + Authenticator Header ); }, @@ -295,7 +295,7 @@ async function App() { export default App; ``` -Once you save the file and navigate back to `http://localhost:3000`, you should see a blank page for now because you have only an empty list of to-dos. +Once you save the file and navigate back to `http://localhost:3000`, you should see "Hello, Amplify" with a blank page for now because you have only an empty list of to-dos. ### Create a new to-do item From ba0cc985fa5f7b417ce5c1632c7f4279ad4044c3 Mon Sep 17 00:00:00 2001 From: Kevin Old Date: Fri, 26 Jan 2024 10:08:40 -0600 Subject: [PATCH 18/20] updates to add a login page section --- .../quickstart/nextjs-app-router-server-components/index.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx b/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx index a7664a504e4..de30fbea4a2 100644 --- a/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx +++ b/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx @@ -92,6 +92,7 @@ export default function RootLayout({ ### Add a login page +First, create a client side Login component in the `components` folder that will be wrapped in `withAuthenticator`. If the user is logged in, they will be redirected to the index route, otherwise the [Amplify UI Authenticator component](https://ui.docs.amplify.aws/react/connected-components/authenticator) will be rendered. ```ts title="components/Login.tsx" // components/Login.tsx @@ -114,8 +115,8 @@ function Login({ user }: { user?: AuthUser }) { export default withAuthenticator(Login); ``` +Next, create a new route under `app/login/page.tsx` to render the `Login` component. -Create a new route under `app/login/page.tsx` to render the [Amplify Authenticator component](https://ui.docs.amplify.aws/react/connected-components/authenticator) when a user is not logged in or redirect to the root route. ```ts title="app/login/page.tsx" // app/login/page.tsx @@ -126,7 +127,6 @@ export default function LoginPage() { } ``` - Some applications require more customization for the `` component. The following example shows how to add a custom Header to the ``. From 4f9c194f1dc977b8ee90344b1e5a39651fd28f9f Mon Sep 17 00:00:00 2001 From: Kevin Old Date: Fri, 26 Jan 2024 10:20:20 -0600 Subject: [PATCH 19/20] Clarify that Server Page implementation does not need the Login client component Co-authored-by: Heather Pundt <119376175+heatheramz@users.noreply.github.com> --- .../quickstart/nextjs-app-router-server-components/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx b/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx index de30fbea4a2..1e60fb990cd 100644 --- a/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx +++ b/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx @@ -129,7 +129,7 @@ export default function LoginPage() { -Some applications require more customization for the `` component. The following example shows how to add a custom Header to the ``. +Some applications require more customization for the `` component. The following example shows how to add a custom Header to the ``. For this use, you will not need the `Login` file in the `components` folder but can do everything through the `page` file in the `app/login/` folder. ```ts title="app/login/page.tsx" // app/login/page.tsx - Custom From 3ea14a34974f92ae2790167b4c1628343cd81040 Mon Sep 17 00:00:00 2001 From: Kevin Old Date: Fri, 26 Jan 2024 11:56:58 -0600 Subject: [PATCH 20/20] Add link for Authenticator customization Co-authored-by: Scott Rees <6165315+reesscot@users.noreply.github.com> --- .../quickstart/nextjs-app-router-server-components/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx b/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx index 1e60fb990cd..47a1fec7db3 100644 --- a/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx +++ b/src/pages/gen2/start/quickstart/nextjs-app-router-server-components/index.mdx @@ -129,7 +129,7 @@ export default function LoginPage() { -Some applications require more customization for the `` component. The following example shows how to add a custom Header to the ``. For this use, you will not need the `Login` file in the `components` folder but can do everything through the `page` file in the `app/login/` folder. +Some applications require more customization for the `` component. The following example shows how to add a custom Header to the ``. For this use, you will not need the `Login` file in the `components` folder but can do everything through the `page` file in the `app/login/` folder. For more customization option, see [Authenticator Customization](https://ui.docs.amplify.aws/react/connected-components/authenticator/customization). ```ts title="app/login/page.tsx" // app/login/page.tsx - Custom