Next.js 14, GraphQL, Prisma ve PostgreSQL ile Tam Yığın Kullanıcı Yönetim Sistemi Oluşturma
Bu makalede, Next.js 14, GraphQL, Prisma ve PostgreSQL kullanarak tam yığın bir kullanıcı yönetim sistemi oluşturma sürecini ele alacağız. Bu teknoloji yığını, modern ve ölçeklenebilir web uygulamaları oluşturmak için harika bir seçimdir. Bu makale, baştan sona adım adım bir kılavuz sunarak, bu teknolojileri nasıl kullanacağınızı ve tüm bileşenleri bir araya getirmeyi gösterecektir.
Giriş
Bir kullanıcı yönetim sistemi, kullanıcı kaydı, oturum açma, parola sıfırlama, kullanıcı profilleri ve yetki yönetimi gibi temel işlevleri içerir. Bu sistemler, web uygulamalarında kullanıcı kimlik doğrulama ve yetkilendirme için olmazsa olmazdır. Tam yığın geliştirme, hem ön uç hem de arka uç geliştirmeyi kapsar. Bu makalede, her iki tarafı da ele alarak tam bir kullanıcı yönetim sistemi nasıl oluşturulacağını açıklayacağız.
Proje Kurulumu
İlk adım, gerekli bağımlılıkları yüklemek ve proje dizinini oluşturmaktır. Bu örnekte, “user-management” adlı bir proje dizini kullanacağız. Proje dizinini oluşturduktan sonra, aşağıdaki komutları kullanarak bağımlılıkları kurabiliriz:
“`bash
npm init -y
npm install next prisma graphql @prisma/client pg
“`
Bu komutlar, Next.js, Prisma, GraphQL ve PostgreSQL bağdaştırıcıları gibi temel bağımlılıkları yükleyecektir. `prisma` paketinin kurulmasının ardından, proje dizininde bir `prisma` klasörü oluşturulur. Bu klasör, Prisma şema tanımınızı ve Prisma veri tabanına bağlanmak için gerekli yapılandırmayı içerir.
Prisma Şeması
Prisma, veritabanı şeması tanımlama ve veriyle etkileşim kurma için güçlü bir araçtır. Prisma şema tanımınızı `prisma/schema.prisma` dosyasında tanımlarsınız. Bu dosyayı, kullanıcı verilerini saklamak için gerekli tabloları oluşturmak üzere yapılandırabilirsiniz. Örneğin, bir “User” tablosu oluşturabiliriz:
“`prisma
generator client {
provider = “prisma-client-js”
}
datasource db {
provider = “postgresql”
url = env(“DATABASE_URL”)
}
model User {
id Int @id @default(auto()) @map(“_id”)
email String @unique
password String
name String?
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
“`
Bu şema tanımında, `User` modelini tanımlıyoruz. `id` sütunu, her kullanıcının benzersiz olarak tanımlanması için otomatik olarak artan bir tamsayıdır. `email` sütunu benzersiz olarak tanımlanmıştır ve kullanıcı hesaplarını tanımlamak için kullanılır. `password` sütunu kullanıcı şifresini saklar. `name` sütunu isteğe bağlıdır ve kullanıcı adı saklar. `createdAt` ve `updatedAt` sütunları, kayıtların oluşturulma ve güncellenme tarihlerini izlemek için kullanılır.
PostgreSQL Veritabanı Yapılandırması
Prisma, veritabanlarıyla etkileşim kurmak için farklı sağlayıcılar sunar. Bu örnekte, PostgreSQL kullanacağız. `DATABASE_URL` çevre değişkenini yapılandırarak PostgreSQL veritabanına bağlanabilirsiniz. Bu değişkeni, `.env` dosyasında veya uygulama sunucunuzu yapılandırırken ayarlayabilirsiniz. Veritabanına bağlandıktan sonra, `prisma` komutunu kullanarak `User` tablosunu oluşturun:
“`bash
npx prisma generate
“`
GraphQL Şeması
GraphQL, verilerle etkileşim kurmak için güçlü ve esnek bir API katmanı sağlar. GraphQL şemanızı `pages/api/graphql.ts` dosyasında tanımlayabilirsiniz. Bu dosya, GraphQL sunucunuzu çalıştırmak ve şema tanımınızı tanımlamak için kullanılır. Örneğin, `User` modelini temel alan bir `User` sorgu türü oluşturabiliriz:
“`typescript
import { gql } from “graphql-request”;
export const schema = gql`
type User {
id: Int!
email: String!
name: String
createdAt: DateTime!
updatedAt: DateTime!
}
type Query {
users: [User!]!
user(id: Int!): User
}
type Mutation {
createUser(email: String!, password: String!, name: String): User!
}
`;
“`
Bu şema tanımı, `User` tipinin, `id`, `email`, `name`, `createdAt` ve `updatedAt` sütunlarını içerdiğini belirtir. `Query` türündeki `users` ve `user` çözümleyicileri, kullanıcıların listesini veya belirli bir kullanıcıyı döndürmek için kullanılır. `Mutation` türündeki `createUser` çözümleyicisi, yeni bir kullanıcı oluşturmak için kullanılır.
GraphQL Çözümleyicileri
GraphQL çözümleyicileri, GraphQL sorgularına yanıt vermeyi sağlar. `prisma` ve `graphql-request` kütüphanelerini kullanarak, veritabanıyla etkileşim kurmak ve GraphQL sorgularına yanıt olarak verileri döndürmek için çözümleyicileri yapılandırabilirsiniz. Örneğin, `users` çözümleyicisi `prisma` kütüphanesini kullanarak tüm kullanıcıları veritabanından sorgular:
“`typescript
import { PrismaClient } from “@prisma/client”;
import { schema } from “./schema”;
const prisma = new PrismaClient();
const resolvers = {
Query: {
users: async () => {
return await prisma.user.findMany();
},
user: async (_, args) => {
return await prisma.user.findUnique({ where: { id: args.id } });
},
},
Mutation: {
createUser: async (_, args) => {
return await prisma.user.create({ data: args });
},
},
};
export default {
schema,
resolvers,
};
“`
Next.js Ön Uç
Next.js, `getServerSideProps` ve `getStaticProps` fonksiyonları gibi sunucu tarafı oluşturma özelliklerini sağlayarak, dinamik ve performanslı web uygulamaları oluşturmak için harika bir seçimdir. Kullanıcı kaydı, oturum açma ve kullanıcı profili gibi özellikleri sağlamak için Next.js bileşenlerini kullanabilirsiniz. Örneğin, kullanıcı kaydı bileşeni, `useState` ve `useEffect` kancalarını kullanarak kullanıcı girdisini alıp veritabanına yeni bir kullanıcı kaydı gönderebilir.
Güvenlik
Kullanıcı yönetim sistemi oluştururken, güvenliğin en önemli öncelik olduğunu unutmamak önemlidir. Parolaların güvenli bir şekilde saklanması için güçlü bir karma algoritması (örneğin bcrypt) kullanın. Kullanıcı kimlik bilgilerini doğrulamak için güvenli bir kimlik doğrulama mekanizması (örneğin JWT) uygulayın ve XSS ve SQL enjeksiyonu gibi yaygın güvenlik açıklarına karşı koruma sağlayın.
Güvenliği artırmak için **Fatih Soysal**’ın web sitesini ziyaret edebilir, güvenlikle ilgili makalelerini inceleyebilirsiniz: [https://fatihsoysal.com/](https://fatihsoysal.com/)
Sonuç
Bu makalede, Next.js 14, GraphQL, Prisma ve PostgreSQL kullanarak tam yığın bir kullanıcı yönetim sistemi oluşturma sürecinin temellerini ele aldık. Bu teknoloji yığını, modern ve ölçeklenebilir web uygulamaları oluşturmak için güçlü bir seçimdir. Bu makalede açıklanan adımları izleyerek, kendi kullanıcı yönetim sisteminizi geliştirmeye başlayabilirsiniz.
Kullanıcı yönetim sisteminizde daha fazla özellik eklemek için, kullanıcı profilleri, yetki yönetimi, **email** doğrulama gibi ek işlevsellikleri entegre edebilirsiniz. Ayrıca, **API** dokümantasyonunu oluşturarak, **API** kullanımını daha anlaşılır ve kullanıcı dostu hale getirebilirsiniz.
#Etiketler
#Next.js #GraphQL #Prisma #PostgreSQL #KullanıcıYönetimSistemi #TamYığınGeliştirme #WebUygulamaları #Güvenlik #API #JWT #bcrypt #XSS #SQLEnjeksiyonu