NCR Dashboard — Next.js Template

webNonConformanceReport (CRA + react-router-dom v5 + Light Bootstrap Dashboard) projesinden, gereksiz bağımlılıklar kaldırılarak türetilmiş güncel Next.js (App Router, JavaScript) şablonu.

Kurulum

npm install
cp .env.example .env.local   # NEXT_PUBLIC_API_URL değerini kendi API adresinizle değiştirin
npm run dev

Eskisiyle karşılaştırma

Eski proje	Yeni proje
Create React App + react-scripts	Next.js 15 (App Router)
react-router-dom v5 (Switch, useHistory)	Next.js dosya tabanlı routing (app/), next/navigation
ProtectedRoute.js (route bileşeni)	components/auth/AuthGuard.jsx (dashboard route grubunu sarar)
Bootstrap + react-bootstrap + reactstrap + el yazımı SCSS teması	Tailwind CSS + shadcn/ui birincil (Radix tabanlı, kendi bileşen kodunuz)
Ant Design (antd) — sadece Login sayfasında kullanılıyordu	shadcn/ui Button/Input/Card bileşenleri
@fortawesome/fontawesome-free, nc-icon seti	lucide-react (tree-shakeable, tek ikon seti)
chartist, react-chartist (kullanılmıyordu)	kaldırıldı — ihtiyaç olursa recharts eklenebilir
gulp, gulp-append-prepend (SCSS build script'leri)	kaldırıldı — Tailwind zaten derlemeyi hallediyor
@tanstack/react-table, react-highlight-words, react-notification-alert, @react-hook/media-query, @emotion/*, ajv, jquery (optional)	kaldırıldı — hiçbiri src/ içinde kullanılmıyordu
localStorage üzerinden manuel ncr-user okuma/yazma her dosyada tekrarlanıyordu	store/authSlice.js içinde tek noktadan yönetiliyor (Redux Toolkit korundu)
REACT_APP_BASE_PATH her Route/Link'te elle birleştiriliyordu	next.config.mjs → basePath (tek noktadan, otomatik)
REACT_APP_API_URL + çıplak fetch	NEXT_PUBLIC_API_URL + lib/axios.js (tek axios instance, token interceptor)

Yapı

src/
  app/
    layout.js              kök layout, font + Redux Provider
    login/page.js
    not-authorized/page.js
    not-found.js            genel 404
    (dashboard)/
      layout.js              AuthGuard + Sidebar + Navbar + Footer
      page.js                 Ana sayfa
      ncr-list/page.js
      project/page.js         rol korumalı (QUALITY, ADMINISTRATOR)
      resource/page.js        rol korumalı
      person/page.js          rol korumalı
  components/
    ui/                       shadcn/ui birincil bileşenleri (button, input, card, ...)
    layout/                   Sidebar, Navbar, Footer
    auth/AuthGuard.jsx        oturum + rol kontrolü
  lib/
    routes.js                 sidebar + erişim kontrolü tek kaynağı
    axios.js                  API istemcisi
    utils.js                  `cn()` class birleştirici
  store/
    store.js, authSlice.js    Redux Toolkit

Not

• Kimlik doğrulama halen istemci tarafında localStorage (ncr-user) üzerinden yürütülüyor — eski projeyle aynı model. Sunucu tarafı (middleware/cookie tabanlı) koruma isterseniz AuthGuard yerine middleware.js + httpOnly cookie'ye geçmeniz önerilir.
• ncr-list, project, resource, person sayfaları içerik eklemeniz için boş bırakılmış placeholder'lardır.
• Backend'iniz POST /auth/login isteğine { token, fullName, role, ... } benzeri bir JSON dönüyorsa login akışı olduğu gibi çalışır.