# Hogyan építsünk modern SaaS alkalmazást Next.js segítségével A Next.js egy erőteljes React keretrendszer, amely egyszerűbbé és hatékonyabbá teszi a modern webalkalmazások építését. Ebben a cikkben egy teljes lépésről lépésre útmutatót adunk, amely megmutatja, hogyan használhatod a Next.js-t egy egyszerű SaaS alkalmazás létrehozásához. Áttekintjük a fejlesztési környezet beállításától a alapfunkciók létrehozásáig terjedő folyamatot. ## 1. Környezet előkészítése A kezdés előtt győződj meg róla, hogy a fejlesztési környezeted készen áll. Kérlek, kövesd az alábbi lépéseket: ### 1.1 Node.js és npm telepítése Győződj meg róla, hogy a számítógépeden telepítve van a Node.js és az npm. A verzió ellenőrzéséhez futtathatod a következő parancsokat a terminálban: ```bash node -v npm -v ``` Ha még nem telepítetted, látogass el a [Node.js hivatalos weboldalára](https://nodejs.org/) és töltsd le, majd telepítsd. ### 1.2 Next.js projekt létrehozása Futtasd a következő parancsot a terminálban egy új Next.js projekt létrehozásához: ```bash npx create-next-app@latest my-saas-app cd my-saas-app ``` Ez létrehoz egy új projektet `my-saas-app` néven, és automatikusan telepíti a szükséges függőségeket. ## 2. Projekt struktúra A `my-saas-app` könyvtárban az alábbi alapstruktúrát fogod látni: ``` my-saas-app/ ├── pages/ │ ├── api/ │ ├── _app.js │ ├── index.js │ └── ... ├── public/ ├── styles/ └── ... ``` - **pages/**: Az alkalmazás oldalait tartalmazza. - **public/**: Nyilvános erőforrásokat, például képeket, ikonokat stb. tartalmaz. - **styles/**: CSS fájlokat tartalmaz. ## 3. Alapfunkciók létrehozása Ebben a szakaszban egy egyszerű felhasználói regisztrációs és bejelentkezési rendszert fogunk megvalósítani. ### 3.1 Adatbázis beállítása Ebben a példában a Supabase-t használjuk háttérszolgáltatásként. Kérlek, kövesd az alábbi lépéseket: 1. Látogass el a [Supabase hivatalos weboldalára](https://supabase.io/) és hozz létre egy fiókot. 2. Hozz létre egy új projektet, és jegyezd fel az adatbázis URL-jét és az API kulcsot. 3. Csatlakozz az adatbázishoz, és hozd létre az alábbi felhasználói táblát: ```sql create table users ( id serial primary key, email text unique not null, password text not null ); ``` ### 3.2 Supabase kliens telepítése Telepítsd a Supabase kliens könyvtárat a Next.js projektbe: ```bash npm install @supabase/supabase-js ``` ### 3.3 Felhasználói regisztrációs oldal létrehozása A `pages/` könyvtárban hozz létre egy új fájlt `register.js` néven, és add hozzá a következő tartalmat: ```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('Sikeres regisztráció!'); } }; return ( ); }; export default Register; ``` ### 3.4 Felhasználói bejelentkezési oldal létrehozása Ugyanígy a `pages/` könyvtárban hozz létre egy új fájlt `login.js` néven, és add hozzá a következő tartalmat: ```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('Sikeres bejelentkezés!'); } }; return ( ); }; export default Login; ``` ## 4. Alkalmazás telepítése ### 4.1 Telepítési platform kiválasztása A Next.js alkalmazásunk telepítéséhez a Vercel-t használjuk. Kérlek, kövesd az alábbi lépéseket: 1. Látogass el a [Vercel hivatalos weboldalára](https://vercel.com/) és regisztrálj egy fiókot. 2. Hozz létre egy új projektet, és válaszd ki a GitHub tárolódat. 3. Győződj meg róla, hogy a környezeti változók között hozzáadtad a Supabase URL-t és az API kulcsot. 4. Kattints a telepítésre, és várd meg, amíg a Vercel befejezi a telepítést. ### 4.2 Telepítés ellenőrzése A telepítés befejezése után kapsz egy nyilvános URL-t. Látogass el erre az URL-re, és győződj meg róla, hogy az alkalmazás megfelelően működik. ## 5. Összegzés A cikk lépésein keresztül sikeresen létrehoztál egy egyszerű SaaS alkalmazást Next.js segítségével, beleértve a felhasználói regisztrációs és bejelentkezési funkciókat. A Next.js ereje a rugalmasságában és hatékonyságában rejlik, amely lehetővé teszi, hogy könnyen bővítsd a komplexebb igények kielégítésére. Reméljük, hogy ezen az alapon tovább mélyítheted tudásodat, és még több lenyűgöző alkalmazást építhetsz!