# 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 ``, 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