AWS Amplify JavaScript バンドルサイズの縮小および改良された TypeScript と Next.js のサポート（Developer Preview）

本日 (2023 年 9 月 28 日)、AWS Amplify JavaScript Library の v6 Developer Preview を発表しました。これは、AWS クラウドバックエンドを使用した Web 開発へのアプローチ方法を改善するマイルストーンリリースです。私たちは皆様からのフィードバックに耳を傾けており、本日の発表では GitHub で皆様から寄せられていたバンドルサイズや、TypeScript と Next.js のサポートに対するリクエストのいくつかに対応しました。それでは早速、Amplify JavaScript v6 Developer Preview の新機能をご紹介します！

バンドルサイズの縮小によってアプリのロード時間を改善

スピードは贅沢品ではなく、必要不可欠なものです。そのため、私たちはツリーシェイキング機能と基盤となるインフラを改善しました。バンドルサイズを小さくすることで、アプリケーションのロード時間が短縮され、高速ブロードバンドであろうと、断続的な接続であろうと、ユーザーを飽きさせず、満足させることができます。

新しい Developer Preview 版では、Amplify は、カテゴリ全体ではなく、Amplify Auth や Storage などの各カテゴリから、アプリに必要な API のみをインポートします。未使用の機能はツリーシェイクで除外されます。このツリーシェイク機能を実現するために、私たちはクラスベースの開発者体験から関数ベースの開発者体験へと移行しています。

関数ベースの開発者体験は、2 つの重要な点で Amplify JavaScript v5 とは異なります。

1. [赤色の下線部] カテゴリごとにクラスをインポートする代わりに、サブパスから特定の機能をインポートする必要があります。
2. [紫色の下線部] 関数のパラメータがオブジェクトになり、API の読みやすさを向上させるために「名前付きパラメータ」になりました。

TypeScript 体験の向上

私たちのチームは、TypeScript が多くのチームの開発ワークフローに不可欠なものとなり、より大規模で複雑なプロジェクトを管理しやすくなり、高い安全性のレベルを提供していることを理解しています。そのため、今回の Developer Preview では、Auth, Analytics, Storage の各カテゴリを皮切りに、TypeScript のサポートを強化しています。この TypeScript の機能強化は、GraphQL API や REST API を含むすべてのカテゴリに拡大していく予定です。

これらの TypeScript の強化により、より豊富なシンタックスハイライト、コード補完、ストリクトモードのサポートが得られます。また、アプリを実行する前にバグを特定するのに役立つ型チェックも忘れてはなりません。

Next.js App Router, API Routes, Middleware のサポート

Next.js から利用可能なすべての機能に対する総合的なサポートを提供してほしいというのが、私たちのコミュニティからの頻繁な要望でした。これを念頭に置いて、Next.js の機能を組み込み、新しい Next.js アダプタを作成しました。Server Side Rendering (SSR), Middleware, Server Functions, App Router など、使いたい Next.js の機能に関係なく、Amplify JavaScript ライブラリでカバーできます。

Next.js アダプタは、Amplify Libraries を “Amplify Server Context” 内で実行することを可能にし、クラウド上で Amplify Libraries の機能を安全に使用する方法を提供します。runWithAmplifyServerContext コールバックは、リクエストをサーバーサイドで自動的に分離し、クロスリクエストの状態汚染問題を回避します。以下は、保護されたルートを実装するために、Next.js Middleware で Amplify Auth を使用する方法の例です。

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

始め方

これらの新しい機能拡張については、ドキュメントをご覧ください。お客様がすぐに使い始められるよう、豊富なガイドと実用例をご用意しています。また、今後の機能拡張については Q4 のフォーカスエリアもご覧ください。

この Developer Preview は、AWS Amplify をモダンなアプリケーション開発のための最適なソリューションにするという我々のコミットメントを反映しています。しかし、まだ Day1 です。新機能をお試しいただき、この RFC でご意見をお聞かせください。

翻訳者について