Jak dodać endpoint w Next.js

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.

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}

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}

1
export 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}

1
export 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}

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.

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.