# Créer un nouveau projet Laravel 11
composer create-project laravel/laravel cms-api "^11.0"
cd cms-api

# Installer Sanctum (inclus par défaut en L11, mais on le publie)
php artisan install:api

# Installer les packages utilitaires
composer require spatie/laravel-query-builder spatie/laravel-data

# Configurer la BDD dans .env
cp .env.example .env
php artisan key:generate

APP_NAME="CMS API"
APP_ENV=production
APP_DEBUG=false
APP_URL=https://api.votredomaine.com

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=cms_db
DB_USERNAME=cms_user
DB_PASSWORD=VotreMotDePasseFort123!

CACHE_DRIVER=redis
QUEUE_CONNECTION=redis
SESSION_DRIVER=redis

# CORS — autoriser uniquement votre domaine Next.js
FRONTEND_URL=https://votre-app.vercel.app

SANCTUM_STATEFUL_DOMAINS=votre-app.vercel.app

php artisan make:model Post -mfsc
# -m : migration | -f : factory | -s : seeder | -c : controller

php artisan make:model Category -mfsc

public function up(): void
{
    Schema::create('posts', function (Blueprint $table) {
        $table->id();
        $table->foreignId('user_id')->constrained()->cascadeOnDelete();
        $table->foreignId('category_id')->nullable()->constrained()->nullOnDelete();
        $table->string('title');
        $table->string('slug')->unique();
        $table->longText('content');
        $table->text('excerpt')->nullable();
        $table->string('cover_image')->nullable();
        // Champs SEO dédiés
        $table->string('meta_title')->nullable();
        $table->text('meta_description')->nullable();
        $table->json('og_data')->nullable(); // Open Graph custom
        // Statut & publication
        $table->enum('status', ['draft', 'published', 'archived'])->default('draft');
        $table->timestamp('published_at')->nullable();
        $table->unsignedInteger('views_count')->default(0);
        $table->timestamps();
        $table->softDeletes();
        // Index pour les requêtes fréquentes
        $table->index(['status', 'published_at']);
        $table->fullText(['title', 'content']); // Recherche full-text
    });
}

class Post extends Model
{
    use HasFactory, SoftDeletes;

    protected $fillable = [
        'user_id', 'category_id', 'title', 'slug',
        'content', 'excerpt', 'cover_image',
        'meta_title', 'meta_description', 'og_data',
        'status', 'published_at',
    ];

    protected function casts(): array
    {
        return [
            'published_at' => 'datetime',
            'og_data'      => 'array',
        ];
    }

    // Scope pratique pour les posts publiés
    public function scopePublished(Builder $query): Builder
    {
        return $query
            ->where('status', 'published')
            ->where('published_at', '<=', now())
            ->orderByDesc('published_at');
    }

    // Auto-génération du slug si absent
    protected static function boot(): void
    {
        parent::boot();
        static::creating(function (Post $post) {
            if (! $post->slug) {
                $post->slug = Str::slug($post->title);
            }
        });
    }

    // Relations
    public function author(): BelongsTo
    {
        return $this->belongsTo(User::class, 'user_id');
    }

    public function category(): BelongsTo
    {
        return $this->belongsTo(Category::class);
    }
}

class AuthController extends Controller
{
    public function login(LoginRequest $request): JsonResponse
    {
        if (! Auth::attempt($request->only('email', 'password'))) {
            return response()->json([
                'message' => 'Identifiants invalides.',
            ], 401);
        }

        $user = User::where('email', $request->email)->firstOrFail();

        // Révoquer les anciens tokens pour ce device
        $user->tokens()->where('name', $request->input('device_name', 'web'))->delete();

        $token = $user->createToken(
            name: $request->input('device_name', 'web'),
            abilities: ['*'],
            expiresAt: now()->addDays(30), // Expiration 30 jours
        );

        return response()->json([
            'token'    => $token->plainTextToken,
            'user'     => new UserResource($user),
            'expires_at' => $token->accessToken->expires_at,
        ]);
    }

    public function me(Request $request): JsonResponse
    {
        return response()->json(new UserResource($request->user()->load('profile')));
    }

