メルマガリーダーを作りたい。以下の要件を含めて仕様を考えて。必要な部分は追記して。markdown形式で出力して。

- リーダーへのemailの入力は、eml形式のファイルのアップロードとする
- 将来的には、自身のメールクライアントから指定アドレスへemailを転送することで入力できるようにする
- Next.js、supabaseを使う
- メルマガを読んだ位置を記録し、次回同じメルマガを開いたら前回読み終えた位置の続きから読めるようにする
- フォントサイズ、ダークモードなど、テキストリーダーにあったほうが良い機能ももたせる
- authはgoogleのssoのみで行う
- メルマガ自体は個人のデータとして持つのではなく、システムで持つ
	- メルマガの入力があった場合に、タイトルや本文と比較を行い、既にあれば読み込み元をそれに、なければ、新規にメルマガを登録する
	- この目的は、DBの圧縮と冗長をなくすことである
	- 個人のアカウントと有効なメルマガを紐付けるようにする
- 将来的にメルマガのデータをAIに学習させて、メルマガの内容についてAIに問い合わせができるようにする
- 将来的に、色々なメルマガに対応させる。そのため、メルマガ単位の管理ができるようにしておく。

# メルマガリーダー仕様書

## 概要
本仕様書は、Next.jsとsupabaseを使用したメルマガリーダーアプリケーションの仕様を記載しています。このアプリでは、ユーザーがeml形式のメールをアップロードし、将来的には指定アドレスへ転送することでメルマガの管理と閲覧が可能になります。さらに、メルマガの読書履歴やカスタマイズ可能なリーダー機能を提供します。

## 要件

### 1. Emailの入力方法
- **現在の入力方法**: eml形式のファイルをアップロードしてメルマガをリーダーに取り込む。
- **将来の入力方法**: ユーザーが自身のメールクライアントから指定されたシステムのメールアドレスにメルマガを転送することで、リーダーに取り込むことができるようにする。

### 2. 読書履歴の管理
- メルマガを読んだ位置を記録し、次回同じメルマガを開いた際に、前回の読み終えた位置から続きが読めるようにする。

### 3. テキストリーダー機能
- フォントサイズ変更機能を提供し、ユーザーが快適にメルマガを閲覧できるようにする。
- ダークモードを搭載し、環境に合わせた表示設定ができるようにする。

### 4. 認証
- GoogleのSSOを用いたシンプルなログインを提供する。Googleアカウントのみで認証を行い、アカウント管理を簡便にする。

### 5. メルマガの管理
- **メルマガのデータ保存**: 個人が所有するデータとしてではなく、システムで一元的に管理する。
  - メルマガの入力があった際、タイトルや本文を比較し、既にデータベースに登録されているメルマガであれば、それを読み込み、そうでなければ新規に登録する。
  - これにより、データの冗長化を避け、データベースを効率的に運用する。
  - 各ユーザーのアカウントに対して、システム内で有効なメルマガと紐付ける。

### 6. 将来的なAI連携
- メルマガの内容をAIに学習させ、ユーザーがメルマガの内容について質問した際に、AIから適切な回答が得られる機能を導入する。

### 7. メルマガ単位の管理
- 複数の異なるメルマガに対応できるよう、メルマガ単位でデータを管理する仕組みを持たせる。
  - 将来的には、複数の種類のメルマガ（週刊誌、月刊誌、ビジネスニュースなど）に対応できるように拡張する。

## 使用技術
- **フロントエンド**: Next.js
- **バックエンド**: Supabase（認証、データベース、ストレージ管理）
- **認証**: Google SSO

## データベース設計

### テーブル構造
#### `users`
- `id` (主キー)
- `email` (Google SSOから取得)

#### `newsletters`
- `id` (主キー)
- `title` (メルマガのタイトル)
- `body` (メルマガ本文)
- `created_at` (登録日時)

#### `user_newsletter_progress`
- `id` (主キー)
- `user_id` (外部キー: users)
- `newsletter_id` (外部キー: newsletters)
- `last_read_position` (前回の読書位置)
- `created_at` (作成日時)
- `updated_at` (更新日時)

## UI/UX機能

### 1. メルマガアップロード画面
- emlファイルをアップロードするフォーム。
- アップロードされたファイルの解析を行い、既存のメルマガデータベースと照合してデータ登録。

