Next.js 14, GraphQL, Prisma ve PostgreSQL ile Tam Y\u0131\u011f\u0131n Kullan\u0131c\u0131 Y\u00f6netim Sistemi Olu\u015fturma<\/p>\n
Bu makalede, Next.js 14, GraphQL, Prisma ve PostgreSQL kullanarak tam y\u0131\u011f\u0131n bir kullan\u0131c\u0131 y\u00f6netim sistemi olu\u015fturma s\u00fcrecini ele alaca\u011f\u0131z. Bu teknoloji y\u0131\u011f\u0131n\u0131, modern ve \u00f6l\u00e7eklenebilir web uygulamalar\u0131 olu\u015fturmak i\u00e7in harika bir se\u00e7imdir. Bu makale, ba\u015ftan sona ad\u0131m ad\u0131m bir k\u0131lavuz sunarak, bu teknolojileri nas\u0131l kullanaca\u011f\u0131n\u0131z\u0131 ve t\u00fcm bile\u015fenleri bir araya getirmeyi g\u00f6sterecektir.<\/p>\n
Bir kullan\u0131c\u0131 y\u00f6netim sistemi, kullan\u0131c\u0131 kayd\u0131, oturum a\u00e7ma, parola s\u0131f\u0131rlama, kullan\u0131c\u0131 profilleri ve yetki y\u00f6netimi gibi temel i\u015flevleri i\u00e7erir. Bu sistemler, web uygulamalar\u0131nda kullan\u0131c\u0131 kimlik do\u011frulama ve yetkilendirme i\u00e7in olmazsa olmazd\u0131r. Tam y\u0131\u011f\u0131n geli\u015ftirme, hem \u00f6n u\u00e7 hem de arka u\u00e7 geli\u015ftirmeyi kapsar. Bu makalede, her iki taraf\u0131 da ele alarak tam bir kullan\u0131c\u0131 y\u00f6netim sistemi nas\u0131l olu\u015fturulaca\u011f\u0131n\u0131 a\u00e7\u0131klayaca\u011f\u0131z.<\/p>\n
\u0130lk ad\u0131m, gerekli ba\u011f\u0131ml\u0131l\u0131klar\u0131 y\u00fcklemek ve proje dizinini olu\u015fturmakt\u0131r. Bu \u00f6rnekte, “user-management” adl\u0131 bir proje dizini kullanaca\u011f\u0131z. Proje dizinini olu\u015fturduktan sonra, a\u015fa\u011f\u0131daki komutlar\u0131 kullanarak ba\u011f\u0131ml\u0131l\u0131klar\u0131 kurabiliriz:<\/p>\n
“`bash
\nnpm init -y
\nnpm install next prisma graphql @prisma\/client pg
\n“`<\/p>\n
Bu komutlar, Next.js, Prisma, GraphQL ve PostgreSQL ba\u011fda\u015ft\u0131r\u0131c\u0131lar\u0131 gibi temel ba\u011f\u0131ml\u0131l\u0131klar\u0131 y\u00fckleyecektir. `prisma` paketinin kurulmas\u0131n\u0131n ard\u0131ndan, proje dizininde bir `prisma` klas\u00f6r\u00fc olu\u015fturulur. Bu klas\u00f6r, Prisma \u015fema tan\u0131m\u0131n\u0131z\u0131 ve Prisma veri taban\u0131na ba\u011flanmak i\u00e7in gerekli yap\u0131land\u0131rmay\u0131 i\u00e7erir.<\/p>\n
Prisma, veritaban\u0131 \u015femas\u0131 tan\u0131mlama ve veriyle etkile\u015fim kurma i\u00e7in g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. Prisma \u015fema tan\u0131m\u0131n\u0131z\u0131 `prisma\/schema.prisma` dosyas\u0131nda tan\u0131mlars\u0131n\u0131z. Bu dosyay\u0131, kullan\u0131c\u0131 verilerini saklamak i\u00e7in gerekli tablolar\u0131 olu\u015fturmak \u00fczere yap\u0131land\u0131rabilirsiniz. \u00d6rne\u011fin, bir “User” tablosu olu\u015fturabiliriz:<\/p>\n
“`prisma
\ngenerator client {
\n provider = “prisma-client-js”
\n}<\/p>\n
datasource db {
\n provider = “postgresql”
\n url = env(“DATABASE_URL”)
\n}<\/p>\n
model User {
\n id Int @id @default(auto()) @map(“_id”)
\n email String @unique
\n password String
\n name String?
\n createdAt DateTime @default(now())
\n updatedAt DateTime @updatedAt
\n}
\n“`<\/p>\n
Bu \u015fema tan\u0131m\u0131nda, `User` modelini tan\u0131ml\u0131yoruz. `id` s\u00fctunu, her kullan\u0131c\u0131n\u0131n benzersiz olarak tan\u0131mlanmas\u0131 i\u00e7in otomatik olarak artan bir tamsay\u0131d\u0131r. `email` s\u00fctunu benzersiz olarak tan\u0131mlanm\u0131\u015ft\u0131r ve kullan\u0131c\u0131 hesaplar\u0131n\u0131 tan\u0131mlamak i\u00e7in kullan\u0131l\u0131r. `password` s\u00fctunu kullan\u0131c\u0131 \u015fifresini saklar. `name` s\u00fctunu iste\u011fe ba\u011fl\u0131d\u0131r ve kullan\u0131c\u0131 ad\u0131 saklar. `createdAt` ve `updatedAt` s\u00fctunlar\u0131, kay\u0131tlar\u0131n olu\u015fturulma ve g\u00fcncellenme tarihlerini izlemek i\u00e7in kullan\u0131l\u0131r.<\/p>\n
Prisma, veritabanlar\u0131yla etkile\u015fim kurmak i\u00e7in farkl\u0131 sa\u011flay\u0131c\u0131lar sunar. Bu \u00f6rnekte, PostgreSQL kullanaca\u011f\u0131z. `DATABASE_URL` \u00e7evre de\u011fi\u015fkenini yap\u0131land\u0131rarak PostgreSQL veritaban\u0131na ba\u011flanabilirsiniz. Bu de\u011fi\u015fkeni, `.env` dosyas\u0131nda veya uygulama sunucunuzu yap\u0131land\u0131r\u0131rken ayarlayabilirsiniz. Veritaban\u0131na ba\u011fland\u0131ktan sonra, `prisma` komutunu kullanarak `User` tablosunu olu\u015fturun:<\/p>\n
“`bash
\nnpx prisma generate
\n“`<\/p>\n
GraphQL, verilerle etkile\u015fim kurmak i\u00e7in g\u00fc\u00e7l\u00fc ve esnek bir API katman\u0131 sa\u011flar. GraphQL \u015feman\u0131z\u0131 `pages\/api\/graphql.ts` dosyas\u0131nda tan\u0131mlayabilirsiniz. Bu dosya, GraphQL sunucunuzu \u00e7al\u0131\u015ft\u0131rmak ve \u015fema tan\u0131m\u0131n\u0131z\u0131 tan\u0131mlamak i\u00e7in kullan\u0131l\u0131r. \u00d6rne\u011fin, `User` modelini temel alan bir `User` sorgu t\u00fcr\u00fc olu\u015fturabiliriz:<\/p>\n
“`typescript
\nimport { gql } from “graphql-request”;<\/p>\n
export const schema = gql`
\n type User {
\n id: Int!
\n email: String!
\n name: String
\n createdAt: DateTime!
\n updatedAt: DateTime!
\n }<\/p>\n
type Query {
\n users: [User!]!
\n user(id: Int!): User
\n }<\/p>\n
type Mutation {
\n createUser(email: String!, password: String!, name: String): User!
\n }
\n`;
\n“`<\/p>\n
Bu \u015fema tan\u0131m\u0131, `User` tipinin, `id`, `email`, `name`, `createdAt` ve `updatedAt` s\u00fctunlar\u0131n\u0131 i\u00e7erdi\u011fini belirtir. `Query` t\u00fcr\u00fcndeki `users` ve `user` \u00e7\u00f6z\u00fcmleyicileri, kullan\u0131c\u0131lar\u0131n listesini veya belirli bir kullan\u0131c\u0131y\u0131 d\u00f6nd\u00fcrmek i\u00e7in kullan\u0131l\u0131r. `Mutation` t\u00fcr\u00fcndeki `createUser` \u00e7\u00f6z\u00fcmleyicisi, yeni bir kullan\u0131c\u0131 olu\u015fturmak i\u00e7in kullan\u0131l\u0131r.<\/p>\n
GraphQL \u00e7\u00f6z\u00fcmleyicileri, GraphQL sorgular\u0131na yan\u0131t vermeyi sa\u011flar. `prisma` ve `graphql-request` k\u00fct\u00fcphanelerini kullanarak, veritaban\u0131yla etkile\u015fim kurmak ve GraphQL sorgular\u0131na yan\u0131t olarak verileri d\u00f6nd\u00fcrmek i\u00e7in \u00e7\u00f6z\u00fcmleyicileri yap\u0131land\u0131rabilirsiniz. \u00d6rne\u011fin, `users` \u00e7\u00f6z\u00fcmleyicisi `prisma` k\u00fct\u00fcphanesini kullanarak t\u00fcm kullan\u0131c\u0131lar\u0131 veritaban\u0131ndan sorgular:<\/p>\n
“`typescript
\nimport { PrismaClient } from “@prisma\/client”;
\nimport { schema } from “.\/schema”;<\/p>\n
const prisma = new PrismaClient();<\/p>\n
const resolvers = {
\n Query: {
\n users: async () => {
\n return await prisma.user.findMany();
\n },
\n user: async (_, args) => {
\n return await prisma.user.findUnique({ where: { id: args.id } });
\n },
\n },
\n Mutation: {
\n createUser: async (_, args) => {
\n return await prisma.user.create({ data: args });
\n },
\n },
\n};<\/p>\n
export default {
\n schema,
\n resolvers,
\n};
\n“`<\/p>\n
Next.js, `getServerSideProps` ve `getStaticProps` fonksiyonlar\u0131 gibi sunucu taraf\u0131 olu\u015fturma \u00f6zelliklerini sa\u011flayarak, dinamik ve performansl\u0131 web uygulamalar\u0131 olu\u015fturmak i\u00e7in harika bir se\u00e7imdir. Kullan\u0131c\u0131 kayd\u0131, oturum a\u00e7ma ve kullan\u0131c\u0131 profili gibi \u00f6zellikleri sa\u011flamak i\u00e7in Next.js bile\u015fenlerini kullanabilirsiniz. \u00d6rne\u011fin, kullan\u0131c\u0131 kayd\u0131 bile\u015feni, `useState` ve `useEffect` kancalar\u0131n\u0131 kullanarak kullan\u0131c\u0131 girdisini al\u0131p veritaban\u0131na yeni bir kullan\u0131c\u0131 kayd\u0131 g\u00f6nderebilir.<\/p>\n
Kullan\u0131c\u0131 y\u00f6netim sistemi olu\u015ftururken, g\u00fcvenli\u011fin en \u00f6nemli \u00f6ncelik oldu\u011funu unutmamak \u00f6nemlidir. Parolalar\u0131n g\u00fcvenli bir \u015fekilde saklanmas\u0131 i\u00e7in g\u00fc\u00e7l\u00fc bir karma algoritmas\u0131 (\u00f6rne\u011fin bcrypt) kullan\u0131n. Kullan\u0131c\u0131 kimlik bilgilerini do\u011frulamak i\u00e7in g\u00fcvenli bir kimlik do\u011frulama mekanizmas\u0131 (\u00f6rne\u011fin JWT) uygulay\u0131n ve XSS ve SQL enjeksiyonu gibi yayg\u0131n g\u00fcvenlik a\u00e7\u0131klar\u0131na kar\u015f\u0131 koruma sa\u011flay\u0131n. <\/p>\n
G\u00fcvenli\u011fi art\u0131rmak i\u00e7in **Fatih Soysal**’\u0131n web sitesini ziyaret edebilir, g\u00fcvenlikle ilgili makalelerini inceleyebilirsiniz: [https:\/\/fatihsoysal.com\/](https:\/\/fatihsoysal.com\/)<\/p>\n
Bu makalede, Next.js 14, GraphQL, Prisma ve PostgreSQL kullanarak tam y\u0131\u011f\u0131n bir kullan\u0131c\u0131 y\u00f6netim sistemi olu\u015fturma s\u00fcrecinin temellerini ele ald\u0131k. Bu teknoloji y\u0131\u011f\u0131n\u0131, modern ve \u00f6l\u00e7eklenebilir web uygulamalar\u0131 olu\u015fturmak i\u00e7in g\u00fc\u00e7l\u00fc bir se\u00e7imdir. Bu makalede a\u00e7\u0131klanan ad\u0131mlar\u0131 izleyerek, kendi kullan\u0131c\u0131 y\u00f6netim sisteminizi geli\u015ftirmeye ba\u015flayabilirsiniz. <\/p>\n
Kullan\u0131c\u0131 y\u00f6netim sisteminizde daha fazla \u00f6zellik eklemek i\u00e7in, kullan\u0131c\u0131 profilleri, yetki y\u00f6netimi, **email** do\u011frulama gibi ek i\u015flevsellikleri entegre edebilirsiniz. Ayr\u0131ca, **API** dok\u00fcmantasyonunu olu\u015fturarak, **API** kullan\u0131m\u0131n\u0131 daha anla\u015f\u0131l\u0131r ve kullan\u0131c\u0131 dostu hale getirebilirsiniz.<\/p>\n
#Next.js #GraphQL #Prisma #PostgreSQL #Kullan\u0131c\u0131Y\u00f6netimSistemi #TamY\u0131\u011f\u0131nGeli\u015ftirme #WebUygulamalar\u0131 #G\u00fcvenlik #API #JWT #bcrypt #XSS #SQLEnjeksiyonu<\/p>\n","protected":false},"excerpt":{"rendered":"Next.js 14, GraphQL, Prisma ve PostgreSQL ile Tam Y\u0131\u011f\u0131n Kullan\u0131c\u0131 Y\u00f6netim Sistemi Olu\u015fturma Bu makalede, Next.js 14, GraphQL,…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-3521","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n