Mongoose'un gücünü ve onu basit bir web uygulaması için verileri yönetmek üzere nasıl kullanabileceğinizi keşfedin.

Next.js, JSX, bileşenler ve kancalar gibi ana özelliklerini destekleyen, React'in üzerine inşa edilmiş çok yönlü bir tam yığın JavaScript çerçevesidir. Next.js'nin temel özelliklerinden bazıları dosya tabanlı yönlendirme, JS'de CSS ve sunucu tarafı oluşturmayı içerir.

Next.js'nin önemli bir özelliği, Mongoose gibi çeşitli arka uç teknolojileriyle sorunsuz bir şekilde entegre olabilme yeteneğidir ve verileri verimli bir şekilde kolayca yönetmenize olanak tanır.

Mongoose ile, bir MongoDB veritabanından veri depolamak ve almak için bir Next.js uygulamasından kolayca performanslı bir REST API tanımlayabilirsiniz.

Next.js: Tam Yığın JavaScript Çerçevesi

React'ten farklı olarak Next.js, sunucu tarafında oluşturulmuş web uygulamaları oluşturmak için eksiksiz bir çözüm sağladığı için tam yığın bir web çerçevesi olarak kabul edilir.

Bunun nedeni, bir uygulamanın hem ön hem de arka ucunda tek bir proje dizininden çalışmayı mümkün kılan özellikler sunmasıdır. Özellikle küçük ölçekli uygulamalar için sunucu tarafı işlevselliğini uygulamak için ayrı bir arka uç proje klasörü oluşturmanız gerekmez.

instagram viewer

Bununla birlikte, Next.js büyük ölçekli, tam yığın uygulamalar oluşturmak için bazı arka uç işlevlerini ele alsa da, onu Express gibi özel bir arka uç çerçevesiyle birleştirmek isteyebilirsiniz.

Next.js'ye tam yığın yetenekleri sağlayan temel özelliklerden bazıları şunlardır:

  • Sunucu tarafı işleme: Next.js, sunucu tarafı işleme yetenekleri için yerleşik destek sağlar. Temel olarak, bir istemci bir sunucuya HTTP istekleri gönderdiğinde, sunucu istekleri işler ve tarayıcıda işlenecek her sayfa için gerekli HTML içeriğiyle yanıt verir.
  • Yönlendirme: Next.js, farklı rotaları tanımlamak ve yönetmek, kullanıcı girişlerini işlemek ve üçüncü taraf kitaplıklara güvenmek zorunda kalmadan dinamik sayfalar oluşturmak için sayfa tabanlı bir yönlendirme sistemi kullanır. Ek olarak, yeni rotalar eklemek, sayfaların dizinine about.js gibi yeni bir sayfa eklemek kadar basit olduğundan ölçeği büyütmek kolaydır.
  • API uç noktaları: Next.js, HTTP isteklerini yöneten ve verileri döndüren API uç noktaları oluşturmak için kullanılan sunucu tarafı yetenekleri için yerleşik destek sağlar. Bu, Express gibi özel bir arka uç çerçevesi kullanarak ayrı bir sunucu kurmak zorunda kalmadan arka uç işlevselliği oluşturmayı kolaylaştırır. Ancak, Next.js'nin öncelikle bir ön uç web çerçevesi olduğunu unutmamak önemlidir.

Bir MongoDB Veritabanı Kurun

Başlamak, bir MongoDB veritabanı kurun. Alternatif olarak, bir MongoDB veritabanını hızlı bir şekilde döndürebilirsiniz. bulutta bir MongoDB kümesini ücretsiz olarak yapılandırma. Veritabanınızı kurup çalıştırdıktan sonra, veritabanı bağlantı URI dizesini kopyalayın.

Bu projenin kodunu burada bulabilirsiniz. GitHub deposu.

Bir Next.js Projesi Kurun

Yeni bir proje için bir dizin oluşturun ve CD bunun içine:

mkdir nextjs projesi
cd nextjs projesi

Ardından Next.js'yi yükleyin:

