Skip to content
On this page

Next.js で LIFF アプリ

React
Next.js
LINE
LIFF

目指すゴールはフロントエンドライブラリ React でひとつの Web アプリを作ること。LINE Front-end FrameworkFirebase Authentication を合わせアプリ内で LINE 認証を使えるようにします。

LIFF は LINE Front-end Framework の略で LINE 社 が提供する Web アプリのプラットフォームです。このプラットフォームで動作する Web アプリを LIFF アプリと呼びます。

LINE AuthSigned

なお、実際の成果物は Firebase Hosting にデプロイを済ませており、 Next.js 並びに React on Vite をご確認いただければ幸いです。

執筆済みの教材

今回の教材は Zenn を利用しています。

テスト課題

  • アイコン画像を表示する
  • メッセージを送信する

参照リポジトリ

https://github.com/jiyuujin/nextjs-liff

また Next.js 上で React を動作させる サンプル と合わせ、参考にしていただければ幸いです。

CHANGELOG

ver.2022.5 branch

React 18 (Next.js 12) に対応している。

ver.2022.4.2 branch

shareTargetPicker を利用して外部ブラウザで LINE にメッセージを送信する。

ver.2022.4.1 branch

LIFF ブラウザでメッセージを送信する。

ver.2022.3 branch

LINE ログイン時にアイコン画像を表示している。

ver.2022.2 branch

LINE Front-end Framework を利用して LINE 認証を実装している。

ver.2022.1 branch

Firebase Authentication の Google 認証を実装している。

補足

Next.js 12 以降、利用可能な Middleware を使って Bot よりカスタムメッセージを返せることについても書かせていただいた。

下記の記事も合わせてチェックいただければ幸いです。