Odkryj moc Mongoose i dowiedz się, jak możesz jej używać do zarządzania danymi w prostej aplikacji internetowej.
Next.js to wszechstronna platforma JavaScript z pełnym stosem, zbudowana na bazie React, obsługująca jego główne funkcje, takie jak JSX, komponenty i hooki. Niektóre z podstawowych funkcji Next.js obejmują routing oparty na plikach, CSS w JS i renderowanie po stronie serwera.
Jedną z istotnych możliwości Next.js jest jego zdolność do bezproblemowej integracji z różnymi technologiami zaplecza, takimi jak Mongoose, co pozwala na łatwe i wydajne zarządzanie danymi.
Dzięki Mongoose możesz łatwo zdefiniować wydajne API REST z aplikacji Next.js do przechowywania i pobierania danych z bazy danych MongoDB.
Next.js: kompleksowy framework JavaScript
W przeciwieństwie do React, Next.js jest uważany za platformę internetową z pełnym stosem, ponieważ zapewnia kompletne rozwiązanie do budowania aplikacji internetowych renderowanych po stronie serwera.
Dzieje się tak, ponieważ oferuje funkcje, które umożliwiają pracę zarówno na froncie, jak i na backendzie aplikacji z jednego katalogu projektu. Nie musisz koniecznie konfigurować oddzielnego folderu projektu zaplecza, aby zaimplementować funkcjonalność po stronie serwera, szczególnie w przypadku aplikacji na małą skalę.
Jednak o ile Next.js obsługuje niektóre funkcje zaplecza, aby tworzyć duże aplikacje z pełnym stosem, warto połączyć go z dedykowanym frameworkiem zaplecza, takim jak Express.
Niektóre z podstawowych funkcji, które zapewniają Next.js jego pełne możliwości, obejmują:
- Renderowanie po stronie serwera: Next.js zapewnia wbudowaną obsługę możliwości renderowania po stronie serwera. Zasadniczo oznacza to, że gdy klient wysyła żądania HTTP do serwera, serwer przetwarza żądania i odpowiada wymaganą treścią HTML dla każdej strony, która ma być renderowana w przeglądarce.
- Routing: Next.js używa systemu routingu opartego na stronach do definiowania różnych tras i zarządzania nimi, obsługi danych wprowadzanych przez użytkowników i tworzenia dynamicznych stron bez konieczności polegania na bibliotekach innych firm. Ponadto skalowanie w górę jest łatwe, ponieważ dodawanie nowych tras jest tak proste, jak dodanie nowej strony, takiej jak about.js, do katalogu stron.
- Punkty końcowe API: Next.js zapewnia wbudowaną obsługę funkcji po stronie serwera, które są używane do tworzenia punktów końcowych API, które zarządzają żądaniami HTTP i zwracanymi danymi. Ułatwia to tworzenie funkcji zaplecza bez konieczności konfigurowania oddzielnego serwera przy użyciu dedykowanej struktury zaplecza, takiej jak Express. Należy jednak pamiętać, że Next.js to przede wszystkim front-endowy framework sieciowy.
Skonfiguruj bazę danych MongoDB
Rozpocząć, skonfigurować bazę danych MongoDB. Alternatywnie możesz szybko uruchomić bazę danych MongoDB przez bezpłatną konfigurację klastra MongoDB w chmurze. Po skonfigurowaniu i uruchomieniu bazy danych skopiuj ciąg identyfikatora URI połączenia z bazą danych.
Możesz znaleźć kod tego projektu w this Repozytorium GitHub.
Skonfiguruj projekt Next.js
Utwórz katalog dla nowego projektu i płyta CD w tym:
projekt mkdir nextjs
projekt cd nextjsNastępnie zainstaluj Next.js:
npx utwórz następną aplikację nextjs-mongodbPo zakończeniu procesu instalacji zainstaluj Mongoose jako zależność.
npm zainstaluj mangustęNa koniec w katalogu głównym projektu utwórz nowy plik .env do przechowywania parametrów połączenia z bazą danych.
NEXT_PUBLIC_MONGO_URI = „łańcuch połączenia identyfikatora URI bazy danych”Skonfiguruj połączenie z bazą danych
w źródło katalogu, utwórz nowy folder i nadaj mu nazwę narzędzia. W tym folderze utwórz nowy plik o nazwie dbConfig.js i dodaj do niego następujący kod:
import mangusta z'mangusta';konst połącz Mongo = asynchroniczny () => mongoose.connect (process.env. NEXT_PUBLIC_MONGO_URI);
eksportdomyślny połącz Mongo;
Zdefiniuj modele danych
Modele danych definiują strukturę danych, które będą przechowywane, w tym typy danych i relacje między danymi.
MongoDB przechowuje dane w dokumentach podobnych do JSON, ponieważ jest to Baza danych NoSQL. Mongoose zapewnia sposób definiowania sposobu przechowywania danych klientów Next.js i uzyskiwania do nich dostępu z bazy danych.
W katalogu src utwórz nowy folder i nazwę w models. W tym folderze utwórz nowy plik o nazwie userModel.js, i dodaj poniższy kod:
import { Schemat, model, modele } z'mangusta';konst schemat użytkownika = nowy Schemat({
nazwa: Strunowy,
e-mail: {
typ: Strunowy,
wymagany: PRAWDA,
unikalny: PRAWDA,
},
});konst Użytkownik = modele. Użytkownik || Model('Użytkownik', schemat użytkownika);
eksportdomyślny Użytkownik;
Utwórz punkty końcowe interfejsu API
W przeciwieństwie do innych frameworków front-end, Next.js zapewnia wbudowaną obsługę zarządzania API. Upraszcza to proces tworzenia interfejsów API, ponieważ można je zdefiniować bezpośrednio w projekcie Next.js zamiast konfigurować osobny serwer.
Po zdefiniowaniu tras API w katalogu pages/api Next.js generuje punkty końcowe API dla każdego pliku w tym katalogu. Na przykład, jeśli utworzysz userV1/user.js, Next.js utworzy punkt końcowy dostępny pod adresem http://localhost: 3000/api/użytkownikV1/użytkownik.
W środku strony/api, utwórz nowy folder i nadaj mu nazwę userV1. W tym folderze utwórz nowy plik o nazwie użytkownik.jsi dodaj poniższy kod:
import połączMongo z„../../../narzędzia/konfiguracja bazy danych”;
import Użytkownik z„../../../modele/model użytkownika”;/**
* @param {import('Następny').NextApiRequest} wym
* @param {import('Następny').NextApiResponse} res
*/
eksportdomyślnyasynchronicznyfunkcjonowaćAPI użytkownika(żądanie, rez) {
próbować {
konsola.dziennik(„ŁĄCZENIE Z MONGO”);
czekać na połącz Mongo();
konsola.dziennik(„POŁĄCZONY Z MONGO”);
Jeśli (wymagana metoda 'POST') {
konsola.dziennik(„TWORZENIE DOKUMENTU”);
konst utworzony użytkownik = czekać na User.create (req.body);
konsola.dziennik(„UTWORZONY DOKUMENT”);
res.json({utworzonyUżytkownik});
} w przeciwnym razieJeśli (wymagana metoda 'DOSTAWAĆ') {
konsola.dziennik(„POBIERANIE DOKUMENTÓW”);
konst pobrani użytkownicy = czekać na User.find({});
konsola.dziennik(„POBIERANE DOKUMENTY”);
res.json({ pobranych użytkowników});
} w przeciwnym razie {
rzucićnowyBłąd(`Nieobsługiwana metoda HTTP: ${wymagana metoda}`);
}
} złapać (błąd) {
konsola.log (błąd);
res.json({błąd});
}
}
Ten kod implementuje punkt końcowy API do przechowywania i pobierania danych użytkownika z bazy danych MongoDB. definiuje A API użytkownika funkcja, która przyjmuje dwa parametry: wymaganie I rez. Reprezentują one odpowiednio przychodzące żądanie HTTP i wychodzącą odpowiedź HTTP.
Wewnątrz funkcji kod łączy się z bazą danych MongoDB i sprawdza metodę HTTP przychodzącego żądania.
Jeśli metodą jest żądanie POST, kod tworzy nowy dokument użytkownika w bazie danych przy użyciu metody tworzyć metoda. I odwrotnie, jeśli jest to A DOSTAWAĆ żądanie, kod pobiera wszystkie dokumenty użytkownika z bazy danych.
Korzystanie z punktów końcowych interfejsu API
Dodaj poniższy kod do pliku strony/index.js plik:
- Wykonaj żądanie POST do punktu końcowego interfejsu API, aby zapisać dane w bazie danych.
import style z'@/styles/Home.module.css';
import { stan użycia } z'reagować';eksportdomyślnyfunkcjonowaćDom() {
konst [nazwa, setName] = useState('');
konst [email, setEmail] = useState('');
konst [ResultsUżytkownicy, setUsersResults] = useState([]);konst utwórz użytkownika = asynchroniczny () => {
próbować {
konst utworzony użytkownik = czekać na aportować(„/api/użytkownikV1/użytkownik”, {
metoda: 'POST',
nagłówki: {
'Typ zawartości': „aplikacja/json”,
},
ciało: JSON.stringify({
nazwa,
e-mail,
}),
}).Następnie((rez) => res.json());
konsola.dziennik(„UTWORZONY DOKUMENT”);zestawNazwa('');
ustaw e-mail ('');konsola.log (utworzony użytkownik);
} złapać (błąd) {
konsola.log (błąd);
}
}; - Zdefiniuj funkcję do pobierania danych użytkownika, wysyłając żądania HTTP do punktu końcowego GET.
konst wyświetlUżytkownicy = asynchroniczny () => {
próbować {
konsola.dziennik(„POBIERANIE DOKUMENTÓW”);
konst pobrani użytkownicy = czekać na aportować(„/api/użytkownikV1/użytkownik”).Następnie((rez) =>
res.json()
);
konsola.dziennik(„POBIERANE DOKUMENTY”);
setUsersResults (pobrani użytkownicy);
konsola.log (wyniki użytkowników)
} złapać (błąd) {
konsola.log (błąd);
}
}; - Na koniec wyrenderuj element formularza z polami do wprowadzania tekstu oraz wyślij i wyświetl przyciski danych użytkownika.
powrót (
<>
Na koniec śmiało uruchom serwer deweloperski, aby zaktualizować zmiany i przejść do niego http://localhost: 3000 w Twojej przeglądarce.
npm uruchom devUżywanie Next.js w aplikacjach
Next.js to fantastyczna opcja do tworzenia fajnych aplikacji internetowych, niezależnie od tego, czy pracujesz nad projektem pobocznym, czy rozwiązaniem internetowym na dużą skalę. Oferuje szereg funkcji i możliwości usprawniających proces tworzenia wydajnych i skalowalnych produktów.
Chociaż jest to przede wszystkim solidna platforma po stronie klienta, możesz także wykorzystać jej możliwości po stronie serwera, aby szybko przyspieszyć usługę zaplecza.