Tworzenie nowego API route
Aby utworzyć API route w Next.js, należy najpierw utworzyć nowy plik w katalogu "pages/api". Nazwa pliku będzie służyć jako nazwa endpointu i musi kończyć się przyrostkiem .js. Na przykład, jeśli chcesz utworzyć endpoint API o nazwie "users", nazwa pliku powinna brzmieć "users.js". Wewnątrz pliku można dodać logikę endpointu, a Next.js automatycznie przekieruje wszystkie przychodzące żądania do tego pliku.
Pisanie modułu Route Handler
Podczas przeglądania nowej API route po stronie serwera, Next.js generuje nową instancję Node.js do obsługi żądania. Aby napisać obsługę route'a, należy wyeksportować domyślną funkcję Node.js z nowo utworzonego pliku. Funkcja powinna przyjmować dwa argumenty - obiekt żądania "req" i obiekt odpowiedzi "res". Teraz możesz dodać logikę endpointu do funkcji. Na przykład, jeśli chcesz odesłać odpowiedź JSON, możesz użyć obiektu odpowiedzi i wysłać dane w następujący sposób: res.status(200).json({message: "Hello World!"});
1export default function handler(req, res) {
2 res.status(200).json({ message: 'Hello World!' })
3}
Ten kod jest prostym przykładem obsługi API w Next.js. Funkcja obsługi jest główną funkcją obsługi dla tego endpointu, przyjmującą dwa argumenty: req (żądanie) i res (odpowiedź). Wewnątrz funkcji obsługi można zdefiniować logikę dla tego endpointu. W przykładowym kodzie zwracamy odpowiedź ze statusem 200 (oznaczającym sukces) i JSON z komunikatem "Hello World!".
Pobieranie danych z bazy danych
Jeśli chcesz pobrać dane z bazy danych, możesz to zrobić za pomocą dowolnej biblioteki bazy danych Node.js lub metod API route Next.js. Next.js udostępnia dwie metody pobierania danych z API route: getServerSideProps i getStaticProps. getServerSideProps pobiera dane po stronie serwera podczas żądania, podczas gdy getStaticProps pobiera dane w czasie kompilacji.
1export default function handler(req, res) {
2 const requestMethod = req.method;
3 switch (requestMethod) {
4 case 'GET':
5 res.status(200).json({ message: 'Hello from the GET API!' });
6 break;
7 case 'POST':
8 const body = req.body;
9 res.status(200).json({ message: `Hello from the POST API! You submitted the following data: ${body}` });
10 break;
11
12 // handle other HTTP methods
13 default:
14 res.status(405).json({ error: 'Method Not Allowed' });
15 }
16}
Funkcja obsługi jest główną funkcją obsługi tego interfejsu endpointu API, przyjmującą dwa argumenty: req (żądanie) i res (odpowiedź). Wewnątrz tej funkcji instrukcja switch służy do rozróżniania metody HTTP przekazanej w żądaniu (czy jest to GET, POST czy inna metoda). W przypadku metody GET kod zwraca odpowiedź o statusie 200 z komunikatem "Hello from GET API!". W przypadku metody POST kod pobiera dane z treści żądania (req.body) i zwraca odpowiedź ze statusem 200 z komunikatem zawierającym te dane. Jeśli żądanie jest metodą HTTP inną niż GET lub POST, kod zwraca odpowiedź ze statusem 405 (Metoda niedozwolona), co oznacza, że inne metody nie są obsługiwane przez ten endpoint. Ten przykład pokazuje, jak można dostosować zachowanie interfejsu API w zależności od metody HTTP przekazanej w żądaniu, co jest przydatne do tworzenia wszechstronnych interfejsów API obsługujących różne typy operacji.
1export async function getServerSideProps() {
2 const res = await fetch(`https://.../data`)
3 const data = await res.json()
4
5 return { props: { data } }
6}
7
8export default function Page({ data }) {
9 // Render data...
10}
Ten kod pokazuje, jak użyć funkcji getServerSideProps w Next.js do pobierania danych serwerowych i przekazywania ich do komponentu strony. Funkcja getServerSideProps jest wykorzystywana w Next.js do generowania danych na serwerze podczas każdego żądania strony. W tym przypadku jest używana do pobrania danych z zewnętrznego źródła (przy użyciu fetch), a następnie przekazania tych danych jako właściwości (props) do komponentu strony. Komponent strony Page przyjmuje te dane jako argument i może je renderować lub wykorzystywać do budowania treści strony.
1export default function Blog({ posts }) {
2 return (
3 <ul>
4 {posts.map((post) => (
5 <li>{post.title}</li>
6 ))}
7 </ul>
8 )
9}
10
11export async function getStaticProps() {
12 const res = await fetch('https://.../posts')
13 const posts = await res.json()
14
15 return {
16 props: {
17 posts,
18 },
19 }
20}
Ten kod demonstruje wykorzystanie funkcji getStaticProps w Next.js do generowania danych statycznych w trakcie budowy strony. Komponent Blog jest odpowiedzialny za renderowanie listy postów, które zostaną pobrane podczas budowy strony. Wewnątrz funkcji getStaticProps, dane są pobierane z zewnętrznego źródła, za pomocą fetch. Następnie dane są sparsowane jako JSON i przekazane jako właściwość (props) do komponentu Blog. Funkcja getStaticProps jest wywoływana podczas budowy strony na serwerze i nie jest wykonywana po stronie klienta. Dzięki temu możesz nawet wykonywać bezpośrednie zapytania do bazy danych podczas generowania statycznej zawartości strony.
W jaki sposób Api Route trafia do Vercel?
Platforma Vercel automatycznie analizuje strukturę projektu, a następnie konfiguruje środowisko uruchomieniowe, które może obsługiwać API route. Podczas gdy tradycyjne aplikacje internetowe mogą wymagać serwera, Vercel umożliwia obsługę stron i interfejsów API bez konieczności utrzymywania oddzielnego serwera. Krótko mówiąc, po utworzeniu API route w Vercel, a następnie wdrożeniu projektu, Vercel automatycznie konfiguruje infrastrukturę do obsługi API route. Gdy ktoś wysyła żądanie HTTP do jednego z endpointów API, Vercel automatycznie przekierowuje to żądanie do odpowiedniego pliku w folderze api, gdzie jest ono obsługiwane zgodnie z kodem napisanym dla tego endpointu.
Czym jest serverless i jak działają te serverless endpointy?
Vercel oferuje bezserwerowe podejście do hostingu, eliminując potrzebę osobistego zarządzania infrastrukturą serwerową. W przeciwieństwie do klasycznych metod hostingu, w których wymagane jest skonfigurowanie i utrzymanie serwera, Vercel przejmuje te zadania. W rezultacie możesz skoncentrować swoje wysiłki na rozwijaniu kodu aplikacji. Model ten nie tylko ułatwia pracę, ale także zapewnia elastyczność skalowania aplikacji zgodnie z jej bieżącym obciążeniem, co oznacza, że płacisz tylko za zasoby, z których faktycznie korzystasz.
Podczas pracy z aplikacjami w Next.js, Vercel upraszcza proces tworzenia i zarządzania bezserwerowymi endpointami. Automatycznie generując endpointy dla funkcji API, Vercel zapewnia płynną integrację z Next.js, dzięki czemu tworzenie aplikacji i zarządzanie nimi w tym środowisku jest znacznie prostsze i bardziej wydajne.