Altın Konu Next.js'de API Oluşturma Ve Kullanma

[ByMoDuS]

HERAKLES Otomatik Avlı kalıcı sunucu. 19 Haziran'da açılıyor. Atius & Wizard güvencesiyle hemen kayıt ol, ön kayıt ödülleri aktif. HEMEN TIKLA!

Next.js'de API Oluşturma Ve Kullanma​

Web siteniz için ayrı bir arka uç oluşturmanız gereken günler geride kaldı. Next.js dosya tabanlı API yönlendirmesi ile API'nizi bir Next.js projesi içinde yazarak hayatınızı kolaylaştırabilirsiniz. Next.js, üretime hazır web uygulamaları oluşturma sürecini basitleştiren özelliklere sahip bir React meta-çerçevesidir. Next.js'de bir REST API'nin nasıl oluşturulacağını ve bu API'den gelen verilerin bir Next.js sayfasında nasıl tüketileceğini göreceksiniz.

create-next-app CLI aracını kullanarak yeni bir Next.js projesi oluşturabilirsiniz. Bir Next.js uygulaması oluşturmaya başlamanız için gerekli paketleri ve dosyaları yükler. api-routes adında yeni bir Next.js klasörü oluşturmak için bu komutu bir terminalde çalıştırın. create-next-app uygulamasını yüklemek için bir istem alabilirsiniz.​

npx create-next-app api-routes

Komut tamamlandığında, API rotalarını oluşturmaya başlamak için api-routes klasörünü açın.​

API rotaları sunucuda çalışır ve kullanıcı verilerini bir veritabanına kaydetmek veya CORS politikası hatasını yükseltmeden bir API'den veri almak gibi birçok kullanıma sahiptir. Next.js'de /pages/api klasörü içinde API rotaları oluşturmalısınız. Next.js, bu klasördeki dosyaların her biri için API uç noktaları oluşturur. user.js dosyasını /pages/api klasörüne eklerseniz, Next.js

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

adresinde bir uç nokta oluşturacaktır.
​

Temel bir Next.js API rotası aşağıdaki sözdizimine sahiptir.
​

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

Çalışması için işleyici işlevini dışa aktarmanız gerekir.​

TODO'ları almak için bir GET uç noktası oluşturmalısınız. Basitlik için. Bu öğretici, bir veritabanı yerine bir dizi todo öğesi kullanır, ancak MongoDB veya MySQL gibi bir veritabanı kullanmaktan çekinmeyin. Uygulamanızın kök klasöründeki todo.js dosyasında todo öğelerini oluşturun ve ardından aşağıdaki verileri ekleyin.
​

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

Bu todo öğeleri, sahte veriler için bir REST API olan DummyJSON web sitesinden alınmıştır. Tam verileri bu DummyJSON todos uç noktasından bulabilirsiniz.​

Ardından, /pages/api/todos.js içinde API rotasını oluşturun ve işleyici işlevini ekleyin.​

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;
  }
}

Bu rota GET ve POST uç noktalarını yönetir. GET isteği için tüm todo'ları döndürür ve POST isteği için todo veritabanına bir todo öğesi ekler. Diğer yöntemler için işleyici bir hata döndürür. Bir dizi todos içeren bir JSON nesnesi döndüren bir API uç noktası oluşturdunuz. API'yi kullanmak için, API uç noktasından veri alan fetchTodos adlı bir işlev oluşturun. İşlev fetch yöntemini kullanır ancak API istekleri yapmak için Axios'u da kullanabilirsiniz. Ardından bir düğmeye tıkladığınızda bu işlevi çağırın.
​

Ardından, yeni yapılacaklar öğesini almak için metin giriş çubuğuna sahip bir form oluşturun.

Bu formun submit handler fonksiyonu saveTodo fonksiyonunu çağıracaktır.​

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>
  );
}

İşleyici, kullanıcı formu her gönderdiğinde veritabanına yeni bir todo ekler. Ayrıca, bu işlev API'den alınan verileri kullanarak todo değerini günceller ve bu da yeni todo öğesini listeye ekler. Bir Next.js API rotasını nasıl oluşturduğunuzu ve kullandığınızı gördünüz. Artık Next.js proje klasörünüzden çıkmadan tam yığın bir uygulama oluşturabilirsiniz. API yönlendirme Next.js'in sağladığı birçok avantajdan biridir. Next.js ayrıca kod bölme, tembel yükleme ve yerleşik CSS desteği gibi performans optimizasyonları sunar. Hızlı ve SEO dostu olması gereken bir web sitesi oluşturuyorsanız, Next.js'yi düşünmelisiniz.
​

 

[EJDER]

Paylaşım için teşekkürler.

 

[NaimSazak]

Paylaşım için Teşekkürler

 

[Replicant]

Paylaşım için teşekkürler.

 

[ByMoDuS]

Değerli yorumlarınız için teşekkür ediyorum.