104 lines
4.8 KiB
Markdown
104 lines
4.8 KiB
Markdown
# Mon site perso — Frontend
|
||
|
||
Projet frontend de type portfolio/blog basé sur Next.js (App Router) avec React et TypeScript.
|
||
|
||
## Aperçu
|
||
- Application Next.js 15 (App Router) avec React 19 et TypeScript.
|
||
- Styles via Tailwind CSS v4 (PostCSS) + fichiers CSS personnalisés dans `app/css`.
|
||
- Pages/routage dans `app/*` (ex. `/projects`, `/contact`).
|
||
- Une route API côté Next pour relayer la création de projets vers un backend Python/Flask (présumé) : `app/api/projects/route.ts`.
|
||
|
||
## Pile technique (stack)
|
||
- Langage: TypeScript / JavaScript (ESNext)
|
||
- Framework: Next.js 15 (App Router)
|
||
- Bibliothèques: React 19, React DOM 19
|
||
- CSS: Tailwind CSS v4 + PostCSS
|
||
- Gestionnaire de packages: npm (présence de `package-lock.json`)
|
||
|
||
## Prérequis
|
||
- Node.js ≥ 18.17 (recommandé par Next.js) ou Node 20+
|
||
- npm ≥ 9
|
||
|
||
## Installation
|
||
1. Cloner le dépôt.
|
||
2. Installer les dépendances:
|
||
- `npm ci` (recommandé en CI) ou `npm install`
|
||
|
||
## Exécution
|
||
- Développement (Turbopack activé):
|
||
- `npm run dev`
|
||
- Par défaut: http://localhost:3000
|
||
- Build de production:
|
||
- `npm run build`
|
||
- Lancer en production (après build):
|
||
- `npm start`
|
||
|
||
Scripts définis dans `package.json`:
|
||
- `dev`: `next dev --turbopack`
|
||
- `build`: `next build --turbopack`
|
||
- `start`: `next start`
|
||
|
||
## Variables d’environnement
|
||
Fichier exemple détecté: `.env`
|
||
|
||
Variables présentes:
|
||
- `BACKEND_URL` (ex: `"http://127.0.0.1:5000/api"`)
|
||
- Utilisée côté client dans `app/components/Contact.tsx` pour récupérer les contacts (`${BACKEND_URL}/contact`).
|
||
- Attention: côté client, Next.js n’expose que les variables préfixées par `NEXT_PUBLIC_` à l’exécution. Ici `process.env.BACKEND_URL` est lue dans un composant client et sera « inlinée » au build si définie. Si vous souhaitez pouvoir la modifier à l’exécution, préférez `NEXT_PUBLIC_BACKEND_URL` et adaptez le code. TODO: confirmer la stratégie d’exposition des variables et renommer si nécessaire.
|
||
- `API_KEY` (ex: `0`)
|
||
- Lue dans `app/api/projects/route.ts` pour appeler le backend lors d’un POST de création de projet (en-tête `x-api-key`).
|
||
- `CACHE` (ex: `"no-store"`)
|
||
- Indice d’intention pour les requêtes fetch; certains fetch utilisent déjà `cache: "no-store"`.
|
||
- `APP`, `PORTS`
|
||
- Leur utilisation n’a pas été trouvée dans le code frontend. TODO: préciser l’usage ou les supprimer si obsolètes. Note: Next.js lit la variable `PORT` (sans "S") lors du `next start`; `PORTS` n’est pas standard.
|
||
|
||
Conseils:
|
||
- Créez un fichier `.env.local` pour vos valeurs locales (non commitées), et `.env.production` pour la prod.
|
||
- Pour exposer une variable au navigateur de façon sûre via Next.js, utilisez le préfixe `NEXT_PUBLIC_`.
|
||
|
||
## Points d’entrée (entry points) et routage
|
||
- Layout global: `app/layout.tsx` (définit `<html lang="fr">`, le Header et le footer).
|
||
- Pages principales:
|
||
- `app/projects/page.tsx` → `/projects`: liste des projets en provenance du backend (`http://127.0.0.1:5000/api/projects/`).
|
||
- `app/projects/new/page.tsx` → `/projects/new`: formulaire client pour créer un projet (envoie sur `/api/projects`).
|
||
- `app/contact/page.tsx` → `/contact`: affiche `ContactComponent`.
|
||
- Route API Next.js:
|
||
- `app/api/projects/route.ts` (méthode POST): relaie la création vers le backend et ajoute l’en-tête `x-api-key` à partir de `process.env.API_KEY`.
|
||
|
||
## Structure du projet (extrait)
|
||
- `app/`
|
||
- `layout.tsx` (layout global)
|
||
- `components/`
|
||
- `Header.tsx` (en-tête avec bascule clair/sombre)
|
||
- `Contact.tsx` (composant client, fetch vers BACKEND_URL)
|
||
- `contact/page.tsx`
|
||
- `projects/page.tsx`
|
||
- `projects/new/page.tsx`
|
||
- `api/projects/route.ts`
|
||
- `css/` (feuilles de style: `globals.css`, `components.css`, `header_*.css`, etc.)
|
||
- `public/` (assets statiques)
|
||
- `next.config.ts`
|
||
- `postcss.config.mjs` (plugins PostCSS dont `@tailwindcss/postcss`)
|
||
- `tailwind.config` (intégré à Tailwind v4, pas de fichier dédié par défaut)
|
||
- `tsconfig.json`
|
||
- `package.json` / `package-lock.json`
|
||
|
||
## Tests
|
||
Aucun framework de tests n’a été détecté (pas de `jest`, `vitest`, `playwright`, etc.).
|
||
- TODO: choisir un outillage de test (par ex. Playwright pour e2e ou Jest/Vitest pour unitaires) et ajouter des scripts (`test`, `test:e2e`).
|
||
|
||
## Déploiement
|
||
- Générer le build: `npm run build` puis `npm start` pour servir l’app.
|
||
- En hébergement serverless/Edge, se référer à la doc Next.js selon la cible.
|
||
- TODO: préciser la plateforme cible (Vercel, Docker, autre) et la configuration d’environnement (variables, secrets, URL backend).
|
||
|
||
Ressources utiles Next.js:
|
||
- Documentation: https://nextjs.org/docs
|
||
- Déploiement: https://nextjs.org/docs/app/building-your-application/deploying
|
||
|
||
## Licence
|
||
Aucun fichier de licence n’a été trouvé.
|
||
- TODO: ajouter un fichier LICENSE (par ex. MIT, Apache-2.0, etc.) ou préciser la licence du projet.
|
||
|
||
## Auteur
|
||
- © 2025 — Toine / Anthony Violet
|