نحوه کار مسیرهای API

1. مسیرهای API مبتنی بر فایل:
   مسیرهای API در داخل دایرکتوری /app/api ایجاد می شوند. هر فایل در این دایرکتوری یک نقطه پایانی تعریف می کند. نام فایل (یا ساختار پوشه) با مسیر پایانی نقطه مطابقت دارد.

2. اشیاء درخواست و پاسخ:
   مسیرهای API از طریق اشیاء req و res به سبک Node.js درخواست ها و پاسخ ها را مدیریت می کنند. این باعث می شود که پردازش داده های ورودی و ارسال پاسخ ها آسان شود.

3. اجرای سمت سرور:
   مسیرهای API همیشه در سرور اجرا می شوند، اطمینان از اینکه اجرای امور حساس مانند پرس و جوی پایگاه داده یا منطق احراز هویت امن انجام می شود.

برای جزئیات جامع تر، به مستندات Next.js در مورد مسیرهای APIمراجعه کنید.

ایجاد مسیرهای API

در اینجا یک مثال از ایجاد یک مسیر API ساده آورده شده است

1. ایجاد مسیر API:
   یک فایل به نام hello.ts در دایرکتوری src/app/api/hello/route.ts ایجاد کنید:

   import { NextResponse } from 'next/server';
   
   
   const mockMethodThatSavesToDatabase = async (data) => {
       // شبیه سازی ذخیره سازی در پایگاه داده
       console.log('داده در پایگاه داده ذخیره شد:', data);
   };
   
   export async function POST(request: Request) {
       try {
           // داده ها را از یک API خارجی دریافت کنید
           const externalApiResponse = await fetch('https://jsonplaceholder.typicode.com/posts/1');
           const externalData = await externalApiResponse.json();
   
           // داده های دریافتی را در پایگاه داده ذخیره کنید
           await mockMethodThatSavesToDatabase(externalData);
   
           return NextResponse.json({ message: 'داده با موفقیت ذخیره شد', data: externalData });
       } catch (error) {
           return NextResponse.json({ error: 'ناتوان در ذخیره داده', details: error.message }, { status: 500 });
       }
   }

فراخوانی یک مسیر API از سمت مشتری

برای ساده سازی فراخوانی های API از سمت مشتری، قالب ما شامل یک ابزار ApiService زیر دایرکتوری services را شامل می شود. این ابزار: پیکربندی پذیرفتن پیکربندی درخواست Axios و به طور خودکار پاسخ ها و خطاها را مدیریت می کند، فقط داده های مربوط یا جزئیات خطا را برمی گرداند. اینجاست چگونه کار می کند:

1. ابتدا یک فایل سرویس جدید برای ویژگی یا ماژول خود ایجاد کنید. به عنوان مثال، اگر در مدیریت کاربران کار می کنید، یک فایل به نام UserManagementService.ts در دایرکتوری services ایجاد کنید.

2. در داخل فایل سرویس، یک تابع ناهمزمان برای مدیریت درخواست API تعریف کنید. این تابع باید از ApiService.fetchData استفاده کند، دو نوع جنریک را پذیرفته و تنظیمات Axios را پذیرفته: Response و Request، همراه با داده. اینجا یک مثال است:

   type MyApiResponse = {
       someResponseData: string
       someResponseData2: boolean
   }
   
   type MyApiRequest = {
       someRequestData: string
   }
   
   export async function myApi (data) {
       return ApiService.fetchData<MyApiResponse,MyApiRequest>({
           url: '/my-api-url',
           method: 'post',
           data
       })
   }
   ...

   یا انتقال نوع به صورت جنریک از سطح مصرف کننده:

   import ApiService from "./ApiService"
   
   export async function myApi<TResponse, TRequest>(data) {
       return ApiService.fetchData<TResponse, TRequest>({
           url: '/my-api-url',
           method: 'post',
           data
       })
   }
   ...

3. و اکنون می توانید این API را در کامپوننت خود متصل کنید

   
   type MyApiResponse = {
       someResponseData: string
       someResponseData2: boolean
   }
   
   type MyApiRequest = {
       someRequestData: string
   }
   
   import { myApi } from './MyService.ts'
   
   const MyComponent = props => {
   
       const fetchData = async () => {
           const reqeustParam = { key: 'value'}
           try {
               const resp = await myApi<MyApiResponse, MyApiRequest>(reqeustParam)
               if (resp.data) {
                   ...do something
               }
           } catch (errors) {
               ...handle errors
           }
       }
       
       // You can
       useEffect(() => {
           fetchData()
       }, [])
   
       return (
       ...
   )

   توجه: همچنین می توانید از کتابخانه های دریافت داده مانند SWR یا TanStack Query برای رویکرد اظهاری به دریافت داده استفاده کنید. انتخاب بستگی به نیازهای خاص شماست.

   با ApiService، مدیریت فراخوانی های API از سمت مشتری به یک استاندارد تبدیل می شود و آسان تر برای نگهداری می شود. با مسیرهای API Next.js ترکیب شده، می توانید منطق سمت سرور را به طور بی درز مدیریت کرده و با پشتیبانی خود ارتباط برقرار کنید.