Fedezze fel a Mongoose erejét, és azt, hogyan használhatja adatkezelésre egy egyszerű webalkalmazáshoz.
A Next.js egy sokoldalú, teljes veremű JavaScript-keretrendszer, amely a Reactre épül, és támogatja annak főbb funkcióit, például a JSX-et, az összetevőket és a hook-okat. A Next.js néhány alapvető funkciója közé tartozik a fájlalapú útválasztás, a CSS JS-ben és a szerveroldali megjelenítés.
A Next.js egyik jelentős képessége, hogy zökkenőmentesen integrálható különféle háttértechnológiákkal, például a Mongoose-al, lehetővé téve az adatok egyszerű és hatékony kezelését.
A Mongoose segítségével egyszerűen definiálhat egy hatékony REST API-t a Next.js alkalmazásból az adatok tárolására és lekérésére a MongoDB adatbázisból.
Next.js: Full-stack JavaScript-keretrendszer
A React-tal ellentétben a Next.js teljes veremű webes keretrendszernek számít, mivel teljes megoldást kínál a szerveroldali renderelt webalkalmazások létrehozására.
Ennek az az oka, hogy olyan funkciókat kínál, amelyek lehetővé teszik, hogy egy alkalmazás elő- és hátoldalán is dolgozzon egyetlen projektkönyvtárból. Nem feltétlenül kell külön háttérprojekt mappát beállítania a kiszolgálóoldali funkciók megvalósításához, különösen a kisméretű alkalmazásokhoz.
Mindazonáltal, bár a Next.js kezel bizonyos háttérfunkciókat, nagyméretű, teljes veremű alkalmazások létrehozásához érdemes kombinálni egy dedikált háttérrendszerrel, például az Expresszel.
Néhány alapvető funkció, amely a Next.js teljes stack képességét biztosítja:
- Szerveroldali megjelenítés: A Next.js beépített támogatást nyújt a szerveroldali megjelenítési képességekhez. Lényegében ez azt jelenti, hogy amint egy kliens HTTP kéréseket küld a szervernek, a szerver feldolgozza a kéréseket, és válaszol a szükséges HTML-tartalommal minden egyes oldalhoz, amelyet a böngészőben kell megjeleníteni.
- Útválasztás: A Next.js oldalalapú útválasztó rendszert használ a különböző útvonalak meghatározására és kezelésére, a felhasználói bevitelek kezelésére és dinamikus oldalak létrehozására anélkül, hogy harmadik féltől származó könyvtárakra kellene hagyatkoznia. Ezenkívül könnyen bővíthető, mivel az új útvonalak hozzáadása olyan egyszerű, mint egy új oldal, például az about.js hozzáadása az oldalak könyvtárához.
- API-végpontok: A Next.js beépített támogatást biztosít a kiszolgálóoldali képességekhez, amelyek a HTTP-kéréseket és az adatok visszaküldését kezelő API-végpontok létrehozására szolgálnak. Ez megkönnyíti a háttérfunkciók felépítését anélkül, hogy külön kiszolgálót kellene létrehozni egy dedikált háttér-keretrendszer, például az Express használatával. Fontos azonban megjegyezni, hogy a Next.js elsősorban egy front-end webes keretrendszer.
MongoDB adatbázis beállítása
A kezdéshez állítson be egy MongoDB adatbázist. Alternatív megoldásként gyorsan felállíthat egy MongoDB adatbázist ingyenes MongoDB-fürt konfigurálása a felhőben. Az adatbázis létrehozása és futtatása után másolja ki az adatbázis-kapcsolat URI-karakterláncát.
A projekt kódját itt találja meg GitHub adattár.
Állítson be egy Next.js projektet
Hozzon létre egy könyvtárat egy új projekthez, és CD bele:
mkdir nextjs-projekt
cd nextjs-projektEzután telepítse a Next.js-t:
npx create-next-app nextjs-mongodbA telepítési folyamat befejezése után telepítse a Mongoose-t függőségként.
npm install mongooseVégül a projekt gyökérkönyvtárában hozzon létre egy új .env fájlt az adatbázis kapcsolati karakterláncának tárolására.
NEXT_PUBLIC_MONGO_URI = "adatbázis URI kapcsolati karakterlánc"Állítsa be az adatbázis-kapcsolatot
Ban,-ben src könyvtárba, hozzon létre egy új mappát, és nevezze el utils. Ebben a mappában hozzon létre egy új fájlt dbConfig.js és add hozzá a következő kódot:
import indiai menyét tól től'indiai menyét';const connectMongo = async () => mongoose.connect (process.env. NEXT_PUBLIC_MONGO_URI);
exportalapértelmezett connectMongo;
Határozza meg az adatmodelleket
Az adatmodellek meghatározzák a tárolandó adatok szerkezetét, beleértve az adattípusokat és az adatok közötti kapcsolatokat.
A MongoDB JSON-szerű dokumentumokban tárolja az adatokat, mivel a NoSQL adatbázis. A Mongoose lehetőséget biztosít annak meghatározására, hogy a Next.js kliensekből származó adatokat hogyan kell tárolni és elérni az adatbázisból.
Az src könyvtárban hozzon létre egy új mappát és nevet a modellekben. Ebben a mappában hozzon létre egy új fájlt userModel.js, és add hozzá az alábbi kódot:
import { Séma, modell, modellek } tól től'indiai menyét';const userSchema = új Séma({
név: Húr,
email: {
típus: Húr,
kívánt: igaz,
egyedi: igaz,
},
});const Felhasználó = modellek. Felhasználó || modell("Felhasználó", userSchema);
exportalapértelmezett Felhasználó;
Hozza létre az API-végpontokat
Más front-end keretrendszerekkel ellentétben a Next.js beépített támogatást nyújt az API-kezeléshez. Ez leegyszerűsíti az API-k létrehozásának folyamatát, mivel közvetlenül a Next.js projektben határozhatja meg őket, ahelyett, hogy külön szervert állítana be.
Miután meghatározta az API-útvonalakat a pages/api könyvtárban, a Next.js API-végpontokat generál a könyvtárban található minden egyes fájlhoz. Például, ha létrehozza a userV1/user.js fájlt, a Next.js létrehoz egy végpontot, amely a következő címen érhető el http://localhost: 3000/api/felhasználóV1/felhasználó.
Benne oldalak/api, hozzon létre egy új mappát, és nevezze el userV1-nek. Ebben a mappában hozzon létre egy új fájlt user.js, és add hozzá az alábbi kódot:
import csatlakoztassa Mongo tól től'../../../utils/dbConfig';
import Felhasználó tól től"../../../models/userModel";/**
* @param {import('következő').NextApiRequest} req
* @param {import('következő').NextApiResponse} res
*/
exportalapértelmezettasyncfunkcióuserAPI(req, res) {
próbáld ki {
konzol.log(„CSATLAKOZÁS A MONGOHOZ”);
várja connectMongo();
konzol.log(„KAPCSOLVA A MONGOHOZ”);
ha (req.method 'POST') {
konzol.log('DOKUMENTUM LÉTREHOZÁSA');
const CreatedUser = várja User.create (req.body);
konzol.log('DOKUMENTUM LÉTREHOZOTT');
res.json({ CreatedUser });
} másha (req.method 'KAP') {
konzol.log("DOKUMENTUMOK BESZERZÉSE");
const fetchedUsers = várja User.find({});
konzol.log('ELKÉRT DOKUMENTUMOK');
res.json({ fetchedUsers });
} más {
dobásújHiba(`Nem támogatott HTTP-módszer: ${req.method}`);
}
} fogás (hiba) {
konzol.log (hiba);
res.json({ hiba });
}
}
Ez a kód egy API-végpontot valósít meg a felhasználói adatok MongoDB-adatbázisból való tárolására és lekérésére. Meghatározza a userAPI függvény, amely két paramétert vesz fel: req és res. Ezek a bejövő HTTP kérést és a kimenő HTTP választ jelentik.
A függvényen belül a kód csatlakozik a MongoDB adatbázishoz, és ellenőrzi a bejövő kérés HTTP metódusát.
Ha a metódus egy POST kérés, akkor a kód egy új felhasználói dokumentumot hoz létre az adatbázisban a segítségével teremt módszer. Ezzel szemben, ha ez a KAP kérésre, a kód lekéri az összes felhasználói dokumentumot az adatbázisból.
Az API-végpontok fogyasztása
Adja hozzá az alábbi kódot a pages/index.js fájl:
- Készítsen POST-kérést az API-végponthoz, hogy adatokat tároljon az adatbázisban.
import stílusok tól től"@/styles/Home.module.css";
import { useState } tól től'reagál';exportalapértelmezettfunkcióitthon() {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [usersResults, setUsersResults] = useState([]);const createUser = async () => {
próbáld ki {
const CreatedUser = várja fetch("/api/userV1/user", {
módszer: 'POST',
fejlécek: {
'Tartalom típus': "applikáció/json",
},
test: JSON.stringify({
név,
email,
}),
}).akkor((res) => res.json());
konzol.log('DOKUMENTUM LÉTREHOZOTT');setName('');
setEmail('');konzol.log (createdUser);
} fogás (hiba) {
konzol.log (hiba);
}
}; - Határozzon meg egy függvényt a felhasználói adatok lekéréséhez a GET végponthoz intézett HTTP-kérésekkel.
const displayUsers = async () => {
próbáld ki {
konzol.log("DOKUMENTUMOK BESZERZÉSE");
const fetchedUsers = várja fetch("/api/userV1/user").akkor((res) =>
res.json()
);
konzol.log('ELKÉRT DOKUMENTUMOK');
setUsersResults (fetchedUsers);
konzol.log (usersResults)
} fogás (hiba) {
konzol.log (hiba);
}
}; - Végül jelenítsen meg egy űrlapelemet szövegbeviteli mezőkkel, és küldje el és jelenítse meg a felhasználói adatok gombjait.
Visszatérés (
<>
Végül lépjen tovább, és pörgesse fel a fejlesztői kiszolgálót a módosítások frissítéséhez és a navigáláshoz http://localhost: 3000 a böngészőjében.
npm futás devA Next.js használata az Alkalmazásokban
A Next.js fantasztikus lehetőség nagyszerű webalkalmazások készítéséhez, akár mellékprojekten, akár nagyszabású webes megoldáson dolgozik. Számos szolgáltatást és képességet kínál, amelyek leegyszerűsítik a hatékony és méretezhető termékek létrehozásának folyamatát.
Bár ez elsősorban egy robusztus kliensoldali keretrendszer, kiszolgálóoldali képességeit is kihasználhatja egy háttérszolgáltatás gyors felpörgetésére.
