Objevte sílu Mongoose a jak ji můžete využít ke správě dat pro jednoduchou webovou aplikaci.

Next.js je všestranný full-stack JavaScript framework, který je postaven na Reactu a podporuje jeho hlavní funkce jako JSX, komponenty a háčky. Některé ze základních funkcí Next.js zahrnují směrování založené na souborech, CSS v JS a vykreslování na straně serveru.

Jednou z významných schopností Next.js je jeho schopnost bezproblémové integrace s různými backendovými technologiemi, jako je Mongoose, což vám umožňuje snadno a efektivně spravovat data.

S Mongoose můžete snadno definovat výkonné REST API z aplikace Next.js pro ukládání a načítání dat z databáze MongoDB.

Next.js: Full-Stack JavaScript Framework

Na rozdíl od Reactu je Next.js považován za full-stack webový framework, protože poskytuje kompletní řešení pro vytváření webových aplikací vykreslovaných na straně serveru.

Je to proto, že nabízí funkce, které umožňují pracovat na front-endu i back-endu aplikace z jednoho adresáře projektu. K implementaci funkcí na straně serveru, zejména pro aplikace malého rozsahu, nemusíte nutně zřizovat samostatnou složku back-end projektu.

instagram viewer

Přestože Next.js zvládá některé funkce back-endu, pro vytváření rozsáhlých aplikací s plným zásobníkem jej možná budete chtít zkombinovat s vyhrazeným backendovým rámcem, jako je Express.

Některé ze základních funkcí, které dávají Next.js jeho úplné možnosti, zahrnují:

  • Vykreslování na straně serveru: Next.js poskytuje integrovanou podporu pro vykreslování na straně serveru. V podstatě to znamená, že jakmile klient odešle požadavky HTTP na server, server požadavky zpracuje a odpoví požadovaným obsahem HTML pro každou stránku, která má být vykreslena v prohlížeči.
  • Směrování: Next.js používá systém směrování založený na stránkách k definování a správě různých tras, zpracování uživatelských vstupů a vytváření dynamických stránek, aniž byste se museli spoléhat na knihovny třetích stran. Navíc je snadné jej zvětšit, protože přidání nových tras je stejně jednoduché jako přidání nové stránky, jako je about.js, do adresáře stránek.
  • Koncové body API: Next.js poskytuje integrovanou podporu pro funkce na straně serveru, které se používají k vytváření koncových bodů API, které spravují požadavky HTTP a vracejí data. To usnadňuje vytváření back-endových funkcí, aniž byste museli nastavovat samostatný server pomocí vyhrazeného backendového rámce, jako je Express. Je však důležité si uvědomit, že Next.js je primárně front-end webový framework.

Nastavte databázi MongoDB

Začít, nastavit databázi MongoDB. Případně můžete rychle spustit databázi MongoDB pomocí konfigurace MongoDB clusteru v cloudu zdarma. Jakmile budete mít databázi v provozu, zkopírujte řetězec URI připojení k databázi.

Zde najdete kód tohoto projektu úložiště GitHub.

Nastavte projekt Next.js

Vytvořte adresář pro nový projekt a CD do toho:

mkdir nextjs-project
cd nextjs-projekt

Poté nainstalujte Next.js:

npx create-next-app nextjs-mongodb

Po dokončení procesu instalace nainstalujte Mongoose jako závislost.

npm nainstalovat mongoose

Nakonec v kořenovém adresáři vašeho projektu vytvořte nový soubor .env, do kterého bude uložen váš připojovací řetězec k databázi.

NEXT_PUBLIC_MONGO_URI = "připojovací řetězec databáze URI"

Nakonfigurujte připojení k databázi

V src adresář, vytvořte novou složku a pojmenujte ji utils. V této složce vytvořte nový soubor s názvem dbConfig.js a přidejte do něj následující kód:

import mangusta z'mangusta';
konst connectMongo = asynchronní () => mongoose.connect (process.env. NEXT_PUBLIC_MONGO_URI);
vývoznívýchozí připojitMongo;

Definujte datové modely

Datové modely definují strukturu dat, která budou uložena, včetně typů dat a vztahů mezi daty.

MongoDB ukládá data do dokumentů podobných JSON, protože se jedná o a NoSQL databáze. Mongoose poskytuje způsob, jak definovat, jak mají být data z klientů Next.js uložena a zpřístupněna z databáze.

V adresáři src vytvořte novou složku a pojmenujte ji v modelech. V této složce vytvořte nový soubor s názvem userModel.js, a přidejte kód níže:

import { Schéma, model, modely } z'mangusta';
konst userSchema = Nový Schéma({
 název: Tětiva,
 e-mailem: {
 typ: Tětiva,
 Požadované: skutečný,
 unikátní: skutečný,
 },
});


konst Uživatel = modely. Uživatel || Modelka('Uživatel', userSchema);
vývoznívýchozí Uživatel;

Vytvořte koncové body API

