API Integration

This guide explains how to create and consume API routes in Next.ts while using a service-based approach for client-side API calls.

1. Create an API Route

Create a new API route in src/app/api/hello/route.ts:

import { NextResponse } from 'next/server';
export async function GET() {
    return NextResponse.json({ message: "Hello, API!" });
}

2. Install Dependencies

Run the following command:

npm install axios

3. Create API Service

Define a reusable service in src/services/ApiService.ts:

import axios from 'axios';
export async const fetchData = async (url: string): Promise =>{
    const response = await axios.get(url);
    return response.data;
}

4. Consume API in a Component

Use the API service inside a React component:

'use client';
import { useEffect, useState } from 'react';
import { fetchData } from '../services/ApiService';

export default function HelloWorld() {
    const [message, setMessage] = useState('');

    useEffect(() => {
        fetchData<{ message: string }>('/api/hello')
        .then(data => setMessage(data.message))
        .catch(error => console.error(error));
    }, []);

    return 
{message}
;
}