require('letter') - The best of Next.js

No siema!

To już drugi list od Require! W tym newsletterze chcielibyśmy odnieść się do poprzedniego odcinka o Next.js Conf i przedstawić wam kilka z naszych ulubionych ficzerów Next'a, które odróżniają go znacząco od innych frameworków.

Fetchowanie danych

Next.js oferuje nam 2 możliwości pobierania danych po stronie serwera - dynamicznie, przy każdym requeście (getServerSideProps), oraz statycznie w momencie budowania strony (getStaticProps)

getServerSideProps

getServerSideProps pozwala nam na wykonanie funkcji po stronie serwera w momencie każdego wyrenderowania strony. Gdy użytkownik wchodzi na daną stronę, Next.js wykona funkcję getServerSideProps dla danej strony, a następnie to co ta funkcja zwróci, przekaże jako propsy do komponentu strony.

W getServerSideProps możemy wykonywać pobieranie dynamicznych danych z np. bazy danych czy headless CMS'a (ale tylko takich, które zmieniają się często, do rzadziej pobieranych przejdziemy zaraz), czy też ogarnąć autoryzację użytkownika - przyjmijmy że dana strona jest zarezerwowana tylko dla zalogowanych użytkowników. W tym celu w getServerSideProps możemy zweryfikować to, czy użytkownik jest zalogowany (pobierając np. JWT z ciasteczka), jeżeli tak to wyrenderujemy stronę, a w przeciwnym wypadku przekierujemy użytkownika na stronę logowania

Strona w dokumentacji poświęcona getServerSideProps - https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering

getStaticProps

getStaticProps pozwala nam na pobieranie danych w momencie zbudowania strony. Z jednorazowo pobranymi danymi, wygeneruje statyczne strony, przekazując te dane do komponentu strony jako propsy.

Jest to idealne rozwiązanie, gdy chcemy pobrać dane z headless CMS'a, ale nie zmieniają się one zbyt często. Po zmianie danych, możemy zbudować stronę - wtedy serwer natychmiastowo odsyła wyrenderowaną do statycznych plików stronę z już pobranymi danymi. Z getStaticProps korzystamy na naszej stronie newslettera, do generowania podstron z archiwum listów.

Jest to rozwiązanie podobne do Gatsby.js, który cały koncentruje się na generowaniu stron statycznych - jeżeli potrzebujesz specyficznie rozwiązania do SSG (Static Site Generation), rozważ skorzystanie z Gatsby, który wątek ten ma o wiele bardziej rozwinięty

Strona w dokumentacji poświęcona getStaticProps - https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation Nasz odcinek poświęcony po części SSG oraz Headless CMSom (dość stary, ale nadal warty przesłuchania) - https://require.podcast.gq/archive/8/blogowanie-i-troche-o-jamstacku

API Routes + Vercel

Jedną z najfajniejszych funkcji Next'a są API Routes oraz jego integracja z Vercelem.

Poza fetchowaniem danych po stronie serwera bezpośrednio do poszczególnych stron, możemy tworzyć tak zwane API routes. Umieszczamy w folderze pages/api pliki .js lub .ts, z których wyeksportowane będą funkcje-handlery danych ścieżek. Są to standardowe handlery do wbudowanej w Node biblioteki http - przyjmują jako argumenty obiekty req i res. Dzięki temu jesteśmy w stanie w prosty sposób zbudować proste REST API do naszej aplikacji.

Później stronę można opublikować na Vercel'u - hostingu stworzonym z myślą o Next.js właśnie - jest on darmowy i obsługuje Serverless Functions.

Należy rozróżnić również Vercel Functions od Next.js Functions. Na końcu będą działały niemalże tak samo, ale Vercel Functions między innymi obsługuje dodatkowe języki, jak np. Go, Python czy Ruby.

Po więcej informacji, sprawdźcie:

Przykładowy plik funkcji:

export default function handler(req, res) {
  res.json({ message: 'hello world!' })
}

