چگونه از Fetch API در Next.js استفاده کنیم؟

جاوا اسکریپت تقریباً در تمام زمینه های علوم کامپیوتر به طور گسترده استفاده می شود. یکی از زمینه های استفاده آن وب است، جایی که از API های مرورگر برای پشتیبانی از وب سایت های پویا استفاده می کند. جاوا اسکریپت همچنین طیف گسترده ای از فریمورک ها و کتابخانه ها را برای کمک به فرآیند کدنویسی آسان تر، ساده تر و کارآمدتر ارائه می دهد.

در این قسمت به نحوه استفاده از fetch API در Next.js خواهیم پرداخت. پس بدون هیچ مقدمه ای، بیایید وارد شویم!

Next.js چیست؟

یک فریمورک وب است که بر روی React.js ساخته شده است. Next.js قابلیت‌های React.js را با ارائه ویژگی‌هایی مانند رندر سمت سرور، تولید سایت استاتیک، تولید استاتیک افزایشی، یک REST API فعال، مسیریابی مبتنی بر سیستم فایل، مسیریابی پویا و غیره به توسعه‌دهندگان گسترش می‌دهد. بهینه سازی، ساختار اضافی و ویژگی های جدید.

از آنجایی که نکست جی اس ، React.js را گسترش می دهد، می توانید با نوشتن تمام کدهای React.js شروع کنید و در نهایت ویژگی های Next.js را به برنامه خود اضافه کنید. می‌توانید برنامه را در سمت سرور رندر کنید، بنابراین قبل از بارگیری برنامه وب در مرورگر، همه داده‌ها از قبل fetch شده‌اند. پس از آن، می‌توانید یک REST API ساده بدون راه‌اندازی سرور Node.js بنویسید.

استفاده از fetch API

بیایید این کار را در مراحلی انجام دهیم تا کارها ساده تر شود.

مرحله اول

ما به یک API نیاز داریم که بتوانیم با آن ارتباط بگیریم تا نحوه استفاده از fetch API در Next.js را یاد بگیریم. برای این کار، از RapidAPI Hub استفاده می کنیم که بیش از 35000 API را ارائه می دهد.

ما از Famous Quotes API از RapidAPI Hub استفاده خواهیم کرد.

مرحله دوم

حالا باید یک برنامه Next.js راه اندازی کنیم. ساده ترین راه این است که دستور زیر را در ترمینال خود اجرا کنید:

npx create-next-app next-app

این دستور یک پروژه Next.js به نام next-app ایجاد می کند. اگر می خواهید نام را تغییر دهید، فقط می توانید next-app را با چیزی که می خواهید جایگزین کنید.

مرحله سوم

اکنون این دایرکتوری را در ویرایشگر کد دلخواه خود باز کنید. پس از آن، برنامه ای را که دستور زیر را در ترمینال پروژه خود اجرا می کند، اجرا کنید:

npm run dev

محیط توسعه برنامه Next.js شما را اجرا می کند.

مرحله چهارم

پس از اتمام کار، فایل index.js را در دایرکتوری صفحات باز کنید و تمام کدها را حذف کنید. حالا موارد زیر را در این فایل کپی و پیست کنید:

import styles from '../styles/Home.module.css';
export default function Home() {
    const callAPI = async () => {};
    return (
        <div className={styles.container}>
            <main className={styles.main}>
                <button onClick={callAPI}>Make API call</button>
            </main>
        </div>
    );
}

کد بالا دکمه ای را نمایش می دهد که با کلیک کردن، عملکرد callAPI را اجرا می کند.

ما از Fetch API خود در داخل تابع callAPI برای فراخوانی APIها استفاده خواهیم کرد. بیایید یاد بگیریم که چگونه این کار را انجام دهیم.

const callAPI = async () => {
    try {
        const res = await fetch(
            `https://famous-quotes4.p.rapidapi.com/random?category=all&count=2`,
            {
                method: 'GET',
                headers: {
                    'X-RapidAPI-Key': 'your-rapidapi-key',
                    'X-RapidAPI-Host': 'famous-quotes4.p.rapidapi.com',
                },
            }
        );
        const data = await res.json();
        console.log(data);
    } catch (err) {
        console.log(err);
    }
};

Fetch API ناهمزمان است، بنابراین باید منتظر آن باشیم. این تابعی است که نقطه پایانی API را به عنوان اولین پارامتر خود می گیرد. دومین پارامتر fetch API یک شی است که حاوی داده هایی مانند روش HTTP، هدر درخواست، بدنه درخواست و غیره است.

ما یک درخواست GET در قطعه کد بالا ارائه کرده ایم. اگر می خواهید یک درخواست POST ایجاد کنید، می توانید GET را با POST جایگزین کنید. در اینجا یک قطعه کد نمونه از نحوه ایجاد یک درخواست POST با استفاده از fetch API در Next.js آورده شده است.

const res = await fetch(`API-ENDPOINT`, {
        method: 'POST',
        body: {},
});
const data = await res.json();
console.log(data);

می بینید که روش POST با کلید body است که یک آبجکت را نگه می دارد. این آبجکت حاوی بدنه درخواستی است که به همراه یک درخواست POST API ارسال می شود.

این کد نهایی است که می توانید آن را کپی کرده و در فایل index.js خود قرار دهید:

import styles from '../styles/Home.module.css';
export default function Home() {
    const callAPI = async () => {
        try {
            const res = await fetch(
                `https://famous-quotes4.p.rapidapi.com/random?category=all&count=2`,
                {
                    method: 'GET',
                    headers: {
                        'X-RapidAPI-Key': 'your-rapidapi-key',
                        'X-RapidAPI-Host': 'famous-quotes4.p.rapidapi.com',
                    },
                }
            );
            const data = await res.json();
            console.log(data);
        } catch (err) {
            console.log(err);
        }
    };
    return (
        <div className={styles.container}>
            <main className={styles.main}>
                <button onClick={callAPI}>Make API call</button>
            </main>
        </div>
    );
}

ما تابع callAPI را در کنترل کننده رویداد onClick دکمه فراخوانی می کنیم. با استفاده از fetch API در برنامه Next.js یک تماس API برقرار می کند.

امیدوارم اکنون متوجه شده باشید که چگونه از fetch API در داخل برنامه Next.js برای فراخوانی سایر APIها استفاده کنید.