Name:
interface
Value:
Amplify has re-imagined the way frontend developers build fullstack applications. Develop and deploy without the hassle.

Page updated Jun 24, 2024

Use Amplify categories APIs from Next.js

This guide walks through how to use Amplify Auth, GraphQL API, REST API, and Storage category APIs from Next.js server-side runtimes.

NOTE: Amplify JS v6 supports Next.js with the version range: >=13.5.0 <15.0.0. Ensure you have the correct version to integrate with Amplify.

Before you begin, you will need:

Configure Amplify Library for server-side usage

To use Amplify APIs on the server-side of your Next.js app, you will need to create a runWithAmplifyServerContextRunner function.

You can create an amplifyServerUtils.ts file under a utils folder in your codebase. In this file, you will import the Amplify configuration object from the amplifyconfiguration.json file that is generated by the Amplify CLI, and use the createServerRunner function to create the runWithAmplifyServerContextRunner function.

For example, the utils/amplifyServerUtils.ts file may contain the following content:

import { createServerRunner } from '@aws-amplify/adapter-nextjs';
import config from '@/amplifyconfiguration.json';
export const { runWithAmplifyServerContext } = createServerRunner({
config
});

You can use the exported runWithAmplifyServerContext function to call Amplify APIs with in isolated request contexts. Usage examples see here.

TIP: You only need to call the createServerRunner function once and reuse the runWithAmplifyServerContext function throughout.

Configure Amplify library for client-side usage

When you use the Amplify library on the client-side of your Next.js app, you will need to configure Amplify by calling Amplify.configure as you would to use Amplify in a single-page application.

NOTE: To use the Amplify library on the client side in a Next.js app, you will need to set ssr to true when calling Amplify.configure. This instructs the Amplify library to store tokens in the cookie store of a browser. Cookies will be sent along with requests to your Next.js server for authentication.

'use client';
import config from '@/amplifyconfiguration.json';
import { Amplify } from 'aws-amplify';
Amplify.configure(config, {
ssr: true // required when using Amplify with Next.js
});
export default function RootLayoutThatConfiguresAmplifyOnTheClient({
children
}: {
children: React.ReactNode;
}) {
return children;
}

Make sure you call Amplify.configure as early as possible in your application’s life-cycle. A missing configuration or NoCredentials error is thrown if Amplify.configure has not been called before other Amplify JavaScript APIs. Review the Library Not Configured Troubleshooting guide for possible causes of this issue.

To avoid repetitive calls to Amplify.configure, you can call it once in a top-level client-side rendered layout component.

Learn more
Configure Amplify in a Next.js App Router application

If you're using the Next.js App Router, you can create a client component to configure Amplify and import it into your root layout.

ConfigureAmplifyClientSide.ts:

'use client';
import { Amplify } from 'aws-amplify';
import config from '../amplifyconfiguration.json';
Amplify.configure(config, { ssr: true });
export default function ConfigureAmplifyClientSide() {
return null;
}

layout.tsx:

import ConfigureAmplifyClientSide from '@/components/ConfigureAmplifyClientSide';
import './globals.css';
import type { Metadata } from 'next';
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className="container pb-6">
<>
<ConfigureAmplifyClientSide />
{children}
</>
</body>
</html>
);
}

Authentication with Next.js server-side runtime

You can use the Amplify Auth category APIs to sign up and sign in your end users on the client side. With setting ssr: true when calling Amplify.configure, the Amplify library uses cookies to store tokens, which will be sent along with HTTP requests to your Next.js app server.

Manage Auth session with the Next.js Middleware

You can use the fetchAuthSession API to check the auth sessions that are attached to the incoming requests in the middleware of your Next.js app to protect your routes. For example:

import { fetchAuthSession } from 'aws-amplify/auth/server';
import { NextRequest, NextResponse } from 'next/server';
import { runWithAmplifyServerContext } from '@/utils/amplifyServerUtils';
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);
return (
session.tokens?.accessToken !== undefined &&
session.tokens?.idToken !== undefined
);
} catch (error) {
console.log(error);
return false;
}
}
});
if (authenticated) {
return response;
}
return NextResponse.redirect(new URL('/sign-in', 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|sign-in).*)'
]
};

In this example, if the incoming request is not associated with a valid user session the request will be redirected to the /sign-in route.

NOTE: When calling fetchAuthSession with a response context, it will send the refreshed tokens (if any) back to the client via the Set-Cookie header in the response.

Calling Amplify category APIs on the server side

For the Auth, REST APIs, and Storage categories to use Amplify APIs on the server in your Next.js app, you will need to:

  1. Import the API from the /server sub path.
  2. Use the runWithAmplifyServerContext helper function created by calling the createServerRunner function exported from @aws-amplify/adapter-nextjs to call the Amplify API in an isolated server context.

For the GraphQL API category, review Connect to GraphQL API from server-side runtimes.

NOTE: A subset of Amplify APIs can now be called on the server side of a Next.js app. These APIs are exported from the /server sub paths. See the full list of supported APIs.

