Create Next App

<div align="center"> <img src="./public/logo.png" alt="Animetsu Logo" width="600" style="border-radius: 12px; margin-bottom: 20px; box-shadow: 0 4px 14px rgba(0,0,0,0.5);" /> <h1>🌟 Animetsu API 🌟</h1> The Ultimate, High-Performance Anime Streaming API & Proxy Layer <img src="https://img.shields.io/badge/Next.js-14-black?style=for-the-badge&logo=next.js" /> <img src="https://img.shields.io/badge/TypeScript-Pro-blue?style=for-the-badge&logo=typescript" /> <img src="https://img.shields.io/badge/HLS.js-Streaming-red?style=for-the-badge" /> <img src="https://img.shields.io/badge/JWPlayer-Supported-ff0055?style=for-the-badge" /> </div>

📖 Table of Contents

✨ Features
🚀 Quick Start
☁️ Deployment
🎮 Player Integration
- JWPlayer Integration (Recommended)
- Custom HTML5 Player Integration (Aniflix)
📚 API Reference
💖 Credits

✨ Features

Built-in HLS Proxy: Direct playback of Cloudflare-protected .m3u8 playlists without passing custom headers in your client.
Subtitle Parsing: Soft-subs are extracted, proxied, and parsed cleanly.
Edge Optimized: Built on Next.js Edge runtime for massive concurrency.
Cross-Origin Ready: Bypasses CORS effortlessly.

🚀 Quick Start

Clone & Install

git clone https://github.com/your-username/animetsu-api.git
cd animetsu-api
npm install

Run Development Server
```
npm run dev
```
Server runs on http://localhost:3000

☁️ Deployment

This project is optimized for the Edge and deploys seamlessly to Cloudflare Pages using @cloudflare/next-on-pages.

Deploy via Cloudflare Dashboard (Recommended)

Go to your Cloudflare Dashboard.
Navigate to Workers & Pages -> Create application -> Pages -> Connect to Git.
Select your repository and use the following build settings:
- Framework preset: Next.js
- Build command: npx @cloudflare/next-on-pages
- Build output directory: .vercel/output/static

Manual Deployment Guide

Install Wrangler CLI globally (if not already)
```
npm install -g wrangler
```
Login to Cloudflare
```
wrangler login
```
Build the Project for Cloudflare Pages
```
npx @cloudflare/next-on-pages
```

Deploy to Cloudflare Pages

npx wrangler pages deploy .vercel/output/static --project-name animetsu-api

🎮 Player Integration

1. JWPlayer Integration (Recommended)

JWPlayer handles .m3u8 qualities natively and parses subtitles perfectly.

<details> <summary>Show JWPlayer Code</summary>

<!-- Include JWPlayer Library -->
<script src="https://content.jwplatform.com/libraries/KB5zFt7A.js"></script>
<div id="player"></div>

// 1. Fetch Watch Data
const res = await fetch(`http://localhost:3000/api/watch?id=6989bf2429cf95f4eb040650&ep=1&server=pahe&source_type=sub`);
const json = await res.json();
const watchData = json.data;

// 2. Map subtitles to JWPlayer Track format
const tracks = watchData.subtitles?.map(sub => ({
  file: sub.url, // Proxied soft-subs!
  label: sub.label,
  kind: "captions",
  "default": sub.label.toLowerCase().includes("english")
})) || [];

// 3. Initialize JWPlayer
jwplayer("player").setup({
  playlist: [{
    file: watchData.sources[0].proxy_url, // Automatically detects 1080p, 720p, etc.
    tracks: tracks
  }],
  width: "100%",
  aspectratio: "16:9",
  autostart: true
});

</details>

2. Custom HTML5 Player Integration (Aniflix)

If you are building a highly customized UI (like Aniflix Player) from scratch using raw HTML/CSS, use hls.js.

<details> <summary>Show Custom Player Code</summary>

import Hls from "hls.js";

const videoElement = document.querySelector("#vid");
const res = await fetch(`http://localhost:3000/api/watch?id=6989bf2429cf95f4eb040650&ep=1&server=pahe&source_type=sub`);
const watchData = (await res.json()).data;
const streamUrl = watchData.sources[0].proxy_url;

if (Hls.isSupported()) {
  const hls = new Hls();
  hls.loadSource(streamUrl);
  hls.attachMedia(videoElement);

  // MANUALLY HOOKING UP QUALITY BUTTONS:
  hls.on(Hls.Events.MANIFEST_PARSED, (event, data) => {
    // Force switch quality
    document.querySelector("#btn-1080p").onclick = () => {
      hls.currentLevel = data.levels.findIndex(l => l.height === 1080);
    };
  });
}

// INJECTING SUBTITLES
if (watchData.subtitles) {
  watchData.subtitles.forEach(sub => {
    const track = document.createElement("track");
    track.kind = "subtitles";
    track.label = sub.label;
    track.srclang = sub.lang.substring(0, 2).toLowerCase(); 
    track.src = sub.url; 
    if (sub.lang.toLowerCase().includes("english")) track.default = true;
    videoElement.appendChild(track);
  });
}

</details>

📚 API Reference

Here are the primary endpoints documented with exact schemas and cURL examples.

<details> <summary>1. Get Anime Info <code>/api/anime/[id]</code></summary>

Fetch detailed metadata about a specific anime.

| Path Variable | Type | Required | Description | |---------------|------|----------|-------------| | id | string | Yes | The Anime ID |

Example cURL:

curl -s "http://localhost:3000/api/anime/6989bf2429cf95f4eb040650"

</details> <details> <summary>1b. Get Anime Info via AniList ID <code>/api/anime/anilist/[id]</code></summary>

Fetch detailed anime metadata using a dynamic AniList ID.

This endpoint performs an automated background mapping:

Queries the AniList GraphQL API to fetch anime titles (romaji, english, native, userPreferred), synonyms, release year, format, and episode count.
Executes parallel search queries on the Animetsu API using Romaji and English titles.
Applies a multi-factor scoring algorithm checking normalized title similarity, release year compatibility (exact year vs. ±1 year crossing season boundaries), format matches (TV, MOVIE, OVA, ONA, SPECIAL), and episode counts.
Instantly resolves the target Animetsu ID and retrieves the detailed info, returning the payload as a drop-in replacement with additional mapping details.

| Path Variable | Type | Required | Description | |---------------|------|----------|-------------| | id | number | Yes | The AniList ID (e.g. 21 for One Piece, 16498 for Attack on Titan S4) |

Example cURL:

curl -s "http://localhost:3000/api/anime/anilist/21"

Additional Response Attributes: This endpoint automatically injects mapping metadata into the standard data object:

{
  "success": true,
  "data": {
    "id": "6989b8a429cf95f4eb03b52f",
    "title": {
      "romaji": "One Piece",
      "english": "One Piece",
      "native": "ONE PIECE"
    },
    "anilist_id": 21,
    "mapped_by": "anilist-to-animetsu-v1",
    "match_score": 125
  }
}

</details> <details> <summary>2. Home Feed <code>/api/home</code></summary>

Fetch the curated home feed containing spot-lighted animes, latest episodes, etc.

Example cURL:

curl -s "http://localhost:3000/api/home"

</details> <details> <summary>3. Popular Anime <code>/api/popular</code></summary>

Fetch the all-time popular animes.