Kuidas kasutada Next.js moodsa SaaS rakenduse ehitamiseks
2/20/2026
4 min read
# Kuidas kasutada Next.js moodsa SaaS rakenduse ehitamiseks
Next.js on võimas React raamistik, mis muudab kaasaegsete veebirakenduste loomise lihtsamaks ja tõhusamaks. Selles artiklis anname täieliku samm-sammult juhendi, kuidas kasutada Next.js lihtsa SaaS rakenduse ehitamiseks. Käsitleme kogu protsessi arenduskeskkonna seadistamisest kuni põhifunktsioonide loomisega.
## 1. Keskkonna ettevalmistamine
Enne alustamist peame veenduma, et sinu arenduskeskkond on valmis. Palun järgi järgmisi samme:
### 1.1 Node.js ja npm installimine
Veendu, et sinu arvutis on installitud Node.js ja npm. Sa saad versiooni kontrollida, käivitades terminalis järgmised käsud:
```bash
node -v
npm -v
```
Kui sul pole neid veel installitud, mine [Node.js ametlikule lehele](https://nodejs.org/) ja laadi alla ning installi.
### 1.2 Next.js projekti loomine
Käivita terminalis järgmine käsk, et luua uus Next.js projekt:
```bash
npx create-next-app@latest my-saas-app
cd my-saas-app
```
See loob uue projekti nimega `my-saas-app` ja installib automaatselt vajalikud sõltuvused.
## 2. Projekti struktuur
Kataloogis `my-saas-app` näed järgmisi põhistruktuure:
```
my-saas-app/
├── pages/
│ ├── api/
│ ├── _app.js
│ ├── index.js
│ └── ...
├── public/
├── styles/
└── ...
```
- **pages/**: rakenduse lehtede hoidla.
- **public/**: avalike ressursside, nagu pildid ja ikoonid, hoidla.
- **styles/**: CSS failide hoidla.
## 3. Tuumfunktsioonide loomine
Selles osas rakendame lihtsa kasutajate registreerimise ja sisselogimise süsteemi.
### 3.1 Andmebaasi seadistamine
Selles näites kasutame Supabase'i tagapinnana. Palun järgi järgmisi samme:
1. Mine [Supabase ametlikule lehele](https://supabase.io/) ja loo konto.
2. Loo uus projekt ja märgi üles oma andmebaasi URL ja API võti.
3. Ühenda andmebaasiga ja loo järgmine kasutajate tabel:
```sql
create table users (
id serial primary key,
email text unique not null,
password text not null
);
```
### 3.2 Supabase kliendi installimine
Installeeri Next.js projekti Supabase'i kliendi teek:
```bash
npm install @supabase/supabase-js
```
### 3.3 Kasutajate registreerimise lehe loomine
Kataloogis `pages/` loo uus fail `register.js` ja lisa järgmine sisu:
```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('Registreerimine õnnestus!');
}
};
return (
);
};
export default Register;
```
### 3.4 Kasutajate sisselogimise lehe loomine
Samuti kataloogis `pages/` loo uus fail `login.js` ja lisa järgmine sisu:
```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('Sisselogimine õnnestus!');
}
};
return (
);
};
export default Login;
```
## 4. Rakenduse juurutamine
### 4.1 Juhtimisplatvormi valimine
Kasutame Verceli, et juurutada meie Next.js rakendus. Palun järgi järgmisi samme:
1. Mine [Vercel ametlikule lehele](https://vercel.com/) ja registreeri konto.
2. Loo uus projekt ja vali oma GitHubi hoidla.
3. Veendu, et oled keskkonnamuutujatesse lisanud Supabase'i URL ja API võtme.
4. Klõpsa juurutamisel ja oota, kuni Vercel lõpetab juurutamise.
### 4.2 Juurutamise kontrollimine
Pärast juurutamist saad avaliku URL-i. Külastage seda URL-i, et veenduda, et rakendus töötab korralikult.
## 5. Kokkuvõte
Selle artikli sammude abil oled sa edukalt kasutanud Next.js lihtsa SaaS rakenduse ehitamiseks, sealhulgas kasutajate registreerimise ja sisselogimise funktsioone. Next.js tugevus seisneb selle paindlikkuses ja tõhususes, võimaldades hõlpsasti laiendada keerukamate nõudmiste rahuldamiseks. Loodan, et saad selle alusel edasi minna ja luua veelgi hämmastavamaid rakendusi!
Registreerimine
setEmail(e.target.value)} /> setPassword(e.target.value)} />Sisselogimine
setEmail(e.target.value)} /> setPassword(e.target.value)} />Published in Technology
