Hogyan építsünk modern SaaS alkalmazást Next.js segítségével
2/20/2026
4 min read
# 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!
Regisztráció
setEmail(e.target.value)} /> setPassword(e.target.value)} />Bejelentkezés
setEmail(e.target.value)} /> setPassword(e.target.value)} />Published in Technology
