AWS Amplify JavaScript’s NEW developer preview with reduced bundle size, improved TypeScript and Next.js support

Today, we are excited to unveil the v6 Developer Preview of the AWS Amplify JavaScript Library. This is a milestone release that we believe will improve the way you approach web development with your AWS cloud backend. We have been listening to your feedback, and today’s announcement addresses some of the most significant bundle size, TypeScript, and Next.js needs you’ve expressed on GitHub. So let’s jump right into what’s new in the Amplify JavaScript v6 developer preview!

Improving App Load Times with Slimmer Bundle Sizes

Speed is not a luxury; it’s a necessity. That’s why we’ve improved our tree shaking capabilities and underlying infrastructure. Smaller bundles mean your applications load quicker, ensuring that you keep your users engaged and happy, whether they are on high-speed broadband or a patchy connection.

With our new developer preview version, Amplify only imports the APIs that you need in your app from each of our categories such as Amplify Auth or Storage instead of the entire category. Unused functionalities are tree-shaken away. To achieve this tree-shaking capability, we are moving from a class-based developer experience to a function-based developer experience.

The function-based developer experiences is different from Amplify JavaScript version 5 in two key ways:

1. [Shown in red] Instead of importing classes for each category, you need to import specific functionalities from a subpath.
2. [Shown in purple] Function parameters are now objects, making them “named parameters” to help improve the readability of the API.

Elevating the TypeScript experience

Our team understands that TypeScript has become an essential to many teams’ development workflow, offering a level of type-safety that makes larger and more complex projects manageable. That’s why in this developer preview, we’re enhancing our TypeScript support, starting with the Auth, Analytics, and Storage categories. We will continue to expand this these TypeScript enhancements to all of our categories, including GraphQL API and REST APIs.

With these TypeScript enhancements, you’ll get richer syntax highlighting, code completion, and strict mode support. And let’s not forget the type checking, which helps you identify some bugs at before you even need to run your app.

Support for Next.js App Router, API routes, and middleware

A frequent ask from our community has been to offer holistic support for all the features available from Next.js. With that in mind, we have incorporated Next.js capabilities and created a new Next.js adapter. Regardless of the features of Nextjs you want to use such as server-side rendering (SSR), Middleware, Server Functions, or the new App Router, the Amplify JavaScript library has you covered.

The Next.js adapter allows you to run the Amplify library inside an “Amplify Server Context”, which offers you a secure way to use the Amplify library functionality in the cloud. The runWithAmplifyServerContext callback automatically isolates the requests server-side to avoid cross-request state-pollution issues. Here’s an example on how to use Amplify Auth with the Next.js middleware to implement protected routes:

import { runWithAmplifyServerContext } from '@aws-amplify/adapter-nextjs';
import { fetchAuthSession } from 'aws-amplify/auth/server';
import { NextRequest, NextResponse } from 'next/server';

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 !== 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).*)',
  ],
};

How to Get Started

You can visit our documentation to explore these new enhancements. We’ve prepared extensive guides and practical examples to help you hit the ground running. You can also visit our Q4 focus areas to learn more about what is coming in the future.

This Developer Preview reflects our commitment to making AWS Amplify your go-to solution for modern application development. But it’s still Day 1. Your feedback is essential to help us improve your experience, so please try out these new features and let us know what you think on this RFC.