    public function logout(Request $request): JsonResponse
    {
        $request->user()->currentAccessToken()->delete();

        return response()->json(['message' => 'Déconnecté avec succès.']);
    }
}

class PostResource extends JsonResource
{
    public function toArray(Request $request): array
    {
        return [
            'id'               => $this->id,
            'title'            => $this->title,
            'slug'             => $this->slug,
            'excerpt'          => $this->excerpt,
            'cover_image_url'  => $this->cover_image
                                        ? Storage::url($this->cover_image)
                                        : null,
            'status'           => $this->status,
            'published_at'     => $this->published_at?->toISOString(),
            'reading_time'     => $this->getReadingTime(),
            // Relations conditionnelles (chargées seulement si incluses)
            'author'           => new UserResource($this->whenLoaded('author')),
            'category'         => new CategoryResource($this->whenLoaded('category')),
            // Contenu riche seulement sur l'endpoint /posts/{slug}
            $this->mergeWhen($request->routeIs('posts.show'), [
                'content'          => $this->content,
                'meta_title'       => $this->meta_title ?? $this->title,
                'meta_description' => $this->meta_description ?? $this->excerpt,
                'og_data'          => $this->og_data,
            ]),
        ];
    }

    private function getReadingTime(): int
    {
        $words = str_word_count(strip_tags($this->content ?? ''));
        return (int) ceil($words / 200); // ~200 mots/minute
    }
}

use Spatie\QueryBuilder\QueryBuilder;
use Spatie\QueryBuilder\AllowedFilter;

class PostController extends Controller
{
    public function index(Request $request): AnonymousResourceCollection
    {
        $posts = QueryBuilder::for(Post::published()->with(['author', 'category']))
            ->allowedFilters([
                AllowedFilter::exact('category.slug', 'category_id'),
                AllowedFilter::scope('search'), // Scope fulltext
            ])
            ->allowedSorts(['published_at', 'views_count', 'title'])
            ->defaultSort('-published_at')
            ->paginate($request->integer('per_page', 12))
            ->appends($request->query());

        return PostResource::collection($posts);
    }

    public function show(Post $post): PostResource
    {
        abort_if($post->status !== 'published', 404);

        // Incrément views_count de manière asynchrone via un Job
        IncrementPostViews::dispatch($post);

        return new PostResource(
            $post->load(['author.profile', 'category'])
        );
    }
}

npx create-next-app@latest cms-frontend \
  --typescript \
  --tailwind \
  --eslint \
  --app \
  --src-dir \
  --import-alias "@/*"

cd cms-frontend

# Packages essentiels
npm install jose next-themes zustand @tanstack/react-query
npm install -D @types/node

src/
├── app/
│   ├── (auth)/               # Route group — pages auth (sans layout blog)
│   │   ├── login/page.tsx
│   │   └── register/page.tsx
│   ├── (blog)/               # Route group — pages publiques
│   │   ├── layout.tsx        # Layout avec header/footer
│   │   ├── page.tsx          # Home — liste des posts
│   │   ├── [category]/
│   │   │   └── page.tsx
│   │   └── posts/
│   │       └── [slug]/
│   │           └── page.tsx  # Article individuel — ISR
│   ├── api/                  # Route Handlers Next.js
│   │   └── auth/
│   │       ├── login/route.ts
│   │       └── logout/route.ts
│   ├── layout.tsx            # Root layout
│   └── globals.css
├── components/
│   ├── ui/                   # Composants atomiques (Button, Card…)
│   ├── blog/                 # Composants métier blog
│   └── layout/               # Header, Footer, Nav…
├── lib/
│   ├── api.ts                # Client API Laravel centralisé
│   ├── auth.ts               # Helpers authentification
│   └── utils.ts
├── hooks/                    # Custom hooks (Client Components)
└── types/                    # Types TypeScript partagés

const API_URL = process.env.LARAVEL_API_URL ?? 'http://localhost:8000/api';

type FetchOptions = RequestInit & {
  token?: string;
  tags?: string[];
  revalidate?: number | false;
};

