NOTE 110 / 2022年
LIFF を Next.js で包むときの注意点
LIFF の画面を Next.js で作る際に、構成と初期化で気をつけた点です。
LIFF は LINE のアプリ内で Web 画面を表示する仕組みです。Next.js と組み合わせると、ルーティングや画像の扱いが楽になる一方で、初期化のタイミングと認証情報の受け渡しには注意が必要です。
静的配信と相性のよい構成を選び、クライアント側で LIFF の準備が整ってから画面を出します。開発中は実際の LINE アプリでの確認を忘れず、ブラウザだけで完結させないことが大切です。
押さえたい点
- 01LIFF の初期化完了を待って描画する
- 02認証情報を画面に露出させない
- 03実機の LINE アプリで確認する
参考資料
外部サイトが開きます。内容は各サイトの管理下にあります。
- React 学習ガイド 外部サイトreact.dev
- React リファレンス 外部サイトreact.dev
- React で考える 外部サイトreact.dev
- useState リファレンス 外部サイトreact.dev
- useEffect リファレンス 外部サイトreact.dev
- useContext リファレンス 外部サイトreact.dev
- TypeScript ドキュメント 外部サイトtypescriptlang.org
- Next.js ドキュメント 外部サイトnextjs.org
- Next.js 学習 外部サイトnextjs.org
- Vercel ドキュメント 外部サイトvercel.com
- TypeScript の設定 外部サイトtypescriptlang.org
- MDN Web Docs 外部サイトdeveloper.mozilla.org
- Firebase Hosting 外部サイトfirebase.google.com