![見出し画像](https://assets.st-note.com/production/uploads/images/78684405/rectangle_large_type_2_567be4070b549f47edec675ce8d95aad.png?width=1200)
超簡単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アカウント作成
3. Vercelコマンドラインツールインストール
$ npm install -g vercel
4. Vercelデプロイ
質問は全てデフォルト(Enter)選択
$ vercel
デプロイ先URL確認(LIFF ID未設定のためエラー表示)
5. LIFF ID取得
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確認
トーク
メニュータップ
以上、超簡単!