LineBot.pro
教學

LIFF應用開發：用React和Next.js建構LINE前端框架應用

用React和Next.js建構LIFF（LINE前端框架）應用的完整指南。建立在LINE內無縫執行的Web應用程式，具備使用者認證、個人資料存取和訊息傳送功能。

LineBot.pro Team16 分鐘閱讀
LIFF應用開發：用React和Next.js建構LINE前端框架應用

#什麼是LIFF？

LIFF（LINE前端框架）是一個用於建構在LINE應用內執行的Web應用程式的平台。LIFF應用在使用標準Web技術的同時提供類似原生應用的體驗。

#主要功能

  • 無縫認證：無需登入表單即可存取使用者的LINE個人資料
  • 訊息傳送：直接從應用向聊天傳送訊息
  • 分享目標選擇器：讓使用者向好友和群組分享內容
  • QR Code掃描器：內建條碼/QR Code掃描功能
  • 原生體驗：在LINE內的全螢幕體驗

#使用場景

使用場景範例優勢
電商產品目錄、結帳無需下載應用
預約餐廳預訂、預約透過LINE快速存取
會員會員卡、點數系統自動認證
表單調查問卷、註冊豐富的使用者體驗、預填資料
遊戲小遊戲、問答病毒式分享功能

了解更多關於LINE應用開發服務。

#專案設定

#步驟1：在LINE控制台建立LIFF應用

  1. 前往LINE開發者控制台
  2. 選擇您的供應商和頻道
  3. 導航到LIFF頁籤
  4. 點選"新增LIFF應用"
  5. 配置：
    • LIFF應用名稱：您的應用名稱
    • 大小：Full、Tall或Compact
    • 端點URL：您的應用URL（必須是HTTPS）
    • 權限範圍：profile、openid、chat_message.write

#步驟2：設定React/Next.js專案

bash
npx create-next-app@latest my-liff-app --typescript
cd my-liff-app
npm install @line/liff

#步驟3：初始化LIFF SDK

建立LIFF工具檔案：

typescript
// lib/liff.ts
import liff from '@line/liff';

const LIFF_ID = process.env.NEXT_PUBLIC_LIFF_ID!;

export async function initLiff() {
  try {
    await liff.init({ liffId: LIFF_ID });
    console.log('LIFF初始化成功');
    return true;
  } catch (error) {
    console.error('LIFF初始化失敗:', error);
    return false;
  }
}

export function isLoggedIn() {
  return liff.isLoggedIn();
}

export function login() {
  liff.login();
}

export function logout() {
  liff.logout();
}

export async function getProfile() {
  if (!liff.isLoggedIn()) return null;
  return liff.getProfile();
}

export { liff };

#使用者認證

#取得使用者資料

tsx
// components/UserProfile.tsx
'use client';

import { useLiff } from './LiffProvider';
import Image from 'next/image';

export function UserProfile() {
  const { isReady, isLoggedIn, profile, login, logout } = useLiff();

  if (!isReady) {
    return <div>載入中...</div>;
  }

  if (!isLoggedIn) {
    return (
      <button onClick={login} className="btn-primary">
        使用LINE登入
      </button>
    );
  }

  return (
    <div className="flex items-center gap-4">
      {profile?.pictureUrl && (
        <Image
          src={profile.pictureUrl}
          alt={profile.displayName}
          width={48}
          height={48}
          className="rounded-full"
        />
      )}
      <div>
        <p className="font-semibold">{profile?.displayName}</p>
        <button onClick={logout} className="text-sm text-gray-500">
          登出
        </button>
      </div>
    </div>
  );
}

#訊息整合

#傳送訊息

typescript
// 向當前聊天傳送訊息
async function sendMessage(text: string) {
  if (!liff.isInClient()) {
    alert('此功能僅在LINE內可用');
    return;
  }

  await liff.sendMessages([
    {
      type: 'text',
      text: text
    }
  ]);
}

#分享目標選擇器

讓使用者向好友或群組分享內容：