Na rozdíl od jiných front-end frameworků poskytuje Next.js integrovanou podporu pro správu API. To zjednodušuje proces vytváření rozhraní API, protože je můžete definovat přímo v projektu Next.js namísto nastavování samostatného serveru.

Jakmile definujete trasy API uvnitř adresáře pages/api, Next.js vygeneruje koncové body API pro každý ze souborů v tomto adresáři. Pokud například vytvoříte userV1/user.js, Next.js vytvoří koncový bod přístupný na http://localhost: 3000/api/userV1/user.

Uvnitř stránky/api, vytvořte novou složku a pojmenujte ji userV1. V této složce vytvořte nový soubor s názvem user.jsa přidejte kód níže:

import připojitMongo z'../../../utils/dbConfig';
import Uživatel z'../../../models/userModel';
/**
 * @param {import('další').NextApiRequest} požad
 * @param {import('další').NextApiResponse} res
 */
vývoznívýchozíasynchronnífunkceuserAPI(req, req) {
Snaž se {
řídicí panel.log('SPOJOVÁNÍ K MONGO');
čekat connectMongo();
řídicí panel.log('SPOJENO K MONGO');
-li (požadovaná metoda 'POŠTA') {
řídicí panel.log('VYTVÁŘENÍ DOKUMENTU');
konst createdUser = čekat User.create (req.body);
řídicí panel.log('VYTVOŘENÝ DOKUMENT');
 res.json({ createdUser });
 } jiný-li (požadovaná metoda 'DOSTAT') {
řídicí panel.log('NAČÍTÁNÍ DOKUMENTŮ');
konst fetchedUsers = čekat User.find({});
řídicí panel.log('NAHRANÉ DOKUMENTY');
 res.json({ fetchedUsers });
 } jiný {
házetNovýChyba(`Nepodporovaná metoda HTTP: ${req.method}`);
 }
 } chytit (chyba) {
řídicí panel.log (chyba);
 res.json({ chyba });
 }
}

Tento kód implementuje koncový bod API pro ukládání a načítání uživatelských dat z databáze MongoDB. Definuje a userAPI funkce, která přebírá dva parametry: req a res. Ty představují příchozí požadavek HTTP a odchozí odpověď HTTP.

Uvnitř funkce se kód připojí k databázi MongoDB a zkontroluje HTTP metodu příchozího požadavku.

Pokud je metodou požadavek POST, kód vytvoří nový uživatelský dokument v databázi pomocí vytvořit metoda. Naopak, pokud je a DOSTAT kód načte všechny uživatelské dokumenty z databáze.

Spotřeba koncových bodů API

Přidejte níže uvedený kód do pages/index.js soubor:

  • Proveďte požadavek POST na koncový bod API pro uložení dat do databáze.
    import styly z'@/styles/Home.module.css';
    import { useState } z'reagovat';
    vývoznívýchozífunkceDomov() {
    konst [name, setName] = useState('');
    konst [e-mail, setEmail] = useState('');
    konst [usersResults, setUsersResults] = useState([]);
    

    konst createUser = asynchronní () => {
    Snaž se {
    konst createdUser = čekat vynést('/api/userV1/user', {
     metoda: 'POŠTA',
     záhlaví: {
    'Typ obsahu': 'application/json',
     },
     tělo: JSON.stringify({
     název,
     e-mailem,
     }),
     }).pak((res) => res.json());
    řídicí panel.log('VYTVOŘENÝ DOKUMENT');
    

     setName('');
     setEmail('');
    řídicí panel.log (createdUser);
     } chytit (chyba) {
    řídicí panel.log (chyba);
     }
     };
  • Definujte funkci pro načítání uživatelských dat odesíláním požadavků HTTP na koncový bod GET.
    konst displayUsers = asynchronní () => {
    Snaž se {
    řídicí panel.log('NAČÍTÁNÍ DOKUMENTŮ');
    konst fetchedUsers = čekat vynést('/api/userV1/user').pak((res) =>
     res.json()
     );
    řídicí panel.log('NAHRANÉ DOKUMENTY');

     setUsersResults (fetchedUsers);
    řídicí panel.log (usersResults)

     } chytit (chyba) {
    řídicí panel.log (chyba);
     }
     };
  • Nakonec vykreslete prvek formuláře s textovými vstupními poli a odešlete a zobrazte tlačítka uživatelských dat.
    vrátit se (
     <>

Nakonec pokračujte a roztočte vývojový server, abyste aktualizovali změny a přejděte na něj http://localhost: 3000 ve vašem prohlížeči.

npm spustit dev

Použití Next.js v Aplikacích

Next.js je fantastická možnost pro vytváření skvělých webových aplikací, ať už pracujete na vedlejším projektu nebo na rozsáhlém webovém řešení. Nabízí řadu funkcí a schopností, které zjednodušují proces vytváření výkonných a škálovatelných produktů.

Ačkoli se jedná především o robustní rámec na straně klienta, můžete také využít jeho schopnosti na straně serveru k rychlému spuštění backendové služby.