Thomas Galabert | Développeur Web Full Stack

Introduction

Logo Next.js

Next.js est devenu incontournable dans l'écosystème React. Avec la version 14, le framework atteint une maturité impressionnante et propose des fonctionnalités qui changent vraiment la donne pour le développement web moderne.

Dans cet article, nous allons explorer ensemble les bases de Next.js 14 et comprendre pourquoi tant de développeurs l'adoptent.

Installation et configuration

Pour commencer, créez un nouveau projet Next.js avec la commande suivante :

npx create-next-app@latest mon-projet

L'assistant d'installation vous posera plusieurs questions. Je vous recommande de choisir :

TypeScript : Oui
ESLint : Oui
Tailwind CSS : Oui
App Router : Oui

Une fois l'installation terminée, lancez le serveur de développement :

cd mon-projet
npm run dev

Votre application est maintenant accessible sur http://localhost:3000.

Comprendre l'App Router

L'App Router est la nouvelle façon de gérer le routing dans Next.js 14. Contrairement au Pages Router, il utilise le dossier app/ et propose une approche plus intuitive basée sur les dossiers.

Structure de base

Chaque dossier dans app/ représente une route :

app/
  page.tsx          → /
  about/
    page.tsx        → /about
  blog/
    page.tsx        → /blog
    [slug]/
      page.tsx      → /blog/mon-article

Les avantages

Layouts partagés : Créez des layouts qui persistent entre les pages
Loading states : Gérez facilement les états de chargement
Error handling : Capturez les erreurs de manière élégante
Server Components par défaut : Meilleures performances out of the box

Les Server Components

C'est LA grande nouveauté de Next.js 14. Par défaut, tous vos composants sont des Server Components, ce qui signifie qu'ils sont rendus côté serveur.

Avantages des Server Components

Les Server Components offrent plusieurs bénéfices majeurs :

Moins de JavaScript envoyé au client
Accès direct aux bases de données
Meilleure sécurité (les secrets restent côté serveur)
SEO optimisé

Exemple pratique

Voici un exemple de Server Component qui récupère des données :

// app/posts/page.tsx
export default async function PostsPage() {
  const posts = await fetch('https://api.example.com/posts');
  const data = await posts.json();
  
  return (
    <div>
      <h1>Mes articles</h1>
      {data.map(post => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
        </article>
      ))}
    </div>
  );
}

Notez que la fonction est async et qu'on utilise directement fetch sans useEffect ou useState !

Quand utiliser un Client Component

Parfois, vous avez besoin d'interactivité (useState, useEffect, onClick, etc.). Dans ce cas, ajoutez simplement 'use client' en haut de votre fichier :

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

Conclusion

Next.js 14 représente une évolution majeure dans le développement web React. L'App Router et les Server Components changent fondamentalement notre façon de concevoir des applications.

Les bénéfices en termes de performance, d'expérience développeur et de SEO sont réels et mesurables. Si vous débutez avec Next.js, c'est le moment idéal pour vous lancer !

Dans le prochain article, nous verrons comment déployer votre application Next.js en production. Stay tuned!

Débuter avec Next.js 14 : Le guide complet