Na temat funkcji planujemy również osobny newsletter/odcinek, więc stay tuned :)

Multi Zones

Bardzo przydatną, lęcz często pomijaną funkcjonalnością Next'a oraz Vercel'a są tzw. zone'y. Zone to po prostu instancja aplikacji Next. Dzięki odpowiedniej konfiguracji pliku vercel.json możemy połączyć kilka osobnych aplikacji w jeden projekt publikowany na Vercel'u.

Dzięki temu możemy utworzyć osobną aplikację dla różnych katalogów, np. dla katalogu głównego stronę główną, a w osobnym katalogu zbootstrapować kolejny projekt np. bloga pod ścieżką /blog.

Przykład pliku vercel.json:

{
  "version": 2,
  "builds": [
    { "src": "blog/package.json", "use": "@vercel/next" },
    { "src": "home/package.json", "use": "@vercel/next" }
  ],
  "routes": [
    { "src": "/blog/_next(.*)", "dest": "blog/_next$1" },
    { "src": "/blog(.*)", "dest": "blog/blog$1" },
    { "src": "(.*)", "dest": "home$1" }
  ]
}

Strona w dokumentacji poświęcona Multi Zones - https://nextjs.org/docs/advanced-features/multi-zones

Internationalized Routing

Świeżym dodatkiem z wersji 10 Next'a jest Internationalized Routing, czyli możliwość tworzenia wielojęzycznych stron w bardzo prosty sposób.

W pliku next.config.js konfigurujemy języki naszej strony oraz ustawiamy strategię routingu między językami (domyślnie Next będzie generować strony w domyślnym języku pod ich normalnym adresem, a inne pod np. /pl/nazwastrony, ale można również dopasować domenę dla innego języka).

Następnie chcąc przekierować użytkownika na inną wersję językową strony, dodajemy atrybut locale do komponentu <Link />.

Jak na razie o samo zmienianie języków w komponentach musimy zadbać sami, Next jednynie przekazuje jedynie odpowiednie argumenty do funkcji odpowiadających za fetchowanie danych, oraz do komponentów za pomocą hooka useRouter().

Po więcej informacji, sprawdźcie poświęconą temu stronę w dokumentacji :)

next/amp

Next.js pozwala nam na bardzo proste tworzenie stron AMP (Accelerated Mobile Pages). Strony te w ciekawy sposób współpracują z Google, które dorzuca do nich cache oraz pozwala na szybkie wyświetlanie na urządzeniach mobilnych w wyszukiwarce.

Aby dodać AMP do danej strony w naszym projekcie wystarczy do pliku strony (np. pages/index.js) dodać jedną linijkę kodu:

export const config = { amp: true }

I tyle :). Next zajmie się całą resztą

Strona w dokumentacji poświęcona AMP - https://nextjs.org/docs/api-reference/next/amp

next/image

Wraz z Next.js w wersji 10 pojawiła się nowa paczka - next/image. Dodała ona do Next'a optymalizację obrazków, podobnie jak w Gatsby.js. W porównaniu do gatsby/image jest natomiast o wiele prostsza w użyciu.

Pod spodem wszystkie obrazki konwertuje do formatu WEBP, dopasowuje do rozmiaru na stronie i tworzy odpowiednie wersje dla odpowiednich rozmiarów, oraz dodaje lazy loading. Wszystko to z praktycznie zerową wymaganą konfiguracją, w przeciwieństwie do odpowiednika z Gatsby.js

Przykład komponentu:

import Image from 'next/image'

function Img() {
  return (
    <Image
      src="/obrazek.png"
      alt="Obrazek!"
      width={500}
      height={500}
    />
  )
}

export default Img

Strona w dokumentacji poświęcona next/image - https://nextjs.org/docs/api-reference/next/image

Podsumowując

Dzięki za przeczytanie tego newslettera. Pamiętajcie że na stronie newslettera możecie przeczytać również poprzednie listy. Cześć i do następnego!