70 lines
3.4 KiB
Markdown
70 lines
3.4 KiB
Markdown
# 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
|
||
|
||
```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.
|