# 10 erreurs à éviter avec Next.js

Next.js est l’un des frameworks React les plus populaires pour créer des applications web modernes.

Cependant, de nombreux développeurs commettent encore certaines erreurs qui peuvent impacter les performances ou le SEO.

Voici **10 erreurs courantes à éviter avec Next.js**.

---

## TL;DR

Les erreurs fréquentes avec Next.js :

* trop utiliser les Client Components
* ignorer le cache
* mal gérer le routing
* oublier l’optimisation des images
* mauvaise gestion du SEO

---

## 1️⃣ Trop utiliser les Client Components

Dans l’App Router, les composants sont **Server Components par défaut**.

Utiliser trop de `"use client"` peut réduire les performances.

---

## 2️⃣ Ignorer le cache Next.js

Next.js propose un système de cache puissant.

Exemple :

```ts
fetch(url, { next: { revalidate: 3600 } })
```

Ignorer ce système peut ralentir l’application.

---

## 3️⃣ Mauvaise structure du projet

Un projet Next.js doit avoir une structure claire :

```
app/
components/
lib/
styles/
```

Une mauvaise organisation rend le projet difficile à maintenir.

---

## 4️⃣ Ne pas optimiser les images

Next.js propose le composant `next/image`.

Il permet :

* compression automatique
* lazy loading
* optimisation responsive.

---

## 5️⃣ Mauvaise gestion du SEO

Les métadonnées doivent être correctement définies :

* title
* description
* Open Graph

[Apprendre les bases du SEO](/blog/optimiser-seo-bases-referencement) est un atout très utile pour générer du trafic organique 
---

## 6️⃣ Ignorer les layouts

Les layouts permettent de partager des structures entre les pages.

Ne pas les utiliser peut entraîner de la duplication de code.

---

## 7️⃣ Mauvaise gestion des routes dynamiques

Les routes dynamiques doivent être bien structurées :

```
app/blog/[slug]/page.tsx
```

---

## 8️⃣ Trop de JavaScript côté client

Le rendu serveur doit être privilégié pour améliorer les performances.
Il est préférable d'utiliser du HTML côté client.

---

## 9️⃣ Ignorer les Core Web Vitals

Google analyse :

* vitesse
* stabilité
* interaction

Optimiser ces métriques améliore le SEO.

---

## 🔟 Ne pas analyser les performances

Il est important d’utiliser :

* Lighthouse
* Web Vitals
* Google Search Console

---

## Conclusion

Next.js est un framework puissant, mais certaines mauvaises pratiques peuvent réduire ses avantages.

Éviter ces erreurs permet de créer **des applications plus rapides et mieux optimisées**.

10 erreurs à éviter avec Next.js

# Guide complet Next.js 13+ avec App Router

Next.js 13 introduit **l�App Router**, une nouvelle architecture qui modernise le d�veloppement des applications React.

Cette nouvelle approche repose sur plusieurs concepts cl�s :

* React Server Components
* Streaming et Suspense
* Layouts imbriqu�s
* Routing bas� sur les dossiers
* Server Actions et API Routes

Dans ce guide, vous allez apprendre **comment structurer une application Next.js moderne avec l�App Router**.

---

# Introduction � l'App Router

L�App Router remplace progressivement l�ancien **Pages Router** et apporte plusieurs avantages :

* rendu c�t� serveur par d�faut
* chargement progressif (streaming)
* layouts partag�s
* meilleures performances
* gestion simplifi�e du routing

Dans Next.js 13+, les pages sont plac�es dans le dossier :

```
app/
```

Chaque dossier correspond � une route.

---

# Structure des dossiers avec App Router

Voici une structure classique d�application Next.js 13+ :

```
app/
??? layout.tsx          // Layout racine
??? page.tsx            // Page d'accueil
??? loading.tsx         // UI de chargement
??? error.tsx           // UI d'erreur
??? not-found.tsx       // Page 404
??? globals.css         // Styles globaux
?
??? blog/
?   ??? layout.tsx
?   ??? page.tsx
?   ??? loading.tsx
?   ??? [slug]/
?       ??? page.tsx
?       ??? loading.tsx
?
??? dashboard/
?   ??? (auth)/
?   ?   ??? login/
?   ?   ??? register/
?   ??? settings/
?
??? api/
    ??? posts/
        ??? route.ts
```

Dans cette structure :

* `layout.tsx` d�finit la structure commune
* `page.tsx` repr�sente une page
* `[slug]` correspond � une route dynamique

---

# Server Components par d�faut

Dans l�App Router, les composants sont **Server Components par d�faut**.

Cela signifie que le rendu se fait c�t� serveur, ce qui am�liore :