Note: If you use the Amplify server-side APIs in a server action and encounter the following error running next build:

./node_modules/@aws-amplify/core/node_modules/@aws-crypto/sha256-js/build/module/index.js + 12 modules

Cannot get final name for export 'fromUtf8' of ./node_modules/@smithy/util-utf8/dist-es/index.js

You can add the following to your next.config.js:

next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
serverComponentsExternalPackages: ['@aws-crypto'],
},
};

See Next.js documentation on serverComponentsExternalPackages for more details.

With Next.js App Router

In React Server Component

Dynamic Rendering

Dynamic rendering is based on a user session extracted from an incoming request.

import { cookies } from 'next/headers';
import { getCurrentUser } from 'aws-amplify/auth/server';
import { runWithAmplifyServerContext } from '@/utils/amplifyServerUtils';
// This page always dynamically renders per request
export const dynamic = 'force-dynamic';
export default async function AuthGetCurrentUserServer() {
try {
const currentUser = await runWithAmplifyServerContext({
nextServerContext: { cookies },
operation: (contextSpec) => getCurrentUser(contextSpec)
});
return (
<AuthFetchResult
description="The API is called on the server side."
data={currentUser}
/>
);
} catch (error) {
console.error(error);
return <p>Something went wrong...</p>;
}
}
Static Rendering

Static rendering doesn’t require a user session, so you can specify the nextServerContext parameter as null. This is useful for some use cases, for example, when you are using the Storage API with guest access (if you have enabled it in your backend).

import { getUrl } from 'aws-amplify/storage/server';
import Image from 'next/image';
import { runWithAmplifyServerContext } from '@/utils/amplifyServerUtils';
// Re-render this page every 60 minutes
export const revalidate = 60 * 60; // in seconds
export default async function StaticallyRenderedPage() {
try {
const splashUrl = await runWithAmplifyServerContext({
nextServerContext: null,
operation: (contextSpec) =>
getUrl(contextSpec, {
key: 'splash.png'
})
});
return (
<Image
src={splashUrl.url.toString()}
alt="Splash Image"
width={500}
height={500}
/>
);
} catch (error) {
console.error(error);
return <p>Something went wrong...</p>;
}
}

NOTE: The URL returned by the getUrl API expires in the above example. You may want to specify the revalidate parameter to rerender the page as required to ensure the URL gets regenerated.

In Route Handlers

Take implementing an API route that enables GET /apis/get-current-user.

import { getCurrentUser } from 'aws-amplify/auth/server';
import { cookies } from 'next/headers';
import { NextResponse } from 'next/server';
import { runWithAmplifyServerContext } from '@/utils/amplifyServerUtils';
export async function GET() {
const user = await runWithAmplifyServerContext({
nextServerContext: { cookies },
operation: (contextSpec) => getCurrentUser(contextSpec)
});
return NextResponse.json({ user });
}

When you call fetch('/apis/get-current-user') it return a payload that contains the user data for the currently signed-in user.

With Next.js Pages Router

In getServerSideProps

The following example extracts current user data from the request and provides them to a page react component via its props.

export const getServerSideProps: GetServerSideProps = async ({ req, res }) => {
const currentUser = await runWithAmplifyServerContext({
nextServerContext: { request: req, response: res },
operation: (contextSpec) => getCurrentUser(contextSpec)
});
return { props: { currentUser } };
};

In getStaticProps

Similar to static rendering with the App Router, you can pass null as the value of the nextServerContext parameter to use the Amplify Storage API with guest access.

export async function getStaticProps() {
const splashUrl = await runWithAmplifyServerContext({
nextServerContext: null,
operation: (contextSpec) => getUrl(contextSpec, { key: 'splash.png' })
});
return {
props: { imageUrl: splashUrl.url.toString() },
revalidate: (splashUrl.expiresAt.getTime() - Date.now()) / 1000 // in seconds
};
}

Supported APIs for Next.js server-side usage

All APIs that support use on the server are exported from the aws-amplify/<category>/server sub paths. You must use these APIs for any server side use cases.

CategoryAPIsServer (Node.js) Amplify Hosting/VercelVercel Edge Runtime (middleware)
AuthfetchAuthSession✅✅
AuthfetchUserAttributes✅✅
AuthgetCurrentUser✅✅
API (GraphQL)generateServerClientUsingCookies✅
API (GraphQL)generateServerClientUsingReqRes✅
API (REST)GET✅
API (REST)POST✅
API (REST)PUT✅
API (REST)DEL✅
API (REST)HEAD✅
API (REST)PATCH✅
StoragegetUrl✅
StoragegetProperties✅
Storagelist✅
Storageremove✅
Storagecopy✅

Migrate from Amplify JavaScript v5

The Amplify JS v5 withSSRContext utility is no longer available with Amplify JS v6. You will need to use the createServerRunner function exported from @aws-amplify/adapter-nextjs to create a runWithAmplifyServerContext function, and use this function to make Amplify API calls on the server side of your Next.js app. For usage examples, see here.