export async function apiClient<T>(
  endpoint: string,
  options: FetchOptions = {}
): Promise<T> {
  const { token, tags, revalidate = 3600, ...rest } = options;

  const headers: HeadersInit = {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
    'X-Requested-With': 'XMLHttpRequest',
    ...(token ? { 'Authorization': `Bearer ${token}` } : {}),
  };

  const response = await fetch(`${API_URL}/${endpoint}`, {
    ...rest,
    headers,
    // Cache Next.js — revalidation granulaire par tag
    next: {
      revalidate,
      ...(tags ? { tags } : {}),
    },
  });

  if (!response.ok) {
    const error = await response.json().catch(() => ({}));
    throw new Error(error.message ?? `HTTP ${response.status}`);
  }

  return response.json();
}

// Fonctions métier typées
export const postsApi = {
  list: (params?: URLSearchParams) =>
    apiClient<PaginatedResponse<Post>>(
      `posts?${params?.toString() ?? ''}`,
      { tags: ['posts'], revalidate: 300 }
    ),
  show: (slug: string) =>
    apiClient<Post>(
      `posts/${slug}`,
      { tags: [`post-${slug}`], revalidate: 3600 }
    ),
};

import { Suspense } from 'react';
import type { Metadata } from 'next';
import { postsApi } from '@/lib/api';
import { PostCard, PostCardSkeleton } from '@/components/blog';

export const metadata: Metadata = {
  title: 'Blog — Derniers articles',
  description: 'Découvrez nos derniers tutoriels et guides sur le développement web moderne.',
};

// Ce composant EST un Server Component — aucun JS envoyé au client
export default async function HomePage({
  searchParams,
}: {
  searchParams: Promise<Record<string, string>>;
}) {
  const params = await searchParams;
  const urlParams = new URLSearchParams(params);

  // Fetch parallèle — featured + liste paginée
  const [featured, posts] = await Promise.all([
    postsApi.list(new URLSearchParams({ sort: '-views_count', per_page: '1' })),
    postsApi.list(urlParams),
  ]);

  return (
    <main>
      <FeaturedPost post={featured.data[0]} />
      <Suspense fallback={<PostCardSkeleton count={12} />}>
        <section className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {posts.data.map((post) => (
            <PostCard key={post.id} post={post} />
          ))}
        </section>
        <Pagination meta={posts.meta} />
      </Suspense>
    </main>
  );
}

import { cookies } from 'next/headers';
import { NextResponse } from 'next/server';

export async function POST(request: Request) {
  const body = await request.json();

  // Appel à l'API Laravel
  const res = await fetch(`${process.env.LARAVEL_API_URL}/auth/login`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ ...body, device_name: 'web' }),
  });

  if (!res.ok) {
    const error = await res.json();
    return NextResponse.json(error, { status: res.status });
  }

  const data = await res.json();

  // Stocker le token dans un httpOnly cookie sécurisé
  const cookieStore = await cookies();
  cookieStore.set({
    name: 'auth_token',
    value: data.token,
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production',
    sameSite: 'strict',
    path: '/',
    maxAge: 60 * 60 * 24 * 30, // 30 jours
  });

  return NextResponse.json({ user: data.user });
}

import { NextRequest, NextResponse } from 'next/server';

const PROTECTED_PATHS = ['/dashboard', '/admin', '/profile'];
const AUTH_PATHS     = ['/login', '/register'];

export function middleware(request: NextRequest) {
  const token     = request.cookies.get('auth_token')?.value;
  const { pathname } = request.nextUrl;

  const isProtected = PROTECTED_PATHS.some((p) => pathname.startsWith(p));
  const isAuthPage  = AUTH_PATHS.some((p) => pathname.startsWith(p));

  // Rediriger vers /login si la route est protégée et pas de token
  if (isProtected && !token) {
    const url = request.nextUrl.clone();
    url.pathname = '/login';
    url.searchParams.set('from', pathname);
    return NextResponse.redirect(url);
  }

  // Rediriger vers /dashboard si déjà connecté et tente d'accéder à /login
  if (isAuthPage && token) {
    return NextResponse.redirect(new URL('/dashboard', request.url));
  }

  return NextResponse.next();
}

export const config = {
  // Ne pas exécuter le middleware sur les assets statiques
  matcher: ['/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg)).*))'],
};

