超簡単Next.jsでLINE LIFFアプリ入門（Create LIFF App利用）

Next.jsで超簡単にLINE LIFFアプリに入門（Create LIFF App利用）

1. LIFFアプリ作成

6つの質問に答えてひな形作成（LIFF IDは後で設定）

$ npx @line/create-liff-app

Welcome to the Create LIFF App
? Enter your project name:  my-app
? Which template do you want to use? nextjs
? JavaScript or TypeScript? JavaScript
? Please enter your LIFF ID: 
? Do you want to install it now with package manager? Yes
? Which package manager do you want to use? npm

ローカル実行（LIFF ID未設定のためエラー表示）

$ cd my-app
$ npm run dev

2. Vercelアカウント作成

Sign Up – Vercel

3. Vercelコマンドラインツールインストール

$ npm install -g vercel

4. Vercelデプロイ

質問は全てデフォルト（Enter）選択

$ vercel

デプロイ先URL確認（LIFF ID未設定のためエラー表示）

5. LIFF ID取得

LINE Developersコンソールにログイン

LINE Developers

プロバイダー作成

LINEログインチャネル作成

アプリタイプはウェブアプリを選択

チャネル作成完了

LIFFアプリ追加

エンドポイントURLには、Vercelデプロイ先URLを設定

6. 再デプロイ

取得したLIFF IDを環境設定してVercelに再デプロイ

my-app/.env

NEXT_PUBLIC_LIFF_ID=<"Your LIFF ID">

再デプロイ

$ vercel

デプロイ先URL確認（エラー無し）

7. Messaging APIチャネル作成

LINE Developersコンソールより新規チャネル作成

Messaging API新規作成

作成後、チャネル基本情報からLINE Official Account Managerへ移動

LINE Official Account Managerのホーム＞リッチメニューからリッチメニュー作成

テンプレートを選択後、画像を作成

文字入力等にて画像を適用

アクションタイプにリンクを、URLにLIFFアプリデプロイ先（Vercel）URLを設定

Messaging API設定のQRコードをスマホのLINEで友だち追加

8. LINE確認

トーク

メニュータップ

以上、超簡単！

9. 参考

LINE Developers