0:00 / 0:00

Next.js 13 w Praktyce: Deployment i zmienne środowiskowe na Vercel

Projekt aplikacji SaaS

8 godz. 8 min · Next.js · Full-stack i Programowanie

Daniel NoworytaFull stack Developer

Czego się nauczysz

Pełne zrozumienie architektury i możliwości frameworka Next.js
Zdolność tworzenia bezpiecznej autoryzacji i autentykacji z Clerk
Efektywne zarządzanie danymi za pomocą Prismy i PostgreSQL na DigitalOcean
Umiejętność budowania intuicyjnej nawigacji za pomocą routingu Next.js
Umiejętność wdrożenia aplikacji na Vercel
Dogłębne zrozumienie zarządzania stanem i wykorzystywania server actions

Autoryzacja i autentykacja z Clerk

Naucz się tworzyć bezpieczne systemy uwierzytelniania i autoryzacji, korzystając z Clerk. Pokażę Ci, jak to robić krok po kroku, aby Twoje aplikacje były bezpieczne i profesjonalne.

Integracja z bazą danych za pomocą Prismy

Zrozumiesz, jak skutecznie i bezboleśnie połączyć swoją aplikację Next.js z bazą danych PostgreSQL na DigitalOcean. Pokażę Ci, jak używać Prismy, aby ułatwić ten proces.

Routing i nawigacja

Dowiesz się, jak zarządzać routingiem i nawigacją w swojej aplikacji, aby użytkownicy mogli łatwo i intuicyjnie poruszać się po Twojej stronie.

Deployment na Vercel

Pokażę Ci, jak z łatwością wdrożyć swoją aplikację na Vercel, jednym z najpopularniejszych środowisk hostingowych dla aplikacji Next.js.

Zarządzanie stanem i server actions

Nauczysz się zarządzać stanem aplikacji i jak wykorzystać server actions w praktyce, co pozwoli Ci na tworzenie bardziej zaawansowanych i dynamicznych funkcji.

Dla kogo jest ten kurs?

Ten kurs jest dla osób, które już mają pewne doświadczenie z JavaScript i chcą zgłębić swoje zrozumienie Next.js. Zakładamy, że znasz podstawy TypeScript, TailwindCSS, ale nie potrzebujesz doświadczenia z Next.js - wszystko wyjaśnię Ci od podstaw!

0:00Z naszej bazy danych mamy już za sobą.

0:03Jeszcze zanim przejdziemy do routingu, to

0:05komentujemy te wszystkie zmiany na naszych obręczach i status.

0:09Mamy kilka zmian jednak było.

0:11Mamy WiP, mamy pracę magisterską.

0:13Jest, są git kropka.

0:15Chcemy wszystkie zmiany za komentować.

0:18Git commit add prisma and wypychamy

0:26to push login switch setup db.

0:33Już teraz po wyprostowaniu tego na nasz serwer powinna się zadziałać jedna rzecz.

0:38Generalnie rzecz biorąc możemy sobie przejść na naszego GitHuba projekt Pocket.

0:43Generalnie rzecz biorąc musimy sobie stworzyć pull request.

0:47Stwórzmy sobie pull request.

0:49Najpierw ficzer to develop.

0:55Pull request.

0:56No i mamy ending bilet.

0:58Zobaczymy czy nasza aplikacja się wyczerpuje.

1:02Sprawdźmy sobie jeszcze na Wersalu, czy nasz bilet sukcesywnie przeszedł.

1:08Jeżeli chodzi o ten bilet Preview przejdźmy sobie naszych deployment

1:12i jeżeli chodzi o features tutaj i jest to teraz wbudowane, sprawdzimy czy to

1:18wszystko przejdzie tak jak powinno przejść.

1:20Jest tak.

1:22Przejdźmy teraz do naszego GitHuba.

1:24Znowu.

1:26Mamy pull request merge.

1:29Zmarnowaliśmy to develop.

1:31Sprawdźmy teraz sobie na Wersalu, czy rzeczywiście ten build tutaj też

1:35przejdzie sukcesywnie, czy też po 40 60 sekundach udało się sukcesywnie przejść.

1:41Natomiast jeszcze zanim teraz sobie

1:42zrobimy pull request z develop do naszego maina.

1:46Prosiłbym Cię o jedną rzecz.

1:48Mianowicie przejdź sobie w Settings i tutaj w Environment Variable.

1:53Generalnie rzecz biorąc zobacz nie mam

1:55żadnej environment variable z póki co dodanej i jest to bardzo ważne, żebyśmy o

2:00tym nie zapomnieli, żeby dodać tutaj klucz połączenia do naszej bazy danych.

2:05Ja sobie teraz przejdę do mojego edytora

2:07kodu i skorzystam z Magic i na zasłonie ten plik dodałem u siebie.

2:15Natomiast proszę Cię żebyś skopiował sobie

2:17tą pierwszą linię i wkleił ją sobie właśnie tutaj.

2:21Jeżeli chodzi o

2:23dodawanie environment variable wystarczy, że klikniesz tutaj w kim masz schowany ten

2:28input i ctrl v od razu input i powinien Ci się wkleić.

2:33Ja sobie to zapiszę.

2:34W tym momencie już database URL został zapisany w moim projekcie.

2:39Teraz możemy spokojnie już wrócić do Deployment, wrócić do naszego git huba i

2:44zrobić pull request z już z develop a do maina.

2:50Nie pull request z develop.

2:53Wszystkie zmiany, które były związane z

2:55tym, że wprowadziliśmy bazę danych w naszym projekcie.

2:59Tutaj możemy powiedzieć, że deweloperzy mają też powinien bez problemu przejść.

3:05Przejdźmy teraz na wersję i sprawdźmy czy

3:08nasz build main też przejdzie bez problemów.

3:11No i po około 45 46 sekundach też powinna

3:14u Ciebie takie coś się pojawić, że build przeszedł.

3:17Nasza aplikacja bez problemu funkcjonuje w internecie.

3:21Można ją sobie odwiedzić na adresie, który będziesz miał tutaj podany.

3:24Teraz przejdźmy do routingu naszej aplikacji.

3:27Wyjaśnię Ci chwileczkę,

3:29za chwilkę kilka najważniejszych pojęć jeżeli chodzi o routing w aplikacji Next

3:33i pokazać Ci strategię, którą wybierzemy na tą aplikację, którą budujemy razem.