Create-LIFF-Appでつまづいたところ覚書（2023年8月時点の情報）

Node.jsのバージョンが17.1.0以下のとき、そもそも
npx @line/create-liff-app
コマンドが走らないことがあるので、当然のことながら最初にNode.jsのバージョンを設定する必要がある。
（と言いつつ設定を忘れていた）

バージョンを正しく設定していない状態では、こんなメッセージが出た：

npx: 62個のパッケージを5.207秒でインストールしました。
Unexpected token .

morit4ryo

LIFF ID、どこ…？となった人は、そもそもチャネルを作り間違えている可能性が高い。
チャネルを作成するときに、*Create LIFF AppでLIFFアプリの開発環境を構築する場合は、作るべきチャネルは「LINEログイン」タイプ**となる。
公式ドキュメントちゃんと読め案件✊

一応、LIFF URL（例：https://liff.line.me/1234567890-AbcdEfgh）の
末尾の1234567890-AbcdEfghがLIFF IDではある。

なお、LINEミニアプリタイプのチャネルは、たとえAdminでも削除ができない。
なので間違えて作ってしまったら諦めて放置するしかない…。

の*6参照

morit4ryo

create-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についてはひとつ前のコメントを参照。

morit4ryo

create-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"

morit4ryo

無事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/*に配置。