typescript
async function shareToFriends() {
  if (!liff.isApiAvailable('shareTargetPicker')) {
    alert('分享功能不可用');
    return;
  }

  const result = await liff.shareTargetPicker([
    {
      type: 'flex',
      altText: '看看這個產品！',
      contents: {
        type: 'bubble',
        hero: {
          type: 'image',
          url: 'https://example.com/product.jpg',
          size: 'full',
          aspectRatio: '20:13'
        },
        body: {
          type: 'box',
          layout: 'vertical',
          contents: [
            { type: 'text', text: '超棒的產品', weight: 'bold' },
            { type: 'text', text: '¥999', color: '#06C755' }
          ]
        }
      }
    }
  ]);

  if (result) {
    console.log('分享成功');
  }
}

#最佳實踐

#1. 處理外部瀏覽器

LIFF應用可以在外部瀏覽器中開啟。優雅地處理這種情況：

typescript
function App() {
  const { isReady, isInClient, isLoggedIn, login } = useLiff();

  if (!isReady) return <LoadingScreen />;

  // 如果不在LINE內且未登入，顯示登入按鈕
  if (!isInClient && !isLoggedIn) {
    return (
      <div className="text-center p-8">
        <h1>歡迎！</h1>
        <p>使用LINE登入以繼續</p>
        <button onClick={login} className="btn-primary">
          使用LINE登入
        </button>
      </div>
    );
  }

  return <MainApp />;
}

#2. LIFF尺寸的響應式設計

css
/* Compact: 約50%螢幕高度 */
/* Tall: 約75%螢幕高度 */
/* Full: 100%螢幕 */

.liff-container {
  min-height: 100vh;
  min-height: 100dvh; /* 動態視窗高度 */
}

/* 瀏海裝置的安全區域 */
.liff-content {
  padding-bottom: env(safe-area-inset-bottom);
}

#3. 深度連結

建立可分享的URL，開啟特定頁面：

typescript
// LIFF URL格式：https://liff.line.me/{liffId}/{path}
const productUrl = `https://liff.line.me/${LIFF_ID}/product/${productId}`;

#部署

#部署到Vercel

bash
# 安裝Vercel CLI
npm install -g vercel

# 部署
vercel --prod

#環境變數

在Vercel儀表板或.env.local中設定：

env
NEXT_PUBLIC_LIFF_ID=your-liff-id

#測試清單

  • 在LINE應用中測試（iOS和Android）
  • 在外部瀏覽器中測試
  • 測試登入/登出流程
  • 測試訊息傳送（如適用）
  • 測試分享目標選擇器（如適用）
  • 在不同螢幕尺寸上測試

#結論

LIFF實現了Web應用與LINE之間的強大整合。關鍵要點：

  • 在應用生命週期早期初始化LIFF
  • 處理用戶端內和外部瀏覽器兩種場景
  • 使用分享目標選擇器實現病毒式傳播功能
  • 始終在後端驗證存取權杖
  • 在實際裝置上進行徹底測試

準備好建構您的LIFF應用了嗎？

試用LineBot.pro，使用我們的模板和工具快速開發LIFF。透過預建構元件更快地建構LINE迷你應用程式。

相關資源：

相關服務

line app development
line development
line automation

關於 LineBot.pro

LineBot.pro 是專為 LINE 官方帳號打造的自動化平台，協助您建立圖文選單、聊天機器人與群發訊息。這些指南由我們的團隊根據 LINE Messaging API 的實務經驗撰寫。

聯絡我們
部落格

相關文章

@line/bot-sdk Express 中介軟體：replyMessage 與 validateSignature 完整示例
教學

@line/bot-sdk Express 中介軟體：replyMessage 與 validateSignature 完整示例

@line/bot-sdk Express 中介軟體實戰：webhook 簽名驗證、replyMessage 與 sentMessages、錯誤處理、TypeScript 型別。

閱讀更多
LINE Messaging API 2026 更新：新功能、定價與變更
新聞

LINE Messaging API 2026 更新：新功能、定價與變更

LINE Messaging API 2026 更新完整參考：新功能、定價變更、Rich Menu限制、Mini App更新、臺灣/泰國/日本各地定價。

閱讀更多
LINE聊天機器人開發教程：從零構建您的第一個機器人
教學

LINE聊天機器人開發教程：從零構建您的第一個機器人

從零開始構建LINE聊天機器人的完整指南。學習Messaging API架構、webhook設定、訊息處理、AI整合和部署，包含Node.js和Python示例。

閱讀更多
LineBot.pro

準備好自動化您的LINE業務了嗎？

立即使用LineBot.pro開始自動化您的LINE訊息溝通。

開始免費試用查看價格