ajout du fichier de route
This commit is contained in:
parent
c851865728
commit
ef1ba911d9
4 changed files with 125 additions and 27 deletions
|
|
@ -1,36 +1,104 @@
|
|||
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
|
||||
# Mon site perso — Frontend
|
||||
|
||||
## Getting Started
|
||||
Projet frontend de type portfolio/blog basé sur Next.js (App Router) avec React et TypeScript.
|
||||
|
||||
First, run the development server:
|
||||
## 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`.
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
# or
|
||||
yarn dev
|
||||
# or
|
||||
pnpm dev
|
||||
# or
|
||||
bun dev
|
||||
```
|
||||
## 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`)
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
## Prérequis
|
||||
- Node.js ≥ 18.17 (recommandé par Next.js) ou Node 20+
|
||||
- npm ≥ 9
|
||||
|
||||
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
||||
## Installation
|
||||
1. Cloner le dépôt.
|
||||
2. Installer les dépendances:
|
||||
- `npm ci` (recommandé en CI) ou `npm install`
|
||||
|
||||
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
|
||||
## 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`
|
||||
|
||||
## Learn More
|
||||
Scripts définis dans `package.json`:
|
||||
- `dev`: `next dev --turbopack`
|
||||
- `build`: `next build --turbopack`
|
||||
- `start`: `next start`
|
||||
|
||||
To learn more about Next.js, take a look at the following resources:
|
||||
## Variables d’environnement
|
||||
Fichier exemple détecté: `.env`
|
||||
|
||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||
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.
|
||||
|
||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
|
||||
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_`.
|
||||
|
||||
## Deploy on Vercel
|
||||
## 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`.
|
||||
|
||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
||||
## 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`
|
||||
|
||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
|
||||
## 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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue