Basit bir API yolculuğunun her bölümünü kapsayan bu eğitici ile uçtan uca gidin.
Web siteniz için ayrı bir arka uç oluşturmanız gereken günler geride kaldı. Next.js dosya tabanlı API yönlendirme ile bir Next.js projesinin içine API’nizi 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’sinin nasıl oluşturulacağını ve bir Next.js sayfasında bu API’den gelen verileri nasıl kullanacağınızı göreceksiniz.
Create-next-app Kullanarak Bir Next.js Projesi Oluşturun
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 adlı yeni bir Next.js klasörü oluşturmak için bu komutu bir terminalde çalıştırın. Bir sonraki oluştur uygulamasını yüklemeniz için bir istem alabilirsiniz.
npx create-next-app api-routes
Komut bittiğinde, API rotalarını oluşturmaya başlamak için api-routes klasörünü açın.
Next.js’de API Yönlendirme
API yolları sunucuda çalışır ve CORS ilke hatasını yükseltmeden kullanıcı verilerini bir veritabanına kaydetmek veya bir API’den veri almak gibi birçok kullanıma sahiptir .
Next.js’de /pages/api klasörü içinde API yolları oluşturmanız gerekir. Next.js, bu klasördeki dosyaların her biri için API uç noktaları oluşturur. /pages/api’ye user.js eklerseniz, Next.js http :// localhost : 3000 / api / user adresinde bir bitiş noktası oluşturur .
Temel bir Next.js API yolu aşağıdaki sözdizimine sahiptir.
export default function handler(req, res) {
res.status(200).json({ name: ‘John Doe’ })
}
İşleyici işlevinin çalışması için dışa aktarmalısınız.
API Rotaları Oluşturma
Yapılacaklar öğeleri için bir API yolu eklemek için /pages/api klasöründe todo.js adlı yeni bir dosya oluşturun .
Todo Veritabanını Alay Etmek
Yapılacakları almak için bir GET bitiş noktası oluşturmalısınız. Basitlik için. Bu öğretici, bir veritabanı yerine bir dizi yapılacaklar öğesi kullanır, ancak MongoDB veya MySQL gibi bir veritabanı kullanmaktan çekinmeyin.
Uygulamanızın kök klasöründeki todo.js’de yapılacaklar öğ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 yapılacaklar, sahte veriler için bir REST API olan DummyJSON web sitesinden alınmıştır . Bu DummyJSON todos uç noktasından kesin verileri 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ı işler. GET isteği için tüm yapılacakları döndürür ve bir POST isteği için yapılacaklar veritabanına bir yapılacaklar öğesi ekler. Diğer yöntemler için işleyici bir hata döndürür.
Ön Uçta API Rotalarını Kullanma
Yapılacaklar dizisi 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, getirme 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.
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>
);
}
Bu snippet’teki liste, alındıklarında yapılacaklar öğelerini görüntüler.
POST uç noktası için, API’ye POST isteği yapan saveTodo adlı yeni bir işlev oluşturun. Getirme isteği, yeni yapılacak öğeyi gövdede saklar ve yenisi de dahil olmak üzere tüm yapılacakları döndürür. saveTodo işlevi daha sonra bunları yapılacaklar durumunda saklar.
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);
};
Ardından, yeni yapılacaklar öğesini almak için metin giriş çubuğu olan bir form oluşturun. Bu formun gönderme işleyici işlevi, saveTodo işlevini çağırı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, bir kullanıcı formu her gönderdiğinde veritabanına yeni bir yapılacaklar ekler. Ayrıca, bu işlev API’den alınan verileri kullanarak yapılacaklar değerini günceller ve bu da yeni yapılacaklar öğesini listeye ekler.
API Yönlendirme, Next.js’nin Güçlü Yönlerinden Sadece Biridir
Next.js API yolunu nasıl oluşturduğunuzu ve kullandığınızı gördünüz. Artık Next.js proje klasörünüzden ayrılmadan tam bir yığın uygulaması oluşturabilirsiniz. API yönlendirme, Next.js’nin sağladığı birçok avantajdan biridir.
Next.js ayrıca kod bölme, geç yükleme ve yerleşik CSS desteği gibi performans optimizasyonları da sunar. Hızlı ve SEO dostu olması gereken bir web sitesi kuruyorsanız, Next.js’yi düşünmelisiniz.