import type { Metadata, ResolvingMetadata } from 'next';
import { notFound } from 'next/navigation';
import { postsApi } from '@/lib/api';

type Props = { params: Promise<{ slug: string }> };

// Génération SSG à build time pour toutes les pages articles
export async function generateStaticParams() {
  const posts = await postsApi.list(new URLSearchParams({ per_page: '100' }));
  return posts.data.map((post) => ({ slug: post.slug }));
}

// generateMetadata est appelée AVANT le rendu du composant
export async function generateMetadata(
  { params }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  const { slug } = await params;
  const post = await postsApi.show(slug).catch(() => null);

  if (!post) return {};

  const parentMeta = await parent;
  const siteName = parentMeta.openGraph?.siteName ?? 'DevTutoriels';

  return {
    title:       post.meta_title ?? post.title,
    description: post.meta_description ?? post.excerpt,
    authors:     [{ name: post.author.name }],
    openGraph: {
      type:        'article',
      title:       post.meta_title ?? post.title,
      description: post.meta_description ?? post.excerpt,
      url:         `https://votre-blog.com/posts/${post.slug}`,
      images:      post.cover_image_url ? [{ url: post.cover_image_url, width: 1200, height: 630 }] : [],
      publishedTime: post.published_at,
      siteName,
      locale: 'fr_FR',
    },
    twitter: {
      card: 'summary_large_image',
      title: post.meta_title ?? post.title,
      description: post.meta_description ?? post.excerpt,
      images: post.cover_image_url ? [post.cover_image_url] : [],
    },
    alternates: {
      canonical: `https://votre-blog.com/posts/${post.slug}`,
    },
  };
}

export default async function PostPage({ params }: Props) {
  const { slug } = await params;
  const post = await postsApi.show(slug).catch(() => null);
  if (!post) notFound();

  return <PostDetail post={post} />;
}

import type { MetadataRoute } from 'next';
import { postsApi } from '@/lib/api';

export const revalidate = 3600; // Regénérer toutes les heures

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const BASE = 'https://votre-blog.com';

  // Pages statiques
  const staticPages: MetadataRoute.Sitemap = [
    { url: BASE, lastModified: new Date(), changeFrequency: 'daily', priority: 1 },
    { url: `${BASE}/about`, changeFrequency: 'monthly', priority: 0.5 },
  ];

  // Pages dynamiques issues de l'API Laravel
  const posts = await postsApi.list(new URLSearchParams({ per_page: '500' }));
  const postPages: MetadataRoute.Sitemap = posts.data.map((post) => ({
    url: `${BASE}/posts/${post.slug}`,
    lastModified: new Date(post.published_at),
    changeFrequency: 'weekly',
    priority: 0.8,
  }));

  return [...staticPages, ...postPages];
}

public function index(Request $request): JsonResponse
{
    $cacheKey = 'posts.list.' . md5($request->fullUrl());

    $posts = Cache::tags(['posts'])->remember(
        key:   $cacheKey,
        ttl:   Carbon::now()->addMinutes(15),
        value: function () use ($request) {
            return QueryBuilder::for(Post::published()->with(['author', 'category']))
                ->allowedFilters([...])
                ->paginate(12);
        }
    );

    return PostResource::collection($posts)->toResponse($request);
}

// Dans PostObserver — invalider le cache dès qu'un post change
class PostObserver
{
    public function saved(Post $post): void
    {
        Cache::tags(['posts', "post-{$post->slug}"])->flush();
        // Notifier Next.js pour invalider son cache ISR
        RevalidateNextjsCache::dispatch($post->slug);
    }
}

import Image from 'next/image';
import Link from 'next/link';

interface PostCardProps { post: Post }