### 2. メルマガリーダー画面
- メルマガを表示し、フォントサイズやダークモードの切り替えが可能。
- ユーザーが読んだ位置を記録し、次回から自動的にその位置から表示する。

### 3. ユーザー設定画面
- フォントサイズやダークモードの設定を管理する。
- Google SSOでログイン済みか確認する画面。

## 将来的な機能拡張
- メルマガの内容をAIが学習し、質問に応じて情報を提供する機能。
- 複数メルマガの管理と、それぞれの読書履歴の管理機能。

$ npx create-next-app@latest --typescript
✔ What is your project named? … mail-mag-reader
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /home/junya/dev/MailReader00/mail-mag-reader.

Using npm.

r$ yarn dev
00h00m00s 0/0: : ERROR: [Errno 2] No such file or directory: 'dev'

~/dev/MailReader00/mail-mag-reader$ npm run dev
Debugger listening on ws://127.0.0.1:53608/8be3a637-5318-4ed3-a4c8-be44126fa005
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.

> mail-mag-reader@0.1.0 dev
> next dev

Debugger listening on ws://127.0.0.1:53478/1af5564f-25a5-46bd-a87e-36bd97e33092
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.
Debugger listening on ws://127.0.0.1:53370/2346c87b-94d3-4481-b809-cc590b3236c2
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.
  ▲ Next.js 14.2.13
  - Local:        http://localhost:3000

 ✓ Starting...

npx create-next-app -e with-supabase

# メルマガリーダーを作りたい。

- リーダーへのemailの入力は、eml形式のファイルのアップロードとする
- Next.js(TypeScript), Vercel, supabaseを使う
- メルマガを読んだ位置を記録し、次回同じメルマガを開いたら前回読み終えた位置の続きから読めるようにする
- authはgoogleのssoで行う
- メルマガ自体は個人のデータとして持つのではなく、システムで持つ
	- メルマガの入力があった場合に、タイトルや本文と比較を行い、既にあれば読み込み元をそれに、なければ、新規にメルマガを登録する
	- この目的は、DBの圧縮と冗長をなくすことである
	- 個人のアカウントと有効なメルマガを紐付けるようにする
  - メルマガは、メルマガ名と号数で管理ができるようにしておく。

## users テーブル

| カラム名         | データ型                | 制約                  | 説明               |
|------------------|-------------------------|-----------------------|--------------------|
| id               | BIGINT                  | PRIMARY KEY, IDENTITY | ユーザーID         |
| google_user_id   | TEXT                    | UNIQUE, NOT NULL      | GoogleユーザーID   |
| email            | TEXT                    | UNIQUE, NOT NULL      | ユーザーのメールアドレス |
| created_at       | TIMESTAMPTZ             | DEFAULT NOW()         | 作成日時           |

## newsletters テーブル

| カラム名         | データ型                | 制約                  | 説明               |
|------------------|-------------------------|-----------------------|--------------------|
| id               | BIGINT                  | PRIMARY KEY, IDENTITY | メルマガID         |
| name             | TEXT                    | NOT NULL              | メルマガ名         |
| issue_number     | INT                     | NOT NULL              | 号数               |
| title            | TEXT                    | NOT NULL              | メルマガのタイトル |
| content          | TEXT                    | NOT NULL              | メルマガの内容     |
| created_at       | TIMESTAMPTZ             | DEFAULT NOW()         | 作成日時           |

## user_newsletter_progress テーブル

| カラム名         | データ型                | 制約                  | 説明               |
|------------------|-------------------------|-----------------------|--------------------|
| id               | BIGINT                  | PRIMARY KEY, IDENTITY | 進捗ID             |
| user_id          | BIGINT                  | REFERENCES users(id)  | ユーザーID         |
| newsletter_id    | BIGINT                  | REFERENCES newsletters(id) | メルマガID     |
| last_read_position | INT                   | DEFAULT 0             | 最後に読んだ位置   |
| updated_at       | TIMESTAMPTZ             | DEFAULT NOW()         | 更新日時           |

npm install @supabase/supabase-js

Warning: Prop `className` did not match. Server: 

以下のnext.jsのコードにサインボタンを作り、supabaseの認証を使ってgoogleアカウントでサインインさせたい