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 projesinin içine 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 nasıl REST API oluşturacağınızı ve o API'deki verileri Next.js sayfasında 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. Create-next-app'i yüklemeniz için bir istem alabilirsiniz.
npx yaratmak-Sonraki-app api yolları
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 rotaları sunucu üzerinde çalışır ve kullanıcı verilerini bir veritabanına kaydetme veya bir API'den veri getirme gibi birçok kullanıma sahiptir.
CORS politika hatası.Next.js'de, /pages/api klasörü içinde API yolları oluşturmalısınız. Next.js, bu klasördeki dosyaların her biri için API uç noktaları oluşturur. /pages/api'ye user.js eklerseniz, Next.js şu adreste bir bitiş noktası oluşturur: http://localhost: 3000/api/kullanıcı.
Temel bir Next.js API yolu aşağıdaki sözdizimine sahiptir.
ihracatvarsayılanişlevişleyici(talep, res) {
res.status (200).json({ ad: 'John Doe' })
}
İşleyici işlevini çalışması için dışa aktarmanız gerekir.
API Rotaları Oluşturma
içinde todo.js adlı yeni bir dosya oluşturun. /pages/api yapılacaklar için bir API yolu eklemek için klasör.
Yapılacaklar Veritabanını Alay Etmek
Yapılacak işleri almak için bir GET bitiş noktası oluşturmalısınız. Basitlik için. Bu öğretici, bir veritabanı yerine bir dizi yapılacak iş öğ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.
ihracatsabit yapılacaklar = [
{
kimlik: 1,
yapmak: "Değer verdiğim biri için güzel bir şey yap",
tamamlanmış: doğru,
kullanıcı kimliği: 26,
},
{
kimlik: 2,
yapmak: "Elli eyaleti ve başkentlerini ezberleyin",
tamamlanmış: YANLIŞ,
kullanıcı kimliği: 48,
},
// diğer yapılacak işler
];
Bu yapılacaklar öğeleri, DummyJSON web sitesinden alınmıştır. DİNLENME API'SI sahte veriler için. Kesin verilere buradan ulaşabilirsiniz. DummyJSON todos bitiş noktası.
Ardından, içinde API rotasını oluşturun. /pages/api/todos.js ve işleyici işlevini ekleyin.
içe aktarmak { yapılacaklar } itibaren "../../yapmak";ihracatişlevişleyici(talep, res) {
sabit { yöntem } = gerekli;
anahtar (yöntem) {
dava "ELDE ETMEK":
res.durum(200).json(todos);
kırmak;
dava "POSTALAMAK":
sabit { yapılacak, tamamlandı } = req.body;
todos.itmek({
İD: todos.uzunluk + 1,
yapmak,
tamamlanmış,
});
res.durum(200).json(todos);
kırmak;
varsayılan:
res.setHeader("İzin vermek", ["ELDE ETMEK", "POSTALAMAK"]);
res.status(405).son(Yöntem ${yöntem} İzin Verilmiyor`);
kırmak;
}
}
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
Bir yapılacaklar dizisi içeren bir JSON nesnesi döndüren bir API uç noktası oluşturdunuz.
API'yi tüketmek için API uç noktasından veri alan fetchTodos adında bir işlev oluşturun. İşlev, getirme yöntemini kullanır, ancak şunları da yapabilirsiniz: API istekleri yapmak için Axios'u kullanın. Ardından, bir düğmeyi tıklattığınızda bu işlevi çağırın.
içe aktarmak KAFA itibaren "sonraki/baş";
içe aktarmak { kullanımDevlet } itibaren "tepki";ihracatvarsayılanişlevEv() {
sabit [todos, settodos] = useState([]);sabit fetchTodos = zaman uyumsuz () => {
sabit cevap = beklemek gidip getirmek("/api/yapılacaklar");
sabit veri = beklemek yanıt.json();
settodos (veri);
};
geri dönmek (
<div className={styles.container}>
<KAFA>
<başlık>Sonraki Uygulamayı Oluştur</title>
<meta adı="Tanım" içerik="Create next app tarafından oluşturuldu" />
<bağlantı rel="simge" href="/favicon.ico" />
</Head>
<ana>
<button onClick={fetchTodos}>Todos alın</button>
<Ul>
{todos.map((yapılacak) => {
geri dönmek (
<li
style={{ color: `${todo.completed? "yeşil": "kırmızı"}` }}
anahtar={todo.id}
>
{todo.todo}:{todo.completed}.
</li>
);
})}
</ul>
</main>
</div>
);
}
Bu pasajdaki liste, getirildiklerinde 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 iş öğesini gövdede depolar ve yenisi dahil tüm yapılacak iş öğelerini döndürür. saveTodo işlevi daha sonra bunları todos durumunda saklar.
sabit saveTodo = zaman uyumsuz () => {
sabit cevap = beklemek gidip getirmek("/api/yapılacaklar", {
yöntem: "POSTALAMAK",
vücut: JSON.stringify (yeniYapılacak),
başlıklar: {
"İçerik türü": "uygulama/json",
},
});
sabit veri = beklemek yanıt.json();
settodos (veri);
};
Ardından, yeni yapılacak iş öğ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.
içe aktarmak KAFA itibaren "sonraki/baş";
içe aktarmak { useReducer, useState } itibaren "tepki";
içe aktarmak stiller itibaren "../styles/Home.module.css";ihracatvarsayılanişlevEv() {
sabit [todos, settodos] = useState([]);sabit [newTodo, setnewTodo] = useState({
yapmak: "",
tamamlanmış: YANLIŞ,
});sabit fetchTodos = zaman uyumsuz () => {
// Yapılacaklar'ı getir
};
sabit saveTodo = zaman uyumsuz (e) => {
sabit cevap = beklemek gidip getirmek("/api/yapılacaklar", {
yöntem: "POSTALAMAK",
vücut: JSON.stringify (yeniYapılacak),
başlıklar: {
"İçerik türü": "uygulama/json",
},
});sabit veri = beklemek yanıt.json();
settodos (veri);
};sabit handChange = (e) => {
setnewTodo({
yapmak: e.hedef.değer,
});
};sabit işlemeGönder = (e) => {
e.preventDefault();
saveTodo();
setnewTodo({
yapmak: '',
});
};geri dönmek (
<div className={styles.container}>
<KAFA>
<başlık>Sonraki Uygulamayı Oluştur</title>
<meta adı="Tanım" içerik="Create next app tarafından oluşturuldu" />
<bağlantı rel="simge" href="/favicon.ico" />
</Head>
<ana>
// Tıklandığında yapılacaklar öğelerini getirir
<button onClick={fetchTodos}>Todos alın</button>
// Gönderildiğinde yeni bir yapılacak iş öğesi kaydeder
<form onSubmit={handleSubmit}>
<giriş türü="metin" onChange={handleChange} değer={newTodo.todo} />
</form>
<Ul>
{// yapılacak öğeleri listele}
</ul>
</main>
</div>
);
}
İşleyici, bir kullanıcı formu her gönderdiğinde veritabanına yeni bir yapılacak iş ekler. Ayrıca bu işlev, API'den alınan verileri kullanarak yapılacaklar değerini günceller ve bu da listeye yeni yapılacaklar öğesini ekler.
API Yönlendirme, Next.js'nin Güçlü Yönlerinden Sadece Biridir
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 ayrılmadan tam bir yığın uygulama oluşturabilirsiniz. API yönlendirme, Next.js'nin sağladığı birçok avantajdan biridir.
Next.js ayrıca kod bölme, yavaş yükleme ve yerleşik CSS desteği gibi performans iyileştirmeleri sunar. Hızlı ve SEO dostu olması gereken bir web sitesi oluşturuyorsanız, Next.js'yi düşünmelisiniz.