Nexon Open API

Nexon Open API provides open API services for Nexon games

How to use

Requirements

Nexon Account (not maple account)

if you don't have account create your accout here
Application Register

register here https://openapi.nexon.com/game/maplestory/?id=22
API KEY

once you register you can get your API KEY

Detailed Instruction can be found here

Maple Story

project structure

.
├── maple
│   └── [slug]
│       └── page.tsx

lib
├── api.tsx

https://openapi.nexon.com/guide/request-api/ Documentation for Open API

Using API

example code getting ocid using character name

const API_KEY = "발급 받은 API Key";
const characterName = "캐릭터명";
const urlString = "https://open.api.nexon.com/heroes/v1/id?character_name=" + characterName;

const answer = fetch(urlString, {
    headers:{
      "x-nxopen-api-key": API_KEY
    }
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error))

console.log(answer)

convert to TS code

// api.tsx
export async function OCID(request: string) {
    let characterName: string;
    if (!request) {
        characterName = "NickRoh2"
    } else {
        characterName = request
    }

    const API_KEY = process.env.MAPLE as string; // key는 보안을 위해 따로 보관한다
    const urlString = "https://open.api.nexon.com/maplestory/v1/id?character_name=" + characterName;

    const myheaders = new Headers({
        'x-nxopen-api-key': API_KEY,
    });

    const answer = await fetch(urlString, {
        headers: myheaders
    })

    const data = await answer.json()

    return data.ocid
}

using ocid get character data

const getCurrentDate = (): string => { 
    const currentDate = new Date();
    const yesterdayDate = new Date(currentDate.getTime() - 86400000);
    const formattedDate = yesterdayDate.toISOString().slice(0, 10);
    return formattedDate;
};

export async function BASIC(request: string) {
    let name: string;

    name = request

    if (name == null) {
        name = "NickRoh2"
    }

    let ocid: string = "err";
    ocid = await OCID(name)

    const API_KEY = process.env.MAPLE as string;
    const urlString = "https://open.api.nexon.com/maplestory/v1/character/basic?ocid=" + ocid + "&date=" + getCurrentDate();;

    const myheaders = new Headers({
        'x-nxopen-api-key': API_KEY,
    });

    const answer = await fetch(urlString, {
        headers: myheaders
    })

    const data = await answer.json()

    return data
}

below is example of response

{
  "date": "2023-12-21T00:00+09:00",
  "character_name": "string",
  "world_name": "string",
  "character_gender": "string",
  "character_class": "string",
  "character_class_level": "string",
  "character_level": 0,
  "character_exp": 0,
  "character_exp_rate": "string",
  "character_guild_name": "string",
  "character_image": "string"
}

Open Graph

use open graph to show brief data Open Graph

using dynamic routing when accessed to ..maple/[캐릭터닉네임] get ocid using [캐릭터닉네임]

based on the data received generate metadata for open graph

import { BASIC } from '..lib/api'
import type { Metadata, ResolvingMetadata } from 'next'

interface CharacterData { // json interface
    date: string;
    character_name: string;
    world_name: string;
    character_gender: string;
    character_class: string;
    character_class_level: string;
    character_level: number;
    character_exp: number;
    character_exp_rate: string;
    character_guild_name: string;
    character_image: string;
}

export const generateMetadata = async ({ params }: { params: { slug: string } }): Promise<Metadata> => {
    const jsonData: CharacterData = await BASIC(params.slug)

    return {
        openGraph: {
            title: jsonData.character_name,
            description: jsonData.character_level.toString() + "Lv " + jsonData.character_class + " " + jsonData.character_gender,
            url: '..maple/' + jsonData.character_name,
            siteName: ' ',
            images: [
                {
                    url: jsonData.character_image,
                    width: 100,
                    height: 100
                },
            ],
            locale: 'en-US',
            type: 'website',
        },
    }
}

export default async function Home({ params }: { params: { slug: string } }) {
    const jsonData: CharacterData = await BASIC(params.slug)
    return (
        <div>
            <img src={jsonData.character_image} alt="" />
            <p>{jsonData.character_class}</p>
            <p>{jsonData.character_class_level}</p>
            <p>{jsonData.character_exp}</p>
            <p>{jsonData.character_exp_rate}</p>
            <p>{jsonData.character_gender}</p>
            <p>{jsonData.character_guild_name}</p>
            
            <p>{jsonData.character_level}</p>
            <p>{jsonData.character_name}</p>
        </div>

    )
}