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
|
## Pile technique (stack)
|
||||||
npm run dev
|
- Langage: TypeScript / JavaScript (ESNext)
|
||||||
# or
|
- Framework: Next.js 15 (App Router)
|
||||||
yarn dev
|
- Bibliothèques: React 19, React DOM 19
|
||||||
# or
|
- CSS: Tailwind CSS v4 + PostCSS
|
||||||
pnpm dev
|
- Gestionnaire de packages: npm (présence de `package-lock.json`)
|
||||||
# or
|
|
||||||
bun dev
|
|
||||||
```
|
|
||||||
|
|
||||||
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.
|
Variables présentes:
|
||||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
- `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
|
||||||
|
|
|
||||||
26
frontend/app/api/contact/route.ts
Normal file
26
frontend/app/api/contact/route.ts
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
import { NextResponse } from "next/server";
|
||||||
|
|
||||||
|
export async function GET() {
|
||||||
|
try {
|
||||||
|
const baseUrl = process.env.BACKEND_URL;
|
||||||
|
if (!baseUrl) {
|
||||||
|
return NextResponse.json({ error: "BACKEND_URL not configured" }, { status: 500 });
|
||||||
|
}
|
||||||
|
|
||||||
|
const url = `${baseUrl.replace(/\/$/, "")}/contact`;
|
||||||
|
const res = await fetch(url, { cache: "no-store" });
|
||||||
|
|
||||||
|
if (!res.ok) {
|
||||||
|
return NextResponse.json({ error: "Failed to fetch contact data" }, { status: res.status });
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await res.json();
|
||||||
|
|
||||||
|
// Ensure we only expose expected fields
|
||||||
|
const { email, linkedin, github } = data || {};
|
||||||
|
|
||||||
|
return NextResponse.json({ email, linkedin, github }, { status: 200 });
|
||||||
|
} catch (error) {
|
||||||
|
return NextResponse.json({ error: "Unexpected error" }, { status: 500 });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -19,9 +19,8 @@ export default function ContactComponent() {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!onContactPage) return;
|
if (!onContactPage) return;
|
||||||
|
|
||||||
// Essaye avec BACKEND_URL, sinon fallback vers une route locale hypothétique
|
// Appelle l'API interne Next.js qui proxy vers le BACKEND_URL côté serveur
|
||||||
const backend = (process.env.BACKEND_URL as string) || "http://127.0.0.1:5000/api";
|
const url = "/api/contact";
|
||||||
const url = backend ? `${backend}/contact` : "http://127.0.0.1:5000/api/contact";
|
|
||||||
|
|
||||||
fetch(url, { cache: "no-store" })
|
fetch(url, { cache: "no-store" })
|
||||||
.then((res) => (res.ok ? res.json() : Promise.reject(new Error("fetch contact failed"))))
|
.then((res) => (res.ok ? res.json() : Promise.reject(new Error("fetch contact failed"))))
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,10 @@
|
||||||
async function getProjects() {
|
async function getProjects() {
|
||||||
const res = await fetch("http://127.0.0.1:5000/api/projects/", {
|
const baseUrl = process.env.BACKEND_URL;
|
||||||
|
if (!baseUrl) {
|
||||||
|
throw new Error("Variable d'environnement BACKEND_URL manquante");
|
||||||
|
}
|
||||||
|
|
||||||
|
const res = await fetch(`${baseUrl}/projects/`, {
|
||||||
cache: "no-store",
|
cache: "no-store",
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue