0:00 / 0:00

Next.js 13 w Praktyce: Co będziemy budować?

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:00W tym kursie zbudujemy sobie fikcyjną aplikację Pocket SAP.

0:03Będzie to aplikacja, gdzie użytkownik

0:05będzie mógł trzymać informacje na temat swoich subskrypcji,

0:09serwisów, z których korzysta, na temat swoich opłat, na temat wszystkich

0:13kategorii, które ma, także jeżeli chodzi o landing page.

0:17Mamy coś takiego.

0:18Przygotowano prosty landing page z jakimś guzikiem.

0:22Jeżeli chodzi o guzik, tutaj pozwoli nam przeskoczyć do założenia naszego konta.

0:25Natomiast tutaj możemy się zalogować naszą nazwą użytkownika.

0:29Ja w tym momencie się zaloguje.

0:30Po poprawnej weryfikacji musimy też podać nasze hasło.

0:34I w tym momencie lądujemy na boardzie. Dane są.

0:37Dane są ładowane już tutaj mamy przykładowe subskrypcje, przykładowe

0:41płatności, jakieś tam statystyki po prawej stronie w zależności od tego jakie

0:46użytkownik ma subskrypcję, za co płaci i płaci miesięcznie czy rocznie.

0:51Tutaj mamy to rozbite na kategorie.

0:53Dodatkowa rzecz mamy widok subskrypcji,

0:55gdzie mamy podgląd pod wszystkie subskrypcje.

0:57Tutaj możemy sobie edytować każdą z tych

0:59subskrypcji w naszym w naszym panelu do edycji.

1:02Jeżeli chodzi o dodawanie tych subskrypcji to mamy guzik nowej subskrypcji.

1:07Tutaj też mamy taki formularz.

1:09Wszystkim tym zajmiemy się w tym kursie jak to wszystko zbudować.

1:13Dodatkowo mamy taki App User button komponent, który pozwala

1:18nam się wylogować po prostu z tej aplikacji i po wylogowaniu się

1:21przechodzimy po prostu na stronę stronę landing page.

1:24Jest to strona otwarta.

1:25Jak widzisz nie trzeba być zalogowanym, żeby widzieć treść.

1:27Dodatkowo mamy tutaj stronę blog, na

1:29której co prawda nic nie ma, natomiast to też jest strona otwarta, marketingowa.

1:33Pokażę Ci w jaki sposób możesz sobie ograć to za pomocą grupowania robotów.

1:37Pokażę Ci w jaki sposób możesz ograć

1:39autoryzację użytkowników przy pomocy rozwiązania nazwanego Clark.

1:43I to tyle.

1:44Zapraszam Cię w takim razie do projektu i udanego kodowania.