# Jak zbudować nowoczesną aplikację SaaS za pomocą Next.js Next.js to potężny framework React, który ułatwia budowanie nowoczesnych aplikacji internetowych. W tym artykule przeprowadzimy cię przez kompletny przewodnik krok po kroku, jak używać Next.js do stworzenia prostej aplikacji SaaS. Omówimy cały proces, od przygotowania środowiska deweloperskiego po stworzenie podstawowych funkcji. ## 1. Przygotowanie środowiska Zanim zaczniemy, musimy upewnić się, że twoje środowisko deweloperskie jest gotowe. Proszę postępuj zgodnie z poniższymi krokami: ### 1.1 Instalacja Node.js i npm Upewnij się, że na twoim komputerze zainstalowane są Node.js i npm. Możesz uruchomić poniższe polecenia w terminalu, aby sprawdzić wersję: ```bash node -v npm -v ``` Jeśli nie masz ich zainstalowanych, odwiedź [oficjalną stronę Node.js](https://nodejs.org/), aby pobrać i zainstalować. ### 1.2 Utworzenie projektu Next.js Uruchom poniższe polecenie w terminalu, aby utworzyć nowy projekt Next.js: ```bash npx create-next-app@latest my-saas-app cd my-saas-app ``` To stworzy nowy projekt o nazwie `my-saas-app` i automatycznie zainstaluje wymagane zależności. ## 2. Struktura projektu W katalogu `my-saas-app` zobaczysz następującą podstawową strukturę: ``` my-saas-app/ ├── pages/ │ ├── api/ │ ├── _app.js │ ├── index.js │ └── ... ├── public/ ├── styles/ └── ... ``` - **pages/**: zawiera strony aplikacji. - **public/**: zawiera zasoby publiczne, takie jak obrazy, ikony itp. - **styles/**: zawiera pliki CSS. ## 3. Budowanie podstawowych funkcji W tej sekcji zaimplementujemy prosty system rejestracji i logowania użytkowników. ### 3.1 Ustawienie bazy danych W tym przykładzie użyjemy Supabase jako usługi backendowej. Proszę postępuj zgodnie z poniższymi krokami: 1. Odwiedź [oficjalną stronę Supabase](https://supabase.io/) i utwórz konto. 2. Utwórz nowy projekt i zapisz swój adres URL bazy danych oraz klucz API. 3. Połącz się z bazą danych i utwórz tabelę użytkowników: ```sql create table users ( id serial primary key, email text unique not null, password text not null ); ``` ### 3.2 Instalacja klienta Supabase Zainstaluj bibliotekę klienta Supabase w projekcie Next.js: ```bash npm install @supabase/supabase-js ``` ### 3.3 Utworzenie strony rejestracji użytkownika W katalogu `pages/` utwórz nowy plik `register.js` i dodaj następujący kod: ```jsx import { useState } from 'react'; import { createClient } from '@supabase/supabase-js'; const supabase = createClient('YOUR_SUPABASE_URL', 'YOUR_SUPABASE_ANON_KEY'); const Register = () => { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const handleRegister = async () => { const { user, error } = await supabase.auth.signUp({ email, password, }); if (error) { console.error(error); } else { alert('Rejestracja zakończona sukcesem!'); } }; return ( ); }; export default Register; ``` ### 3.4 Utworzenie strony logowania użytkownika Również w katalogu `pages/` utwórz nowy plik `login.js` i dodaj następujący kod: ```jsx import { useState } from 'react'; import { createClient } from '@supabase/supabase-js'; const supabase = createClient('YOUR_SUPABASE_URL', 'YOUR_SUPABASE_ANON_KEY'); const Login = () => { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const handleLogin = async () => { const { user, error } = await supabase.auth.signIn({ email, password, }); if (error) { console.error(error); } else { alert('Logowanie zakończone sukcesem!'); } }; return ( ); }; export default Login; ``` ## 4. Wdrażanie aplikacji ### 4.1 Wybór platformy wdrożeniowej Używamy Vercel do wdrożenia naszej aplikacji Next.js. Proszę postępuj zgodnie z poniższymi krokami: 1. Odwiedź [oficjalną stronę Vercel](https://vercel.com/) i zarejestruj konto. 2. Utwórz nowy projekt i wybierz swoje repozytorium GitHub. 3. Upewnij się, że dodałeś adres URL Supabase i klucz API w zmiennych środowiskowych. 4. Kliknij wdrożenie i poczekaj, aż Vercel zakończy proces wdrożenia. ### 4.2 Weryfikacja wdrożenia Po zakończeniu wdrożenia otrzymasz publiczny adres URL. Odwiedź ten adres URL, aby upewnić się, że aplikacja działa prawidłowo. ## 5. Podsumowanie Dzięki krokom opisanym w tym artykule, udało ci się zbudować prostą aplikację SaaS za pomocą Next.js, w tym funkcje rejestracji i logowania użytkowników. Potęga Next.js polega na jego elastyczności i wydajności, co pozwala na łatwe rozszerzanie w celu zaspokojenia bardziej złożonych potrzeb. Mamy nadzieję, że na tej podstawie będziesz kontynuować rozwój i tworzyć więcej niesamowitych aplikacji!