npx oluştur-sonraki-uygulama nextjs-mongodb

Kurulum işlemi tamamlandıktan sonra, Mongoose'u bir bağımlılık olarak kurun.

npm mongoose'u kur

Son olarak, projenizin kök dizininde, veritabanı bağlantı dizinizi tutmak için yeni bir .env dosyası oluşturun.

NEXT_PUBLIC_MONGO_URI = "veritabanı URI bağlantı dizesi"

Veritabanı Bağlantısını Yapılandırma

İçinde kaynak dizini, yeni bir klasör oluşturun ve adlandırın araçlar. Bu klasörün içinde, adlı yeni bir dosya oluşturun. dbConfig.js ve ona aşağıdaki kodu ekleyin:

içe aktarmak firavun faresi itibaren'firavun faresi';
sabit bağlantı Mongo = zaman uyumsuz () => firavun faresi.connect (işlem.env. NEXT_PUBLIC_MONGO_URI);
ihracatvarsayılan mongo'yu bağlayın;

Veri Modellerini Tanımlayın

Veri modelleri, veri türleri ve veriler arasındaki ilişkiler de dahil olmak üzere depolanacak verilerin yapısını tanımlar.

MongoDB, verileri JSON benzeri belgelerde saklar, çünkü NoSQL veritabanı. Mongoose, Next.js istemcilerinden gelen verilerin veritabanından nasıl saklanması ve erişilmesi gerektiğini tanımlamanın bir yolunu sunar.

src dizininde, modellerde yeni bir klasör ve ad oluşturun. Bu klasörün içinde, adlı yeni bir dosya oluşturun. kullanıcıModel.js, ve aşağıdaki kodu ekleyin:

içe aktarmak { Şema, model, modeller } itibaren'firavun faresi';
sabit kullanıcı Şeması = yeni Şema({
 isim: Sicim,
 e-posta: {
 tip: Sicim,
 gerekli: doğru,
 eşsiz: doğru,
 },
});


sabit Kullanıcı = modeller. kullanıcı || model("Kullanıcı", kullanıcı Şeması);
ihracatvarsayılan Kullanıcı;

API Uç Noktalarını Oluşturun

Diğer ön uç çerçevelerden farklı olarak Next.js, API yönetimi için yerleşik destek sağlar. Bu, API'leri ayrı bir sunucu kurmak yerine doğrudan Next.js projesinde tanımlayabileceğiniz için oluşturma sürecini basitleştirir.

Pages/api dizini içinde API rotalarını tanımladıktan sonra, Next.js bu dizindeki dosyaların her biri için API uç noktaları oluşturur. Örneğin, userV1/user.js oluşturursanız, Next.js şu adresten erişilebilen bir uç nokta oluşturur: http://localhost: 3000/api/kullanıcıV1/kullanıcı.

İçinde sayfalar/api, yeni bir klasör oluşturun ve userV1 olarak adlandırın. Bu klasörün içinde, adlı yeni bir dosya oluşturun. kullanıcı.js, ve aşağıdaki kodu ekleyin:

içe aktarmak mongo'ya bağlan itibaren'../../../utils/dbConfig';
içe aktarmak kullanıcı itibaren'../../../modeller/kullanıcıModel';
/**
 * @para {içe aktarmak('Sonraki').NextApiRequest} isteği
 * @para {içe aktarmak('Sonraki').NextApiResponse} res
 */
