با این آموزش که هر قسمت از سفر یک API ساده را پوشش می دهد، سرتاسر بروید.
روزهایی که مجبور بودید یک باطن جداگانه برای وب سایت خود ایجاد کنید، گذشته است. با مسیریابی API مبتنی بر فایل Next.js، می‌توانید با نوشتن API خود در داخل پروژه Next.js زندگی خود را آسان‌تر کنید.
Next.js یک متا فریمورک React با ویژگی هایی است که فرآیند ساخت برنامه های وب آماده تولید را ساده می کند. نحوه ایجاد یک REST API در Next.js و مصرف داده های آن API را در صفحه Next.js خواهید دید.
با استفاده از create-next-app یک پروژه Next.js ایجاد کنید
می توانید با استفاده از ابزار Create-Next-app CLI یک پروژه Next.js جدید ایجاد کنید. بسته‌ها و فایل‌های لازم را برای شروع ساختن برنامه Next.js نصب می‌کند.
این دستور را در ترمینال اجرا کنید تا یک پوشه Next.js جدید به نام api-routes ایجاد کنید. ممکن است درخواستی برای نصب Cre-next-app دریافت کنید.
npx create-next-app api-routes
پس از پایان فرمان، پوشه api-routes را باز کنید تا شروع به ایجاد مسیرهای API کنید.
مسیریابی API در Next.js
مسیرهای API روی سرور اجرا می‌شوند و کاربردهای زیادی مانند ذخیره داده‌های کاربر در پایگاه داده یا واکشی داده‌ها از یک API بدون افزایش خطای خط‌مشی CORS دارند.
در Next.js، باید مسیرهای API را در داخل پوشه /pages/api ایجاد کنید. Next.js برای هر یک از فایل‌های این پوشه، نقاط پایانی API تولید می‌کند. اگر user.js را به /pages/api اضافه کنید، Next.js یک نقطه پایانی در http://localhost:3000/api/user ایجاد می‌کند.
یک مسیر اصلی API Next.js دارای نحو زیر است.
exportdefaultfunctionhandler(req, res) {
res.status(200).json({ name: 'John Doe' })
}
شما باید تابع کنترلر را صادر کنید تا کار کند.
ایجاد مسیرهای API
یک فایل جدید به نام todo.js در پوشه /pages/api ایجاد کنید تا یک مسیر API برای موارد todo اضافه کنید.
تمسخر پایگاه داده Todo
برای دریافت todos، باید یک نقطه پایانی GET ایجاد کنید. برای سادگی. این آموزش از آرایه‌ای از آیتم‌های TODO به جای پایگاه داده استفاده می‌کند، اما می‌توانید از پایگاه‌داده‌ای مانند MongoDB یا MySQL استفاده کنید.
موارد todo را در todo.js در پوشه ریشه برنامه خود ایجاد کنید سپس داده های زیر را اضافه کنید.
exportconst todos = [
{
id: 1,
todo: "Do something nice for someone I care about",
completed: true,
userId: 26,
},
{
id: 2,
todo: "Memorize the fifty states and their capitals",
completed: false,
userId: 48,
},
// other todos
];
این موارد انجام کار از وب سایت DummyJSON، یک API REST برای داده های ساختگی هستند. می توانید داده های دقیق را از این نقطه پایانی DummyJSON todos پیدا کنید.
سپس مسیر API را در /pages/api/todos.js ایجاد کنید و تابع handler را اضافه کنید.
import { todos } from"../../todo";
exportfunctionhandler(req, res) {
const { method } = req;
switch (method) {
case"GET":
res.status(200).json(todos);
break;
case"POST":
const { todo, completed } = req.body;
todos.push({
id: todos.length + 1,
todo,
completed,
});
res.status(200).json(todos);
break;
default:
res.setHeader("Allow", ["GET", "POST"]);
res.status(405).end(`Method ${method} Not Allowed`);
break;
}
}
این مسیر نقاط پایانی GET و POST را مدیریت می کند. تمام کارها را برای درخواست GET برمی گرداند و یک مورد todo را برای درخواست POST به پایگاه داده todo اضافه می کند. برای روش های دیگر، کنترل کننده یک خطا را برمی گرداند.
مصرف مسیرهای API در Frontend
شما یک نقطه پایانی API ایجاد کرده‌اید که یک شی JSON حاوی آرایه‌ای از کارها را برمی‌گرداند.
برای مصرف API، تابعی به نام fetchTodos ایجاد کنید که داده ها را از نقطه پایانی API بازیابی می کند. این تابع از روش واکشی استفاده می کند، اما شما همچنین می توانید از Axios برای ایجاد درخواست های API استفاده کنید. سپس با کلیک روی یک دکمه، این تابع را فراخوانی کنید.
import Head from"next/head";
import { useState } from"react";
exportdefaultfunctionHome() {
const [todos, settodos] = useState([]);
const fetchTodos = async () => {
const response = await fetch("/api/todos");
const data = await response.json();
settodos(data);
};
return (
<divclassName={styles.container}>
<Head>
<title>Create Next App</title>
<metaname="description"content="Generated by create next app" />
<linkrel="icon"href="/favicon.ico" />
</Head>
<main>
<buttononClick={fetchTodos}>Get todos</button>
<ul>
{todos.map((todo) => {
return (
<li
style={{ color: `${todo.completed ? "green" : "red"}` }}
key={todo.id}
>
{todo.todo}:{todo.completed}.
</li>
);
})}
</ul>
</main>
</div>
);
}
لیست موجود در این قطعه، موارد انجام کار را هنگام واکشی نشان می دهد.
برای نقطه پایانی POST، یک تابع جدید به نام saveTodo ایجاد کنید که درخواست POST را به API ارسال می کند. درخواست واکشی مورد جدید todo را در بدنه ذخیره می‌کند و همه موارد انجام کار از جمله مورد جدید را برمی‌گرداند. سپس تابع saveTodo آنها را در وضعیت todos ذخیره می کند.
const saveTodo = async () => {
const response = await fetch("/api/todos", {
method: "POST",
body: JSON.stringify(newTodo),
headers: {
"Content-Type": "application/json",
},
});
const data = await response.json();
settodos(data);
};
سپس، یک فرم با نوار ورودی متن ایجاد کنید تا مورد جدید را دریافت کنید. تابع کنترل کننده ارسال این فرم تابع saveTodo را فراخوانی می کند.
import Head from"next/head";
import { useReducer, useState } from"react";
import styles from"../styles/Home.module.css";
exportdefaultfunctionHome() {
const [todos, settodos] = useState([]);
const [newTodo, setnewTodo] = useState({
todo: "",
completed: false,
});
const fetchTodos = async () => {
// fetchTodos
};
const saveTodo = async (e) => {
const response = await fetch("/api/todos", {
method: "POST",
body: JSON.stringify(newTodo),
headers: {
"Content-Type": "application/json",
},
});
const data = await response.json();
settodos(data);
};
const handleChange = (e) => {
setnewTodo({
todo: e.target.value,
});
};
const handleSubmit = (e) => {
e.preventDefault();
saveTodo();
setnewTodo({
todo: '',
});
};
return (
<divclassName={styles.container}>
<Head>
<title>Create Next App</title>
<metaname="description"content="Generated by create next app" />
<linkrel="icon"href="/favicon.ico" />
</Head>
<main>
// Fetches the todo items when clicked
<buttononClick={fetchTodos}>Get todos</button>
// Saves a new todo item when submitted
<formonSubmit={handleSubmit}>
<inputtype="text"onChange={handleChange}value={newTodo.todo} />
</form>
<ul>
{// list todo items}
</ul>
</main>
</div>
);
}
هر بار که کاربر فرم را ارسال می کند، کنترل کننده یک کار جدید به پایگاه داده اضافه می کند. همچنین، این تابع مقدار todos را با استفاده از داده های دریافت شده از API به روز می کند که به نوبه خود مورد جدید todo را به لیست اضافه می کند.
مسیریابی API تنها یکی از نقاط قوت Next.js است
شما نحوه ساخت و استفاده از مسیر API Next.js را مشاهده کرده اید. اکنون می توانید بدون خروج از پوشه پروژه Next.js یک برنامه کامل پشته ایجاد کنید. مسیریابی API یکی از مزایای بسیاری است که Next.js ارائه می کند.
Next.js همچنین بهینه سازی های عملکردی مانند تقسیم کد، بارگذاری تنبل و پشتیبانی داخلی CSS را ارائه می دهد. اگر در حال ساخت وب سایتی هستید که باید سریع و سئو دوستانه باشد، باید Next.js را در نظر بگیرید.