webTemplate/README.md

70 lines
3.4 KiB
Markdown
Raw Normal View History

2026-08-20 15:55:38 +03:00
# NCR Dashboard — Next.js Template
2026-08-20 15:51:22 +03:00
2026-08-20 15:55:38 +03:00
`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
```bash
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.