* les performances
* le SEO
* la s�curit�

Exemple :

```tsx
// app/blog/page.tsx
import { Metadata } from "next";

async function getPosts() {
  const res = await fetch("https://api.example.com/posts", {
    next: { revalidate: 3600 }
  });

  if (!res.ok) {
    throw new Error("Failed to fetch posts");
  }

  return res.json();
}

export const metadata: Metadata = {
  title: "Blog - Mon Site",
  description: "Articles sur le d�veloppement web"
};

export default async function BlogPage() {
  const posts = await getPosts();

  return (
    <div>
      <h1>Blog</h1>

      <div className="grid gap-4">
        {posts.map(post => (
          <article key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.excerpt}</p>
          </article>
        ))}
      </div>
    </div>
  );
}
```

---

# Layouts imbriqu�s

L�un des avantages majeurs de l�App Router est la possibilit� de cr�er **des layouts imbriqu�s**.

### Layout global

```tsx
// app/layout.tsx

import "./globals.css";

export default function RootLayout({
  children
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="fr">
      <body>
        <header>
          Navigation globale
        </header>

        <main>{children}</main>

        <footer>
          Footer global
        </footer>
      </body>
    </html>
  );
}
```

---

### Layout sp�cifique

```tsx
// app/blog/layout.tsx

export default function BlogLayout({
  children
}: {
  children: React.ReactNode
}) {
  return (
    <div className="container">
      <aside>
        Cat�gories
      </aside>

      <section>
        {children}
      </section>
    </div>
  );
}
```

Chaque route peut donc avoir son **propre layout**.

---

# Loading et Error UI

Next.js permet de g�rer facilement les �tats de chargement.

### Loading

```tsx
// app/blog/loading.tsx

export default function Loading() {
  return (
    <div className="animate-pulse">
      Chargement des articles...
    </div>
  );
}
```

---

### Gestion des erreurs

```tsx
// app/blog/error.tsx

"use client";

export default function Error({
  error,
  reset
}: {
  error: Error;
  reset: () => void;
}) {
  return (
    <div>
      <h2>Une erreur est survenue</h2>

      <button onClick={reset}>
        R�essayer
      </button>
    </div>
  );
}
```

---

# Streaming et Suspense

Next.js 13 permet de charger les composants **progressivement**.

Cela am�liore l�exp�rience utilisateur.

```tsx
import { Suspense } from "react";

function Loading() {
  return <p>Chargement...</p>;
}

export default function Page() {
  return (
    <div>
      <h1>Blog</h1>

      <Suspense fallback={<Loading />}>
        <SlowComponent />
      </Suspense>
    </div>
  );
}
```

---

# M�tadonn�es dynamiques

Next.js permet de g�n�rer des m�tadonn�es SEO dynamiques.

```tsx
export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);

  return {
    title: post.title,
    description: post.excerpt,
  };
}
```

Ces m�tadonn�es sont utilis�es pour :

* SEO
* Open Graph
* Twitter cards

---

# API Routes avec App Router

Les routes API sont plac�es dans :

```
app/api/
```

Exemple :

```tsx
// app/api/posts/route.ts

import { NextResponse } from "next/server";

export async function GET() {
  return NextResponse.json({
    posts: []
  });
}
```

---

# Client Components

Pour utiliser les hooks React (`useState`, `useEffect`), il faut d�clarer un **Client Component**.

```tsx
"use client";

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}
```

---

# Middleware et redirections

Next.js permet d�intercepter les requ�tes avec un middleware.

```tsx
// middleware.ts

import { NextResponse } from "next/server";

export function middleware(request) {

  if (request.nextUrl.pathname === "/old-blog") {
    return NextResponse.redirect(
      new URL("/blog", request.url)
    );
  }

  return NextResponse.next();
}
```

Les middleware sont utiles pour :

* authentification
* redirections
* protection des routes

---

# Bonnes pratiques avec Next.js 13+

Pour optimiser votre application :

* privil�gier les **Server Components**
* utiliser le **cache Next.js**
* optimiser les images avec `next/image`
* utiliser `next/link` pour la navigation
* limiter les Client Components

---

# Conclusion

Next.js 13 avec l�App Router apporte une nouvelle fa�on de d�velopper des applications React modernes.

Les principales am�liorations incluent :

* Server Components
* streaming
* layouts imbriqu�s
* routing simplifi�
* meilleures performances

Gr�ce � ces fonctionnalit�s, Next.js permet de cr�er **des applications web rapides, SEO-friendly et scalables**.


Next.js

10 erreurs à éviter avec Next.js

Guide complet Next.js 13+ avec App Router

Explorer d'autres categories