ihracatvarsayılanzaman uyumsuzişlevkullanıcıAPI(talep, res) {
denemek {
konsol.kayıt('MONGO'YA BAĞLANMAK');
beklemek connectMongo();
konsol.kayıt('MONGO'YA BAĞLI');
eğer (gerekli yöntem 'POSTALAMAK') {
konsol.kayıt('BELGE OLUŞTURMA');
sabit oluşturulanKullanıcı = beklemek User.create (gerekli gövde);
konsol.kayıt('OLUŞTURULAN BELGE');
 res.json({oluşturulanKullanıcı});
 } başkaeğer (gerekli yöntem 'ELDE ETMEK') {
konsol.kayıt('BELGELERİ GETİRMEK');
sabit getirilenKullanıcılar = beklemek Kullanıcı.bul({});
konsol.kayıt('GETİRİLMİŞ BELGELER');
 res.json({fetchedUsers });
 } başka {
fırlatmakyeniHata(`Desteklenmeyen HTTP yöntemi: ${gerek.yöntem}`);
 }
 } yakalamak (hata) {
konsol.log (hata);
 res.json({ hata });
 }
}

Bu kod, bir MongoDB veritabanından kullanıcı verilerini depolamak ve almak için bir API uç noktası uygular. Bir tanımlar kullanıcıAPI iki parametre alan fonksiyon: istek Ve res. Bunlar sırasıyla gelen HTTP isteğini ve giden HTTP yanıtını temsil eder.

İşlevin içinde kod, MongoDB veritabanına bağlanır ve gelen isteğin HTTP yöntemini kontrol eder.

Yöntem bir POST isteğiyse, kod veritabanında yeni bir kullanıcı belgesi oluşturur. yaratmak yöntem. Tersine, eğer bir ELDE ETMEK istek, kod veritabanından tüm kullanıcı belgelerini getirir.

API Uç Noktalarını Kullanma

Aşağıdaki kodu şuraya ekleyin: sayfalar/index.js dosya:

  • Verileri veritabanında depolamak için API uç noktasına bir POST isteği yapın.
    içe aktarmak stiller itibaren'@/styles/Home.module.css';
    içe aktarmak { kullanımDevlet } itibaren'tepki';
    ihracatvarsayılanişlevEv() {
    sabit [isim, setName] = useState('');
    sabit [email, setEmail] = useState('');
    sabit [usersResults, setUsersResults] = useState([]);
    

    sabit kullanıcı oluştur = zaman uyumsuz () => {
    denemek {
    sabit oluşturulanKullanıcı = beklemek gidip getirmek('/api/userV1/user', {
     yöntem: 'POSTALAMAK',
     başlıklar: {
    'İçerik türü': "uygulama/json",
     },
     vücut: JSON.stringify({
     isim,
     e-posta,
     }),
     }).Daha sonra((res) => res.json());
    konsol.kayıt('OLUŞTURULAN BELGE');
    

     setName('');
     e-posta ayarla('');
    konsol.log (oluşturulan Kullanıcı);
     } yakalamak (hata) {
    konsol.log (hata);
     }
     };
  • GET uç noktasına HTTP istekleri yaparak kullanıcı verilerini getirecek bir işlev tanımlayın.
    sabit displayUsers = zaman uyumsuz () => {
    denemek {
    konsol.kayıt('BELGELERİ GETİRMEK');
    sabit getirilenKullanıcılar = beklemek gidip getirmek('/api/userV1/user').Daha sonra((res) =>
     res.json()
     );
    konsol.kayıt('GETİRİLMİŞ BELGELER');

     setUsersResults (fetchedUsers);
    konsol.log (usersResults)

     } yakalamak (hata) {
    konsol.log (hata);
     }
     };
  • Son olarak, metin giriş alanlarına sahip bir form öğesi oluşturun ve kullanıcı verisi düğmelerini gönderin ve görüntüleyin.
    geri dönmek (
     <>

Son olarak, değişiklikleri güncellemek ve şuraya gitmek için geliştirme sunucusunu çalıştırın: http://localhost: 3000 tarayıcınızda.

npm geliştiriciyi çalıştır

Next.js'yi Uygulamalarda Kullanma

İster bir yan projede ister büyük ölçekli bir web çözümü üzerinde çalışıyor olun, Next.js harika web uygulamaları oluşturmak için harika bir seçenektir. Performanslı ve ölçeklenebilir ürünler oluşturma sürecini kolaylaştıran bir dizi özellik ve yetenek sunar.

Öncelikle sağlam bir istemci tarafı çerçevesi olmasına rağmen, bir arka uç hizmetini hızlı bir şekilde başlatmak için sunucu tarafı yeteneklerini de kullanabilirsiniz.