Next.jsにLINEのapiを用いてメッセージを送信する

こちらでLINEログインを導入した前提で進めてまいります。

https://qiita.com/tkms13/items/d6497b52515a6110eda5

# LINE公式アカウントの作成
Messaging API channelを作成するにはLINEビジネスIDが必要なのでこちらをあらかじめ作っておきます。その後、以下のようにLINE公式アカウントを作成します。
![FireShot Capture 017 - LINE Official Account - entry.line.biz.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3439167/7b8fdc19-5d74-84a1-a2d6-8daa1c59de40.png)



https://developers.line.biz/ja/docs/messaging-api/getting-started/#using-oa-manager

LINE Official Account Managerにアクセスし、「設定」→「Messaging APIを利用する」を選択します。

![スクリーンショット 2025-01-18 203053.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3439167/8bf34dbf-2ae2-3049-891b-b1ec3376902d.png)



![スクリーンショット 2025-01-18 203248.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3439167/750de11e-4cee-c39e-f18f-58a795d4f18d.png)

そして、プロバイダーを選択し「同意する」を選択します。その後も任意の項目を必要に応じて入力します。
![スクリーンショット 2025-01-18 203401.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3439167/3de3c7e7-5fac-2da6-e141-06c4dfe50a5a.png)

APIが有効化されると以下のような画面になります。
![スクリーンショット 2025-01-18 203706.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3439167/c189a81e-3ec6-b693-cbc3-7baa0e4f0fcf.png)

LINE Developer consoleに戻ってChannel access tokenを発行します。以下の${process.env.NEXT_PUBLIC_CHANNEL_ACCESS_TOKEN}にChannel access tokenを設定します。
![スクリーンショット 2025-01-19 181053.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3439167/b93eee6b-c765-5d6d-f468-b9aed0a07ded.png)


```react:@/app/test.page.tsx
'use client';

import {
  getLinProfileServerComponent,
  sendLineMessageAction,
  updateTokenServerComponent,
} from '@/app/actions/set-cookie';
import { Button } from '@mui/material';
export default function ClientComponent() {

  const sendLine = async () => {
    const data = await updateTokenServerComponent();
    console.log(data);
    const profile = await getLinProfileServerComponent(data.access_token);
    console.log(profile);
    await sendLineMessageAction(profile.userId);
  };
  return (
    <>
      <Button color='inherit' onClick={sendLine}>
        sendLine
      </Button>
    </>
  );
}
```

```react:@/app/actions/set-cookie.ts
import { v4 as uuidv4 } from 'uuid';

export async function sendLineMessageAction(uid: string) {
  console.log(uid);
  const messagePayload = {
    to: uid, // Replace with actual user ID
    messages: [
      { type: 'text', text: 'test' },
    ],
  };

  const requestOptions = {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${process.env.NEXT_PUBLIC_CHANNEL_ACCESS_TOKEN}`,
      'X-Line-Retry-Key': uuidv4(), // Replace with a valid UUID
    },
    body: JSON.stringify(messagePayload),
  };

  try {
    const response = await fetch('https://api.line.me/v2/bot/message/push', requestOptions);

    if (response.ok) {
      console.log('Message sent successfully');
    } else {
      const errorData = await response.json();
      console.error('Error sending message:', errorData);
    }
  } catch (error) {
    console.error('Network Error during message send:', error);
  }
}

```
以上でButtonを押すとメッセージが送信されるはずです。

# 参考

https://developers.line.biz/ja/docs/messaging-api/sending-messages/