Amplify JS 适配器新增多语言支持：为Cognito托管登录界面设置语言参数

在最新版本的Amplify JS框架中，开发团队为Next.js适配器增加了一项重要功能——支持为Cognito托管登录界面设置语言参数。这项改进使得开发者能够更灵活地控制用户认证流程中的语言显示。

功能背景

Cognito作为AWS提供的身份验证服务，其托管登录界面支持通过URL参数动态设置显示语言。此前，当开发者使用Amplify的Next.js适配器时，无法直接配置这个语言参数，导致国际化应用在认证流程中出现语言不一致的问题。

技术实现

Amplify团队通过两种方式实现了这一功能：

1. 运行时动态配置：开发者现在可以通过在sign-in路由中添加查询参数来设置语言，例如/api/amplify-auth/sign-in?lang=ja。这种方式特别适合需要根据用户浏览器语言或应用设置动态调整界面语言的场景。

2. 静态配置选项：团队也提供了在createAuthRouteHandlers中直接设置语言的选项，适合语言设置固定的应用场景。

使用方法

对于大多数需要动态语言支持的Next.js应用，推荐使用查询参数的方式：

// 在页面组件中生成带语言参数的登录链接
const loginUrl = `/api/amplify-auth/sign-in?lang=${userLanguage}`;

或者，如果应用语言设置固定，可以在路由处理器中配置：

import { createAuthRouteHandlers } from "@/utils/amplifyServerUtils";

export const GET = createAuthRouteHandlers({
  redirectOnSignInComplete: "/home",
  redirectOnSignOutComplete: "/sign-in",
  managedLoginOptions: {
    lang: 'ja', // 固定设置为日语
  }
});

技术意义

这一改进使得Amplify框架在国际化支持方面更加完善，特别是在以下场景中尤为有用：

1. 多语言企业应用，需要保持整个用户体验的语言一致性
2. 面向特定地区用户的应用，需要默认显示当地语言
3. 需要根据用户浏览器语言自动适配的全球化应用

最佳实践

在实际项目中，建议：

1. 将语言参数与现有的i18n解决方案集成，保持全栈语言一致性
2. 考虑用户浏览器语言首选项，自动设置合适的语言参数
3. 在语言切换功能中同步更新认证流程的语言设置

这一功能的加入进一步提升了Amplify框架在Next.js应用中的开发体验，使得认证流程的国际化变得更加简单和灵活。