{"id":39191,"date":"2026-02-16T12:00:44","date_gmt":"2026-02-16T09:00:44","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/next-js-jwt-kimlik-dogrulama-2026da-uygulamanizi-guvenceye-almak-icin-kapsamli-bir-rehber\/"},"modified":"2026-02-16T12:00:44","modified_gmt":"2026-02-16T09:00:44","slug":"next-js-jwt-kimlik-dogrulama-2026da-uygulamanizi-guvenceye-almak-icin-kapsamli-bir-rehber","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/next-js-jwt-kimlik-dogrulama-2026da-uygulamanizi-guvenceye-almak-icin-kapsamli-bir-rehber\/","title":{"rendered":"Next.js JWT Kimlik Do\u011frulama: 2026’da Uygulaman\u0131z\u0131 G\u00fcvenceye Almak \u0130\u00e7in Kapsaml\u0131 Bir Rehber"},"content":{"rendered":"

Next.js JWT Kimlik Do\u011frulama: 2026’da Uygulaman\u0131z\u0131 G\u00fcvenceye Almak \u0130\u00e7in Kapsaml\u0131 Bir Rehber<\/h2>\n

Modern web uygulamalar\u0131 geli\u015ftirmenin vazge\u00e7ilmez arac\u0131 Next.js, sundu\u011fu performans ve geli\u015ftirici deneyimiyle \u00f6ne \u00e7\u0131karken, kullan\u0131c\u0131 g\u00fcvenli\u011fini sa\u011flamak da en kritik \u00f6nceliklerden biridir. 2026 y\u0131l\u0131na do\u011fru ilerlerken, g\u00fcvenlik standartlar\u0131 ve tehdit vekt\u00f6rleri s\u00fcrekli evrilmekte. Bu kapsaml\u0131 rehberde, Next.js uygulamalar\u0131n\u0131z\u0131 JSON Web Token (JWT) kullanarak nas\u0131l g\u00fcvenli bir \u015fekilde kimlik do\u011frulayaca\u011f\u0131n\u0131z\u0131, en g\u00fcncel mimari yakla\u015f\u0131mlar\u0131 ve en iyi g\u00fcvenlik uygulamalar\u0131n\u0131 ele alaca\u011f\u0131z. Amac\u0131m\u0131z, uygulaman\u0131z\u0131n sadece i\u015flevsel de\u011fil, ayn\u0131 zamanda gelece\u011fin g\u00fcvenlik gereksinimlerine uygun olmas\u0131n\u0131 sa\u011flamakt\u0131r.<\/p>\n

Neden Next.js ve JWT Kimlik Do\u011frulama?<\/h3>\n

Next.js’in pop\u00fclaritesi ve JWT’nin modern kimlik do\u011frulama \u00e7\u00f6z\u00fcmlerindeki yeri, bu ikilinin neden ideal bir kombinasyon oldu\u011funu anlamakla ba\u015flar. Her iki teknoloji de web geli\u015ftirmenin gelece\u011fini \u015fekillendiren \u00f6nemli bile\u015fenlerdir.<\/p>\n

Next.js’in Modern Web Geli\u015ftirmedeki Yeri<\/h4>\n

Next.js, React tabanl\u0131 uygulamalar i\u00e7in geli\u015ftirilmi\u015f bir framework olup, sunucu taraf\u0131 renderlama (SSR), statik site olu\u015fturma (SSG) ve yeni App Router ile birlikte gelen sunucu bile\u015fenleri (Server Components) gibi \u00f6zellikleriyle performans, SEO ve geli\u015ftirici verimlili\u011fini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r. Bu \u00f6zellikler, dinamik ve etkile\u015fimli uygulamalar geli\u015ftirmek i\u00e7in g\u00fc\u00e7l\u00fc bir temel sunar. 2026’da, Next.js’in sundu\u011fu hibrit renderlama yetenekleri, hem h\u0131zl\u0131 y\u00fcklenen hem de dinamik i\u00e7eri\u011fe sahip uygulamalar i\u00e7in standart haline gelmeye devam edecektir.<\/p>\n

JWT Nedir ve Neden Tercih Edilir?<\/h4>\n

JSON Web Token (JWT), taraflar aras\u0131nda g\u00fcvenli bir \u015fekilde bilgi iletmek i\u00e7in kullan\u0131lan, kompakt ve URL g\u00fcvenli bir token format\u0131d\u0131r. \u00d6zellikle API tabanl\u0131 uygulamalarda ve mikroservis mimarilerinde pop\u00fclerdir \u00e7\u00fcnk\u00fc durumsuz (stateless) yap\u0131s\u0131 sayesinde sunucunun her istekte oturum bilgisi tutmas\u0131na gerek kalmaz. Bu, sunucu y\u00fck\u00fcn\u00fc azalt\u0131r ve uygulamalar\u0131n yatayda \u00f6l\u00e7eklenmesini kolayla\u015ft\u0131r\u0131r. JWT’ler, bir kullan\u0131c\u0131n\u0131n kimli\u011fini do\u011frulad\u0131ktan sonra istemciye verilen ve sonraki t\u00fcm isteklerde bu kimli\u011fi kan\u0131tlamak i\u00e7in kullan\u0131lan \u015fifreli anahtarlar gibidir.<\/p>\n

Geleneksel Oturum Y\u00f6netimi vs. JWT<\/h4>\n

Geleneksel oturum y\u00f6netimi, sunucu taraf\u0131nda oturum kimlikleri (session IDs) tutarak \u00e7al\u0131\u015f\u0131r. Kullan\u0131c\u0131 giri\u015f yapt\u0131\u011f\u0131nda, sunucu bir oturum olu\u015fturur ve bu oturum kimli\u011fini bir \u00e7erez (cookie) arac\u0131l\u0131\u011f\u0131yla istemciye g\u00f6nderir. Her istekte istemci bu \u00e7erezi g\u00f6nderir ve sunucu oturum kimli\u011fini do\u011frulayarak kullan\u0131c\u0131n\u0131n yetkisini kontrol eder. JWT ise durumsuz bir yakla\u015f\u0131md\u0131r; sunucu, token’\u0131 do\u011frulayarak kullan\u0131c\u0131n\u0131n kimli\u011fini anlar ve herhangi bir oturum verisini sunucu taraf\u0131nda saklamaz. Bu durumsuz yap\u0131, \u00f6zellikle da\u011f\u0131t\u0131k sistemlerde ve API a\u011f ge\u00e7itlerinde b\u00fcy\u00fck avantaj sa\u011flar.<\/p>\n

2026 ve Gelecekteki G\u00fcvenlik Trendleri<\/h4>\n

2026’ya do\u011fru, siber g\u00fcvenlik tehditleri daha sofistike hale gelecek. Bu durum, kimlik do\u011frulama mekanizmalar\u0131m\u0131z\u0131n daha sa\u011flam olmas\u0131n\u0131 gerektiriyor. JWT, do\u011fru uyguland\u0131\u011f\u0131nda g\u00fc\u00e7l\u00fc bir g\u00fcvenlik katman\u0131 sunar. \u00d6zellikle, k\u0131sa \u00f6m\u00fcrl\u00fc eri\u015fim token’lar\u0131 (access tokens) ve uzun \u00f6m\u00fcrl\u00fc yenileme token’lar\u0131 (refresh tokens) kombinasyonu, \u00e7al\u0131nan token’lar\u0131n k\u00f6t\u00fcye kullan\u0131m riskini minimize eder. Ayr\u0131ca, sunucu bile\u015fenlerinin (Server Components) kullan\u0131m\u0131, hassas verilerin istemciye g\u00f6nderilmeden sunucuda i\u015flenmesine olanak tan\u0131yarak yeni g\u00fcvenlik paradigmalar\u0131 sunmaktad\u0131r.<\/p>\n

JWT Kimlik Do\u011frulama Temelleri<\/h3>\n

JWT’nin nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 ve temel bile\u015fenlerini anlamak, g\u00fcvenli bir uygulama geli\u015ftirmek i\u00e7in kritik \u00f6neme sahiptir. Yap\u0131s\u0131, kullan\u0131m mekanizmalar\u0131 ve potansiyel g\u00fcvenlik a\u00e7\u0131klar\u0131 bu b\u00f6l\u00fcmde ele al\u0131nacakt\u0131r.<\/p>\n

JWT Yap\u0131s\u0131: Header, Payload, Signature<\/h4>\n

Bir JWT \u00fc\u00e7 ana b\u00f6l\u00fcmden olu\u015fur ve noktalarla ayr\u0131l\u0131r: header.payload.signature<\/code>.<\/p>\n

* Header (Ba\u015fl\u0131k):<\/strong> Token’\u0131n t\u00fcr\u00fcn\u00fc (\u00f6rne\u011fin, JWT) ve kullan\u0131lan imzalama algoritmas\u0131n\u0131 (\u00f6rne\u011fin, HS256 veya RS256) belirtir. Base64url ile kodlanm\u0131\u015ft\u0131r.
\n* Payload (Y\u00fck):<\/strong> Token’\u0131n iddialar\u0131n\u0131 (claims) i\u00e7erir. Bu iddialar, kullan\u0131c\u0131 hakk\u0131nda bilgiler (\u00f6rne\u011fin, kullan\u0131c\u0131 ID’si, rol\u00fc) ve token’\u0131n son kullanma tarihi gibi meta veriler olabilir. Base64url ile kodlanm\u0131\u015ft\u0131r.
\n* Signature (\u0130mza):<\/strong> Header ve Payload’\u0131n kodlanm\u0131\u015f halleri ile sunucu taraf\u0131nda tutulan gizli bir anahtar kullan\u0131larak olu\u015fturulur. Bu imza, token’\u0131n b\u00fct\u00fcnl\u00fc\u011f\u00fcn\u00fc ve kimli\u011fini do\u011frulamak i\u00e7in kullan\u0131l\u0131r; yani token’\u0131n yol boyunca de\u011fi\u015ftirilmedi\u011fini garanti eder.<\/p>\n

\/\/ \u00d6rnek JWT Payload\n{\n  \"sub\": \"1234567890\",\n  \"name\": \"Kullan\u0131c\u0131 Ad\u0131\",\n  \"admin\": true,\n  \"iat\": 1516239022, \/\/ Issued At\n  \"exp\": 1516242622  \/\/ Expiration Time\n}<\/pre>\n
<\/code><\/p>\n
Access Token ve Refresh Token Mekanizmas\u0131<\/h4>\n
G\u00fcvenli bir JWT uygulamas\u0131 genellikle iki t\u00fcr token kullan\u0131r:<\/p>\n
1.  Access Token (Eri\u015fim Token'\u0131):<\/strong> K\u0131sa \u00f6m\u00fcrl\u00fcd\u00fcr (genellikle 15 dakika - 1 saat). Kullan\u0131c\u0131n\u0131n korunan kaynaklara eri\u015fimini sa\u011flar. Her API iste\u011fiyle birlikte g\u00f6nderilir. K\u0131sa \u00f6m\u00fcrl\u00fc olmas\u0131, \u00e7al\u0131nmas\u0131 durumunda k\u00f6t\u00fcye kullan\u0131m s\u00fcresini s\u0131n\u0131rlar.
\n2.  Refresh Token (Yenileme Token'\u0131):<\/strong> Uzun \u00f6m\u00fcrl\u00fcd\u00fcr (genellikle g\u00fcnler, haftalar veya aylar). Access token s\u00fcresi doldu\u011funda yeni bir access token almak i\u00e7in kullan\u0131l\u0131r. Refresh token'lar genellikle HttpOnly<\/code> ve Secure<\/code> \u00e7erezlerde saklan\u0131r ve daha s\u0131k\u0131 g\u00fcvenlik \u00f6nlemleriyle korunur.<\/p>\n
Bu ayr\u0131m, hem kullan\u0131c\u0131 deneyimini kesintiye u\u011fratmadan s\u00fcrekli eri\u015fim sa\u011flamay\u0131 hem de g\u00fcvenlik risklerini minimize etmeyi ama\u00e7lar.<\/p>\n
G\u00fcvenlik A\u00e7\u0131klar\u0131 ve En \u0130yi Uygulamalar (XSS, CSRF, Depolama)<\/h4>\n
JWT kullan\u0131rken dikkat edilmesi gereken baz\u0131 \u00f6nemli g\u00fcvenlik a\u00e7\u0131klar\u0131 ve bunlara kar\u015f\u0131 al\u0131nacak \u00f6nlemler \u015funlard\u0131r:<\/p>\n
*   XSS (Cross-Site Scripting):<\/strong> K\u00f6t\u00fc niyetli komut dosyalar\u0131n\u0131n kullan\u0131c\u0131 taray\u0131c\u0131s\u0131nda \u00e7al\u0131\u015ft\u0131r\u0131lmas\u0131yla token'lar\u0131n \u00e7al\u0131nmas\u0131 riskini ta\u015f\u0131r. Access token'lar\u0131 localStorage<\/code> yerine HttpOnly<\/code> \u00e7erezlerde saklamak bu riski b\u00fcy\u00fck \u00f6l\u00e7\u00fcde azalt\u0131r.
\n*   CSRF (Cross-Site Request Forgery):<\/strong> Sald\u0131rganlar\u0131n kullan\u0131c\u0131 ad\u0131na istenmeyen eylemler ger\u00e7ekle\u015ftirmesine neden olabilir. CSRF korumas\u0131 i\u00e7in SameSite=Lax<\/code> veya SameSite=Strict<\/code> \u00e7erez \u00f6znitelikleri kullanmak ve\/veya \u00f6zel bir CSRF token'\u0131 uygulamak \u00f6nemlidir.
\n*   Token Depolama:<\/strong> Access token'lar\u0131 localStorage<\/code> veya sessionStorage<\/code>'da saklamak XSS sald\u0131r\u0131lar\u0131na kar\u015f\u0131 savunmas\u0131zd\u0131r. HttpOnly<\/code> ve Secure<\/code> \u00e7erezler, bu t\u00fcr token'lar i\u00e7in daha g\u00fcvenli bir depolama y\u00f6ntemidir. Refresh token'lar kesinlikle bu \u015fekilde saklanmal\u0131d\u0131r.<\/p>\n
Next.js Mimarisi ve JWT Entegrasyonu<\/h3>\n
Next.js'in benzersiz mimarisi, JWT kimlik do\u011frulamas\u0131n\u0131 entegre ederken baz\u0131 \u00f6zel yakla\u015f\u0131mlar gerektirir. \u00d6zellikle App Router, Server Components ve Middleware, bu s\u00fcre\u00e7te \u00f6nemli rol oynar.<\/p>\n
Next.js API Routes ile Backend Entegrasyonu<\/h4>\n
Next.js'in API Routes \u00f6zelli\u011fi, uygulaman\u0131z\u0131n ayn\u0131 proje i\u00e7inde bir backend API'si olu\u015fturmas\u0131na olanak tan\u0131r. Bu, kimlik do\u011frulama i\u015flemlerini (kullan\u0131c\u0131 giri\u015fi, token yenileme, kullan\u0131c\u0131 kayd\u0131) y\u00f6netmek i\u00e7in ideal bir yerdir.<\/p>\n
\/\/ pages\/api\/login.js veya app\/api\/login\/route.js (App Router)\nimport jwt from 'jsonwebtoken';\nimport { serialize } from 'cookie';\n\nexport default async function handler(req, res) {\n  if (req.method !== 'POST') {\n    return res.status(405).json({ message: 'Method Not Allowed' });\n  }\n\n  const { username, password } = req.body;\n\n  \/\/ Kullan\u0131c\u0131 do\u011frulama (\u00f6rne\u011fin, veritaban\u0131ndan)\n  if (username === 'test' && password === 'password') {\n    const accessToken = jwt.sign({ userId: 1, role: 'admin' }, process.env.JWT_SECRET, { expiresIn: '15m' });\n    const refreshToken = jwt.sign({ userId: 1 }, process.env.REFRESH_TOKEN_SECRET, { expiresIn: '7d' });\n\n    \/\/ Refresh token'\u0131 HttpOnly \u00e7ereze ayarla\n    res.setHeader('Set-Cookie', serialize('refreshToken', refreshToken, {\n      httpOnly: true,\n      secure: process.env.NODE_ENV !== 'development', \/\/ HTTPS'te Secure olmal\u0131\n      sameSite: 'Lax',\n      path: '\/',\n      maxAge: 60 * 60 * 24 * 7 \/\/ 7 g\u00fcn\n    }));\n\n    return res.status(200).json({ accessToken });\n  } else {\n    return res.status(401).json({ message: 'Invalid credentials' });\n  }\n}<\/pre>\n
<\/code><\/p>\n
Server Components ve Client Components'ta Kimlik Do\u011frulama<\/h4>\n
Next.js 13+ ile gelen App Router ve Server Components, kimlik do\u011frulama mant\u0131\u011f\u0131n\u0131 farkl\u0131 \u015fekillerde ele almam\u0131z\u0131 sa\u011flar:<\/p>\n
*   Server Components:<\/strong> Hassas verileri do\u011frudan sunucuda i\u015fleyebilir ve istemciye asla g\u00f6ndermeyebilir. \u00d6rne\u011fin, bir kullan\u0131c\u0131n\u0131n yetkili olup olmad\u0131\u011f\u0131n\u0131 sunucuda kontrol edip, buna g\u00f6re UI'\u0131 render edebilirsiniz. Bu, XSS riskini azalt\u0131r.
\n*   Client Components:<\/strong> Kullan\u0131c\u0131 etkile\u015fimi gerektiren k\u0131s\u0131mlar (giri\u015f formu, \u00e7\u0131k\u0131\u015f butonu) i\u00e7in kullan\u0131l\u0131r. Access token'\u0131n istemci taraf\u0131nda y\u00f6netilmesi gerekiyorsa (\u00f6rne\u011fin, API isteklerinin Authorization<\/code> ba\u015fl\u0131\u011f\u0131na eklenmesi), bu bile\u015fenler i\u00e7inde mant\u0131k y\u00fcr\u00fct\u00fclebilir. Ancak, token depolama yine g\u00fcvenli \u00e7erezler arac\u0131l\u0131\u011f\u0131yla yap\u0131lmal\u0131d\u0131r.<\/p>\n
Middleware Kullan\u0131m\u0131yla Eri\u015fim Kontrol\u00fc<\/h4>\n
Next.js Middleware, bir istek tamamlanmadan \u00f6nce kod \u00e7al\u0131\u015ft\u0131rman\u0131za olanak tan\u0131r. Bu, kimlik do\u011frulama kontrol\u00fc ve y\u00f6nlendirme i\u00e7in m\u00fckemmel bir yerdir. Kullan\u0131c\u0131n\u0131n bir sayfaya veya API rotas\u0131na eri\u015fim yetkisinin olup olmad\u0131\u011f\u0131n\u0131 kontrol etmek i\u00e7in kullan\u0131labilir.<\/p>\n
\/\/ middleware.js\nimport { NextResponse } from 'next\/server';\nimport jwt from 'jsonwebtoken';\n\nexport function middleware(request) {\n  const accessToken = request.headers.get('authorization')?.split(' ')[1];\n  const refreshToken = request.cookies.get('refreshToken')?.value;\n\n  \/\/ Public rotalar i\u00e7in bypass\n  if (request.nextUrl.pathname.startsWith('\/login') || request.nextUrl.pathname.startsWith('\/register')) {\n    return NextResponse.next();\n  }\n\n  \/\/ Access token kontrol\u00fc\n  if (accessToken) {\n    try {\n      jwt.verify(accessToken, process.env.JWT_SECRET);\n      return NextResponse.next();\n    } catch (error) {\n      \/\/ Access token ge\u00e7ersiz veya s\u00fcresi dolmu\u015f\n      \/\/ Refresh token ile yeni access token almay\u0131 dene\n      if (refreshToken) {\n        \/\/ Yenileme token'\u0131 ile API'ye istek g\u00f6nder ve yeni access token al\n        \/\/ Bu k\u0131s\u0131m genellikle bir API rotas\u0131 \u00fczerinden yap\u0131l\u0131r\n        \/\/ \u00d6rnek: return NextResponse.redirect(new URL('\/api\/refresh-token', request.url));\n        \/\/ \u015eimdilik sadece yetkisiz olarak i\u015faretleyelim\n      }\n    }\n  }\n\n  \/\/ Hi\u00e7bir token yok veya ge\u00e7ersiz, login sayfas\u0131na y\u00f6nlendir\n  return NextResponse.redirect(new URL('\/login', request.url));\n}\n\nexport const config = {\n  matcher: ['\/((?!api|_next\/static|_next\/image|favicon.ico).*)'], \/\/ Belirli yollar\u0131 koru\n};<\/pre>\n
<\/code><\/p>\n
G\u00fcvenli Token Depolama Stratejileri<\/h4>\n
Daha \u00f6nce belirtildi\u011fi gibi, token'lar\u0131 g\u00fcvenli bir \u015fekilde saklamak hayati \u00f6nem ta\u015f\u0131r:<\/p>\n
*   Access Token:<\/strong> Genellikle istemci taraf\u0131nda API isteklerinin Authorization<\/code> ba\u015fl\u0131\u011f\u0131na eklenmek \u00fczere tutulur. K\u0131sa \u00f6m\u00fcrl\u00fc oldu\u011fu i\u00e7in, memory<\/code> (bellek) veya ge\u00e7ici sessionStorage<\/code> gibi yerlerde tutulabilir, ancak en g\u00fcvenlisi HttpOnly<\/code> olmayan bir \u00e7erezde saklay\u0131p JavaScript ile eri\u015fmektir. E\u011fer HttpOnly \u00e7erezde saklan\u0131rsa, JavaScript do\u011frudan eri\u015femez, bu durumda API isteklerini sunucu taraf\u0131nda (Server Components veya API Routes) proxy'lemek gerekebilir.
\n*   Refresh Token:<\/strong> Kesinlikle HttpOnly<\/code>, Secure<\/code> ve SameSite=Lax<\/code> veya Strict<\/code> \u00f6zelliklerine sahip \u00e7erezlerde saklanmal\u0131d\u0131r. Bu, JavaScript'in token'a do\u011frudan eri\u015fmesini engeller ve XSS sald\u0131r\u0131lar\u0131na kar\u015f\u0131 koruma sa\u011flar.<\/p>\n
Ad\u0131m Ad\u0131m Next.js JWT Kimlik Do\u011frulama Uygulamas\u0131<\/h3>\n
\u015eimdi, yukar\u0131daki teorik bilgileri pratik bir uygulama senaryosuna d\u00f6n\u00fc\u015ft\u00fcrelim. Bu b\u00f6l\u00fcmde, temel bir Next.js JWT kimlik do\u011frulama ak\u0131\u015f\u0131n\u0131 ad\u0131m ad\u0131m nas\u0131l uygulayaca\u011f\u0131n\u0131z\u0131 g\u00f6receksiniz.<\/p>\n
Backend Kurulumu (\u00d6rnek: Node.js\/Express ve jsonwebtoken<\/code>)<\/h4>\n
Basit bir Node.js\/Express backend'i ile JWT olu\u015fturma ve do\u011frulama i\u015flemlerini g\u00f6sterelim.<\/p>\n
1.  Gerekli Paketler:<\/strong><\/p>\n
npm install express jsonwebtoken cookie-parser dotenv<\/pre>\n
<\/code>
\n2.  server.js<\/code> (Basit bir \u00f6rnek):<\/strong><\/p>\n
\/\/ server.js\n    require('dotenv').config();\n    const express = require('express');\n    const jwt = require('jsonwebtoken');\n    const cookieParser = require('cookie-parser');\n\n    const app = express();\n    app.use(express.json());\n    app.use(cookieParser());\n\n    const JWT_SECRET = process.env.JWT_SECRET || 'supersecretjwtkey';\n    const REFRESH_TOKEN_SECRET = process.env.REFRESH_TOKEN_SECRET || 'supersecretrefreshkey';\n\n    app.post('\/api\/login', (req, res) => {\n      const { username, password } = req.body;\n      if (username === 'test' && password === 'password') {\n        const accessToken = jwt.sign({ userId: 1, role: 'user' }, JWT_SECRET, { expiresIn: '15m' });\n        const refreshToken = jwt.sign({ userId: 1 }, REFRESH_TOKEN_SECRET, { expiresIn: '7d' });\n\n        res.cookie('refreshToken', refreshToken, {\n          httpOnly: true,\n          secure: process.env.NODE_ENV === 'production',\n          sameSite: 'Lax',\n          maxAge: 7 * 24 * 60 * 60 * 1000 \/\/ 7 g\u00fcn\n        });\n        return res.json({ accessToken });\n      }\n      res.status(401).json({ message: 'Invalid credentials' });\n    });\n\n    app.post('\/api\/refresh', (req, res) => {\n      const refreshToken = req.cookies.refreshToken;\n      if (!refreshToken) return res.status(401).json({ message: 'No refresh token' });\n\n      jwt.verify(refreshToken, REFRESH_TOKEN_SECRET, (err, user) => {\n        if (err) return res.status(403).json({ message: 'Invalid refresh token' });\n        const newAccessToken = jwt.sign({ userId: user.userId, role: user.role }, JWT_SECRET, { expiresIn: '15m' });\n        res.json({ accessToken: newAccessToken });\n      });\n    });\n\n    app.get('\/api\/protected', (req, res) => {\n      const authHeader = req.headers['authorization'];\n      const token = authHeader && authHeader.split(' ')[1];\n      if (!token) return res.sendStatus(401);\n\n      jwt.verify(token, JWT_SECRET, (err, user) => {\n        if (err) return res.sendStatus(403);\n        res.json({ message: Welcome ${user.userId}, you have access!<\/code> });\n      });\n    });\n\n    app.listen(5000, () => console.log('Backend listening on port 5000'));<\/pre>\n
<\/code><\/p>\n
Next.js Frontend Kurulumu ve Giri\u015f Formu<\/h4>\n
Next.js projenizde bir giri\u015f sayfas\u0131 olu\u015fturun.<\/p>\n
\/\/ app\/login\/page.js (App Router)\n'use client'; \/\/ Bu bir Client Component olacak\n\nimport { useState } from 'react';\nimport { useRouter } from 'next\/navigation';\n\nexport default function LoginPage() {\n  const [username, setUsername] = useState('');\n  const [password, setPassword] = useState('');\n  const [error, setError] = useState('');\n  const router = useRouter();\n\n  const handleSubmit = async (e) => {\n    e.preventDefault();\n    setError('');\n\n    try {\n      const res = await fetch('http:\/\/localhost:5000\/api\/login', { \/\/ Backend API'nize y\u00f6nlendirin\n        method: 'POST',\n        headers: { 'Content-Type': 'application\/json' },\n        body: JSON.stringify({ username, password }),\n      });\n\n      if (res.ok) {\n        const data = await res.json();\n        localStorage.setItem('accessToken', data.accessToken); \/\/ Ge\u00e7ici olarak localStorage'da tutal\u0131m\n        router.push('\/dashboard');\n      } else {\n        const errorData = await res.json();\n        setError(errorData.message || 'Giri\u015f ba\u015far\u0131s\u0131z.');\n      }\n    } catch (err) {\n      setError('Bir hata olu\u015ftu. L\u00fctfen tekrar deneyin.');\n    }\n  };\n\n  return (\n    
\n      
Giri\u015f Yap<\/h2>\n      
\n        
\n