Next.js

Aperçu

Next.js est un framework React pour la production. Il offre un rendu hybride statique et serveur, le support TypeScript, un bundling intelligent, le préchargement des routes et plus encore, sans aucune configuration.

Démarrage rapide

git clone https://<git-server>/<username>/<repo-name>.git
cd <repo-name>

npm install

npm run dev

npm run build
git add .
git commit -m "Initial setup"
git push origin main

Développement local avec Docker

Si vous n'avez pas Node.js installé localement, vous pouvez utiliser Docker pour exécuter les commandes Next.js.

Exécuter des commandes avec Docker

# Exécuter npm install
docker run --rm -v $(pwd):/app -w /app node:lts-alpine npm install

# Exécuter le serveur de développement
docker run --rm -v $(pwd):/app -w /app -p 4200:4200 node:lts-alpine npm run dev

# Construire pour la production
docker run --rm -v $(pwd):/app -w /app node:lts-alpine npm run build

Structure du projet

├── app/                      # App Router (Next.js 13+)
│   ├── layout.js             # Layout racine
│   ├── page.js               # Page d'accueil
│   ├── api/                  # Routes API
│   └── [routes]/             # Routes dynamiques
├── public/                   # Fichiers statiques
├── components/               # Composants React
├── styles/                   # Fichiers CSS
├── next.config.js            # Configuration Next.js
├── package.json              # Dépendances
└── Dockerfile                # Config Docker
        

Tâches courantes

Créer une page

Créez des fichiers dans le répertoire app/ :

// app/about/page.js
export default function AboutPage() {
  return <h1>About Us</h1>;
}

Créer une route API

// app/api/users/route.js
export async function GET() {
  return Response.json({ users: [] });
}

export async function POST(request) {
  const data = await request.json();
  return Response.json({ created: data });
}

Composants serveur vs client

// Composant serveur (par défaut) - s'exécute sur le serveur
export default async function Page() {
  const data = await fetch('https://api.example.com');
  return <div>{data}</div>;
}

// Composant client - ajoutez la directive 'use client'
'use client';
import { useState } from 'react';
export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Commandes utiles

Dépannage

Flux de déploiement