【NEXTJS15】LIFFスターターアプリの始め方【LINEミニアプリ】

LIFFスターターアプリの始め方でつまづいたところ。

以下のファイルの修正が必要

• next.config.js
• netlify.toml

バージョン

//  /src/nextjs/package.json

{
  "name": "liff-starter-nextjs",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev -p 9000",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@line/liff": "2.24.0",
    "next": "15.0.1",
    "react": "18.3.1",
    "react-dom": "18.3.1"
  },
  "devDependencies": {
    "eslint": "9.13.0",
    "eslint-config-next": "15.0.1"
  }
}

next.config.jsの修正

静的エクスポートを有効にする。

// /src/nextjs/next.config.js

module.exports = {
  reactStrictMode: true,
  output: 'export',  // 追加
  env: {
    LIFF_ID: process.env.LIFF_ID,
  },
};

build時に /src/nextjs/out/ が生成されるようになる。

netlify.tomlの修正

デフォルトでは/src/vanillaが対象になっているので、nextjsを対象にする。

/netlify.toml
[build]
  command = "cd src/nextjs && yarn install && yarn build"
  publish = "src/nextjs/out"