Kỹ thuật xử lý Universal Links iOS với file AASA trên Next.js backend

Khi khách hàng nhấp vào một đường link trên Facebook, Zalo hoặc Email (Ví dụ: https://uwmee.com/product/123), làm sao để hệ điều hành iOS **tự động mở thẳng ứng dụng di động và dẫn tới đúng trang sản phẩm**, thay vì mở trên trình duyệt Safari? Công nghệ Universal Links (Liên kết vạn năng) chính là câu trả lời!

1. Universal Links khác gì với Custom URL Scheme cũ?

• Custom URL Scheme (myapp://): Dễ bị đụng độ trùng tên với các app khác và hiển thị popup cảnh báo khó chịu.
• Universal Links (https://): Sử dụng tên miền trang web thực sự của bạn (Domain HTTPS), bảo mật 100% và chuyển hướng mượt mà không có popup hỏi lại.

2. 3 Bước cấu hình Universal Links với Next.js Backend

Bước 1: Phục vụ file apple-app-site-association trên Next.js

Tạo Route Handler trong Next.js tại file src/app/.well-known/apple-app-site-association/route.js:

import { NextResponse } from 'next/server';

export async function GET() {
  const aasa = {
    applinks: {
      apps: [],
      details: [
        {
          appID: "TEAMID.com.uwmee.app", // Team ID + Bundle Identifier
          paths: ["/product/*", "/blog/*"]
        }
      ]
    }
  };

  return NextResponse.json(aasa, {
    headers: {
      'Content-Type': 'application/json',
    },
  });
}

Bước 2: Cấu hình Associated Domains trong Xcode

Mở Xcode → Signing & Capabilities → Thêm capability Associated Domains → Chèn domain của bạn dạng: applinks:uwmee.com.

Bước 3: Xử lý sự kiện nhấp Link trong Flutter / React Native

Sử dụng thư viện app_links (Flutter) hoặc Linking (React Native) để hứng URL và điều hướng màn hình (xem bài Expo Router Deep Link).

Kết luận

Cấu hình Universal Links mang lại trải nghiệm liền mạch giữa Website và Mobile App cho chiến dịch Marketing. Uwmee Software thiết lập sẵn luồng Universal Links kết nối giữa Next.js và App Mobile. Đọc thêm bài viết Deep Link Android App Links.