Ինչպես կառուցել և սպառել API Next.js-ում

Անցեք վերջից մինչև վերջ այս ձեռնարկով, որն ընդգրկում է API-ի պարզ ճանապարհորդության յուրաքանչյուր մասը:

Անցել են այն ժամանակները, երբ դուք պետք է ստեղծեիք ձեր վեբ կայքի համար առանձին հետին պլան: Next.js ֆայլի վրա հիմնված API երթուղղման միջոցով դուք կարող եք հեշտացնել ձեր կյանքը՝ գրելով ձեր API-ն Next.js նախագծի ներսում:

Next.js-ը React մետա-շրջանակ է, որն ունի առանձնահատկություններ, որոնք հեշտացնում են արտադրության համար պատրաստ վեբ հավելվածների ստեղծման գործընթացը: Դուք կտեսնեք, թե ինչպես կարելի է կառուցել REST API Next.js-ում և սպառել այդ API-ի տվյալները Next.js էջում:

Ստեղծեք Next.js նախագիծ՝ օգտագործելով create-next-app-ը

Դուք կարող եք ստեղծել նոր Next.js նախագիծ՝ օգտագործելով create-next-app CLI գործիքը: Այն տեղադրում է անհրաժեշտ փաթեթներն ու ֆայլերը, որպեսզի սկսեք ստեղծել Next.js հավելված:

Գործարկեք այս հրամանը տերմինալում՝ նոր Next.js թղթապանակ ստեղծելու համար, որը կոչվում է api-routes: Դուք կարող եք հաղորդագրություն ստանալ՝ տեղադրել ստեղծելու հաջորդ հավելվածը:

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 հասցեում:

Next.js API-ի հիմնական երթուղին ունի հետևյալ շարահյուսությունը.

export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' })
}

Դուք պետք է արտահանեք կարգավորիչի գործառույթը, որպեսզի այն աշխատի:

API երթուղիների ստեղծում

Ստեղծեք նոր ֆայլ, որը կոչվում է todo.js /pages/api պանակում՝ todo տարրերի համար API երթուղի ավելացնելու համար:

Ծաղրել Todo տվյալների բազան

Todos-ը ստանալու համար դուք պետք է ստեղծեք GET վերջնակետ: Պարզության համար: Այս ձեռնարկը տվյալների բազայի փոխարեն օգտագործում է todo տարրերի զանգված, բայց ազատ զգացեք օգտագործել տվյալների բազա, ինչպիսին է MongoDB կամ MySQL:

Ստեղծեք todo տարրերը todo.js-ում ձեր հավելվածի արմատային պանակում, այնուհետև ավելացրեք հետևյալ տվյալները:

export const 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
];

Այս todo տարրերը DummyJSON կայքից են, REST API կեղծ տվյալների համար: Դուք կարող եք գտնել ճշգրիտ տվյալներ այս DummyJSON todos վերջնակետից:

Հաջորդը, ստեղծեք API-ի երթուղին /pages/api/todos.js-ում և ավելացրեք կարգավորիչի գործառույթը:

import { todos } from "../../todo";
 
export function handler(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 խնդրանքի բոլոր գործերը և POST հարցման համար todo տարր է ավելացնում todo տվյալների բազայում: Այլ մեթոդների դեպքում մշակողը վերադարձնում է սխալ:

Սպառելով API երթուղիները Frontend-ում

Դուք ստեղծել եք API վերջնակետ, որը վերադարձնում է JSON օբյեկտ, որը պարունակում է todos զանգված:

API-ն սպառելու համար ստեղծեք ֆունկցիա, որը կոչվում է fetchTodos, որը տվյալներ է առբերում API-ի վերջնակետից: Ֆունկցիան օգտագործում է առբերման մեթոդը, բայց դուք կարող եք նաև օգտագործել Axios-ը՝ API հարցումներ կատարելու համար: Այնուհետև զանգահարեք այս գործառույթը, երբ սեղմում եք որևէ կոճակ:

import Head from "next/head";
import { useState } from "react"; 
 
export default function Home() {
  const [todos, settodos] = useState([]);
 
  const fetchTodos = async () => {
    const response = await fetch("/api/todos");
    const data = await response.json();
    settodos(data);
  };
 
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <button onClick={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-ին: Fetch հարցումը պահում է նոր todo տարրը մարմնի մեջ և վերադարձնում է բոլոր 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);
};

Այնուհետև ստեղծեք ձև տեքստի մուտքագրման տողով, որպեսզի ստանաք նոր տարրը: Այս ձևի submit handler ֆունկցիան կանվանի saveTodo ֆունկցիան:

import Head from "next/head";
import { useReducer, useState } from "react";
import styles from "../styles/Home.module.css";
 
export default function Home() {
  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 (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
 // Fetches the todo items when clicked
        <button onClick={fetchTodos}>Get todos</button>
 
 // Saves a new todo item when submitted
        <form onSubmit={handleSubmit}>
          <input type="text" onChange={handleChange} value={newTodo.todo} />
        </form>
        <ul>
          {// list todo items}
        </ul>
      </main>
    </div>
  );
}

Բեռնարկղը յուրաքանչյուր անգամ, երբ օգտատերը ձևը ներկայացնում է տվյալների բազայում, ավելացնում է նոր գործ: Բացի այդ, այս ֆունկցիան թարմացնում է todos արժեքը՝ օգտագործելով API-ից ստացված տվյալները, որն իր հերթին ավելացնում է նոր todo տարրը ցանկում:

API-ի ուղղորդումը Next.js-ի ուժեղ կողմերից մեկն է

Դուք տեսել եք, թե ինչպես եք կառուցում և օգտագործում Next.js API երթուղին: Այժմ դուք կարող եք ստեղծել ամբողջական փաթեթ հավելված՝ առանց ձեր Next.js նախագծի թղթապանակից դուրս գալու: API-ի երթուղավորումը Next.js-ի տրամադրած բազմաթիվ առավելություններից մեկն է:

Next.js-ն առաջարկում է նաև կատարողականի օպտիմալացումներ, ինչպիսիք են կոդի բաժանումը, ծույլ բեռնումը և ներկառուցված CSS աջակցությունը: Եթե դուք կառուցում եք կայք, որը պետք է լինի արագ և բարենպաստ SEO-ի համար, պետք է հաշվի առնել Next.js-ը: