Create-LIFF-Appでつまづいたところ覚書（2023年8月時点の情報）
morit4ryoNode.jsのバージョンが17.1.0以下のとき、そもそも
npx @line/create-liff-app
コマンドが走らないことがあるので、当然のことながら最初にNode.jsのバージョンを設定する必要がある。
（と言いつつ設定を忘れていた）
バージョンを正しく設定していない状態では、こんなメッセージが出た：
npx: 62個のパッケージを5.207秒でインストールしました。
Unexpected token .
LIFF ID、どこ…？となった人は、そもそもチャネルを作り間違えている可能性が高い。
チャネルを作成するときに、*Create LIFF AppでLIFFアプリの開発環境を構築する場合は、作るべきチャネルは「LINEログイン」タイプ**となる。
公式ドキュメントちゃんと読め案件✊
一応、LIFF URL（例：https://liff.line.me/1234567890-AbcdEfgh）の
末尾の1234567890-AbcdEfghがLIFF IDではある。
なお、LINEミニアプリタイプのチャネルは、たとえAdminでも削除ができない。
なので間違えて作ってしまったら諦めて放置するしかない…。
の*6参照
morit4ryocreate-liff-appで最初に聞かれるいくつかの質問をスキップするために、
実際にはこちらを入力した：
npx @line/create-liff-app -t nextjs --ts --npm
これにより、質問されるのは、
? Enter your project name: (my-app)
? Please enter your LIFF ID:
この2問だけに。
project nameはmy-appのままで進行。LIFF IDについてはひとつ前のコメントを参照。
morit4ryocreate-liff-appでは、
LIFFの設定に関する質問に加えて、Next.jsを使用するならNext.jsのセットアップに関する質問がされる。
質問内容の日本語訳については、こちらを参照した🙏：
が、Next.js自体の使用経験はあるため、実際の回答は自分のニーズに合わせて調整した。
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like to use `src/` directory? … Yes
✔ Would you like to use App Router? (recommended) … No
✔ Would you like to customize the default import alias? … Yes
✔ What import alias would you like configured? … @/*
App Routerを使用しようと思ったが、create-liff-app側でPages Routerを使用している模様だったため、
✔ Would you like to use App Router? (recommended) … Yes
にすると、次の段階でnpm run devした際に、App Routerで作成されたpage.tsxと、Pages Routerで作成されたindex.tsxがぶつかってしまい、下記のようなコンパイルエラーを起こしてしまった。
Conflicting app and page file was found, please remove the conflicting files to continue:
"pages/index.tsx" - "src/app/page.tsx"
無事create-liff-appからのnpm run devに成功。
今更ながら公式ドキュメントはこちら。
morit4ryoデプロイ先はとりあえずVercelに。
理由としては、現状Hosting以外の機能を特に求めていないため、Firebaseである必要があまりなく、素直にNext.jsとの相性からVercelに。
一応2020年の記事だが、下記をサラッと読んだりもした。
大まかな手順は以下。
- GitHubにレポジトリを作り、ここまでの変更を反映する。
- Vercelアカウントがない場合は無料アカウントで作成し、ガイドに従ってGitHubと連携し、先のレポジトリを紐づけたプロジェクトを作成する。（Root Directoryを正しく選択すること）
- Deployを実行すると、おそらくエラーによりBuildが失敗するので下記を修正する。
import type { Liff } from "@line/liff";
のLiffがエラーとなる箇所がpages/_app.tsxとpages/index.tsxにそれぞれあるので、
import type { liff } from "@line/liff";
と修正する。
それにより、Liffを使用している他の箇所でもエラーが出るので、
Liffをtypeof liffと修正する。
- 以上の修正で、Buildは通るようになるはずだが、LIFF initに失敗しているはずなので、
.envを.env.localから複製して作成する。 - と、LIFF initに成功した状態でBuildされるはず。
morit4ryoデプロイされたものをLINE上から確認できるようにするため、Messaging APIチャネルを作成する。
基本はこちらを参照。
これにより、VercelでデプロイされたものをLINEのトーク画面から開いて確認できるようになった！
（追記：取り急ぎ）
ここではvercelのリンク（=エンドポイントURL）を、トーク画面のボタンに貼っているが、実際はLIFF URLを経由してvercelを開かせないと、sendMessage()などが動かない。
morit4ryoここからはcreate-liff-appで作られたものの整理。
create-liff-appで作られる_app.tsxなどは、ドキュメントルートにpagesフォルダ・stylesフォルダが生成され、その下に置かれているが、create-next-appで作られた_app.tsxなどがsrcフォルダに入っている。
そのため、どちらかに集約し、不要なものを削除する方がよい。
今回は/srcの下に集約し、pagesやstyles、componentなどのフォルダは/src/*に配置。