export function PostCard({ post }: PostCardProps) {
  return (
    <Link href={`/posts/${post.slug}`} className="group block">
      <article className="bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
        {post.cover_image_url && (
          <div className="relative aspect-video">
            <Image
              src={post.cover_image_url}
              alt={post.title}
              fill                         // Remplit le parent relatif
              sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
              className="object-cover group-hover:scale-105 transition-transform duration-300"
              placeholder="blur"
              blurDataURL="data:image/jpeg;base64,/9j/4AAQ..." // Base64 tiny image
            />
          </div>
        )}
        <div className="p-6">
          <h2 className="text-xl font-bold mb-2 line-clamp-2">{post.title}</h2>
          <p className="text-gray-600 line-clamp-3 text-sm">{post.excerpt}</p>
          <div className="flex items-center gap-3 mt-4 text-xs text-gray-500">
            <span>{post.author.name}</span>
            <span>·</span>
            <time dateTime={post.published_at}>
              {new Intl.DateTimeFormat('fr-FR', { dateStyle: 'long' }).format(new Date(post.published_at))}
            </time>
            <span>·</span>
            <span>{post.reading_time} min de lecture</span>
          </div>
        </div>
      </article>
    </Link>
  );
}

#!/bin/bash

set -e  # Arrêter si une commande échoue

cd /home/forge/api.votredomaine.com

# Mettre en mode maintenance
php artisan down --refresh=15 --retry=60

# Récupérer le dernier code
git pull origin main

# Installer les dépendances (sans dev, optimisé)
composer install --no-interaction --prefer-dist --optimize-autoloader --no-dev

# Migrer la BDD (sans interaction)
php artisan migrate --force

# Vider et reconstruire les caches
php artisan config:cache
php artisan route:cache
php artisan view:cache
php artisan event:cache

# Redémarrer les workers Horizon
php artisan horizon:terminate

# Recharger PHP-FPM sans downtime
sudo /usr/sbin/php8.3-fpm -t && sudo service php8.3-fpm reload

# Remettre en ligne
php artisan up

echo "✅ Déploiement terminé avec succès"

# Installer Vercel CLI
npm i -g vercel

# Lier le projet et déployer
vercel --prod

# Variables d'environnement de production
vercel env add LARAVEL_API_URL production
# → https://api.votredomaine.com/api

vercel env add REVALIDATE_SECRET production
# → Clé secrète pour l'endpoint de revalidation ISR

vercel env add NEXT_PUBLIC_SITE_URL production
# → https://votre-blog.com

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'api.votredomaine.com',
        pathname: '/storage/**',
      },
    ],
    formats: ['image/avif', 'image/webp'], // AVIF en priorité
  },
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          { key: 'X-Frame-Options', value: 'DENY' },
          { key: 'X-Content-Type-Options', value: 'nosniff' },
          { key: 'Referrer-Policy', value: 'strict-origin-when-cross-origin' },
          {
            key: 'Permissions-Policy',
            value: 'camera=(), microphone=(), geolocation=()',
          },
        ],
      },
    ];
  },
};

export default nextConfig;

// ❌ MAUVAIS : tout l'article devient Client Component
// à cause d'un simple bouton "partager"
"use client"

export function ArticleDetail({ post }: { post: Post }) {
  const [copied, setCopied] = useState(false);

  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
      <button onClick={() => { /* copier URL */ }}>Partager</button>
    </article>
  );
}

// ✅ BON : Le Server Component gère l'article statique,
// seul le bouton est un Client Component isolé

// Server Component (pas de directive "use client")
export function ArticleDetail({ post }: { post: Post }) {
  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
      <ShareButton url={post.url} /> // Client Component isolé
    </article>
  );
}

// ShareButton.tsx — Client Component minimal
"use client"
export function ShareButton({ url }: { url: string }) {
  const [copied, setCopied] = useState(false);
  return <button onClick={() => { navigator.clipboard.writeText(url); setCopied(true); }}>
    {copied ? 'Copié !' : 'Partager'}
  </button>;
}

class MaskSensitiveHeaders
{
    public function handle(Request $request, Closure $next): Response
    {
        // Supprimer les headers sensibles avant le logging
        $request->headers->remove('Authorization');
        $request->headers->remove('X-Api-Key');

        return $next($request);
    }
}

"use client" // error.tsx doit être un Client Component

export default function BlogError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  return (
    <div className="text-center py-20">
      <h2>Une erreur est survenue</h2>
      <p className="text-gray-500">{error.message}</p>
      <button onClick={reset}>Réessayer</button>
    </div>
  );
}