Next.js ile Modern SaaS Uygulaması Nasıl Oluşturulur
2/20/2026
4 min read
# Next.js ile Modern SaaS Uygulaması Nasıl Oluşturulur
Next.js, modern web uygulamaları oluşturmayı daha basit ve verimli hale getiren güçlü bir React çerçevesidir. Bu makalede, Next.js kullanarak basit bir SaaS uygulaması oluşturmayı öğretecek tam bir adım adım kılavuz sunacağız. Geliştirme ortamının kurulmasından temel işlevlerin oluşturulmasına kadar tüm süreci kapsayacağız.
## 1. Ortam Hazırlığı
Başlamadan önce, geliştirme ortamınızın hazır olduğundan emin olmalıyız. Lütfen aşağıdaki adımları izleyin:
### 1.1 Node.js ve npm Kurulumu
Bilgisayarınızda Node.js ve npm'in yüklü olduğundan emin olun. Versiyonu kontrol etmek için terminalde aşağıdaki komutları çalıştırabilirsiniz:
```bash
node -v
npm -v
```
Henüz yüklemediyseniz, [Node.js resmi web sitesinden](https://nodejs.org/) indirip yükleyebilirsiniz.
### 1.2 Next.js Projesi Oluşturma
Terminalde aşağıdaki komutu çalıştırarak yeni bir Next.js projesi oluşturun:
```bash
npx create-next-app@latest my-saas-app
cd my-saas-app
```
Bu, `my-saas-app` adında yeni bir proje oluşturacak ve gerekli bağımlılıkları otomatik olarak yükleyecektir.
## 2. Proje Yapısı
`my-saas-app` dizininde aşağıdaki temel yapıyı göreceksiniz:
```
my-saas-app/
├── pages/
│ ├── api/
│ ├── _app.js
│ ├── index.js
│ └── ...
├── public/
├── styles/
└── ...
```
- **pages/**: Uygulamanın sayfalarını içerir.
- **public/**: Resimler, simgeler gibi genel kaynakları içerir.
- **styles/**: CSS dosyalarını içerir.
## 3. Temel İşlevlerin Oluşturulması
Bu bölümde, basit bir kullanıcı kayıt ve giriş sistemi gerçekleştireceğiz.
### 3.1 Veritabanı Kurulumu
Bu örnekte, arka uç hizmeti olarak Supabase kullanacağız. Lütfen aşağıdaki adımları izleyin:
1. [Supabase resmi web sitesine](https://supabase.io/) gidin ve bir hesap oluşturun.
2. Yeni bir proje oluşturun ve veritabanı URL'nizi ve API anahtarınızı not edin.
3. Veritabanına bağlanın ve aşağıdaki gibi bir kullanıcı tablosu oluşturun:
```sql
create table users (
id serial primary key,
email text unique not null,
password text not null
);
```
### 3.2 Supabase İstemci Kütüphanesini Yükleme
Next.js projesinde Supabase istemci kütüphanesini yükleyin:
```bash
npm install @supabase/supabase-js
```
### 3.3 Kullanıcı Kayıt Sayfası Oluşturma
`pages/` dizininde yeni bir `register.js` dosyası oluşturun ve aşağıdaki içeriği ekleyin:
```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('Kayıt başarılı!');
}
};
return (
);
};
export default Register;
```
### 3.4 Kullanıcı Giriş Sayfası Oluşturma
Aynı şekilde `pages/` dizininde yeni bir `login.js` dosyası oluşturun ve aşağıdaki içeriği ekleyin:
```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('Giriş başarılı!');
}
};
return (
);
};
export default Login;
```
## 4. Uygulamanın Dağıtımı
### 4.1 Dağıtım Platformu Seçimi
Next.js uygulamamızı dağıtmak için Vercel kullanıyoruz. Lütfen aşağıdaki adımları izleyin:
1. [Vercel resmi web sitesine](https://vercel.com/) gidin ve bir hesap oluşturun.
2. Yeni bir proje oluşturun ve GitHub deposunu seçin.
3. Ortam değişkenlerine Supabase URL'sini ve API anahtarını eklediğinizden emin olun.
4. Dağıtım için tıklayın ve Vercel'in dağıtımı tamamlamasını bekleyin.
### 4.2 Dağıtımı Doğrulama
Dağıtım tamamlandıktan sonra, size bir genel URL verilecektir. Bu URL'yi ziyaret edin ve uygulamanın düzgün çalıştığından emin olun.
## 5. Özet
Bu makaledeki adımlarla, Next.js kullanarak basit bir SaaS uygulaması oluşturmayı başardınız; kullanıcı kayıt ve giriş işlevleri dahil. Next.js'in gücü, esnekliği ve verimliliğindedir; daha karmaşık ihtiyaçları karşılamak için kolayca genişletilebilir. Umarım bu temelin üzerine daha fazla derinleşir ve daha etkileyici uygulamalar inşa edersiniz!
Kayıt
setEmail(e.target.value)} /> setPassword(e.target.value)} />Giriş
setEmail(e.target.value)} /> setPassword(e.target.value)} />Published in Technology
