0:00 / 0:00

Next.js 13 w Praktyce: Logowanie i SignIn route

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:00Jeżeli chodzi o sań,

0:02to rzecz jest o tyle prostsza, że całą najcięższą logikę zrobiliśmy jeżeli

0:06chodzi o kreację naszych użytkowników i łebków.

0:13Dlatego teraz tak naprawdę zostało nam

0:15tylko jeden root w naszej grupie Application.

0:20Czyli tutaj, w tym miejscu, gdzie mamy alt, mamy sign up, potrzebujemy też sign

0:23in i w sign in też potrzebujemy catch atrybut.

0:28Na takiej samej, takiej samej zasadzie,

0:30tak jak to było poprzednio, czyli tutaj pisane i page six.

0:37Tutaj wklejamy komponent, który jest komponent Sign in Patch.

0:42Tutaj możemy zrobić od razu Redirect URL, żeby użytkownik po zalogowaniu się po

0:46prostu od razu przeskakiwał na na stronę portalu.

0:50Zapisujemy to sobie.

0:52Jeżeli chodzi o ten sign tutaj redirect after successful możemy sobie zrobić

0:58customowe strony, żeby powiedzieć użytkownikowi Hej, potwierdź teraz Twoje

1:02konto na e-mailu i zacznij korzystać z naszej aplikacji.

1:06Tak, Natomiast my sobie to na chwilę

1:08zostawiamy i tutaj automatycznie jest redirect na paszport.

1:11Jeżeli sobie zapiszemy to wszystko,

1:13przejdźmy sobie teraz jeszcze raz do naszej aplikacji.

1:17Wróćmy do naszej aplikacji.

1:20Kasujemy sobie tą sesję.

1:22Jeżeli sobie zrestartuje to to teraz już tutaj nie ma żadnej sesji.

1:25Użytkownik.

1:26Spróbujemy sobie przeskoczyć teraz na Signal Sign In.

1:29To jest strona, która powinna być

1:31odpowiedzialna za logowanie naszego użytkownika, prawda?

1:35Jeżeli mamy no account możemy przejść na sign up.

1:37Jest to też od razu domyślnie zbudowane.

1:40OK, mamy branding, natomiast zamiast premium jest to możliwe do usunięcia.

1:45Tutaj wpiszemy sobie adres użytkownika, który istnieje do naszej bazy danych,

1:50czyli to jest użytkownik, który w naszej bazie istnieje.

1:54No i tutaj mamy możemy sobie

1:56czy to edytować nazwę użytkownika i musimy wpisać hasło.

2:00Po poprawnym wpisaniu hasła zobacz zostaliśmy przekierowani na dashboard.

2:04Tak naprawdę to jest logika związana z sign in page.

2:08I teraz jedna rzecz jeszcze warta wspomnienia.

2:11To teraz musimy sobie zbudować nawigację zarówno w layoucie APP,

2:16jak i w layoucie smart marketing, żebyśmy mogli swobodnie poruszać się pomiędzy tymi

2:22stronami, swobodnie nawigować czy to na stronę MC NAP.

2:26Także zajmiemy się teraz tworzeniem marketing Layout.

2:28Najpierw to będzie layout otwarty, a potem przejdziemy do Apple.

2:32J Czyli to będzie ten las zamknięty za bramką logowania, gdzie mamy ten sidebar,

2:36w którym możemy kierować wszystkimi akcjami?