Créez une application React avec Next.js

Table des matières

Table des matières

Maîtrisez le routing et la navigation

Découvrez le routing dans Next.js

Vous avez créé une page d'accueil avec votre Hero Section. Mais un portfolio complet a besoin de plusieurs pages :

  • une page pour vos projets,

  • une page pour vous présenter,

  • une page de contact...

Avec React seul, vous deviez :

  1. Installer React Router :npm install react-router-dom

  2. Configurer les routes manuellement dans votre code

  3. Créer un composant Router avec toutes les routes

  4. Gérer les erreurs 404 vous-même

Avec Next.js, tout est automatique !

Le routing basé sur les fichiers (File-Based Routing)

Next.js utilise votre structure de dossiers pour créer automatiquement vos routes :

app/
├──  page.js              →  /  (votre page d'accueil)
├──  about/
│   └──  page.js         →  /about(page À propos)
├──  projects/
│   └──  page.js          →  /projects(liste des projets)
└──  contact/
    └──  page.js          →  /contact (page contact)

La règle est simple :

  • Créez un dossier avec le nom de votre route

  • Ajoutez un fichierpage.jsà l'intérieur

  • Next.js crée automatiquement la route !

Comparaison React vs Next.js

Aspect

React + React Router

Next.js

Installation

Bibliothèque externe à installer

Intégré nativement

Configuration

Manuelle dans le code

Automatique via fichiers

Routes

Définies dans JSX

Structure de dossiers

404

À gérer manuellement

Automatique

SEO

Nécessite config SSR

Optimisé par défaut

Créez vos premières pages

Construisons les pages essentielles de votre portfolio !

Commençons par la page qui permettra de présenter vos projets. Créez la structure suivante :

app/
├──  page.js              (déjà existant - accueil)
└──  projets/
    ├──  page.js          (nouveau)
    └──  page.module.css  (nouveau)

Ouvrez votre navigateur à  http://localhost:3000/projets  et admirez votre nouvelle page ! 

Vous pouvez maintenant étoffer votre projet en construisant les pages de votre choix (une page “A propos” et une page “Contact” par exemple). 

Ajoutez une navigation

Vos pages existent, mais comment naviguer entre elles ? Créons une barre de navigation !

Utilisez le composant Link de Next.js

Avec React Router, vous utilisiez  <Link to="/about">À propos</Link>  .

Avec Next.js, c'est presque pareil :

import Link from 'next/link'

<Link href="/about">À propos</Link>

La grande différence : Next.js précharge automatiquement les pages liées quand elles apparaissent dans le viewport. Résultat : la navigation est instantanée ! 

Créez le composant Navigation

Créez le composant Navigation dansapp/components/Navigation/Navigation.js  et ajoutez lui le fichier CSS :

import Link from 'next/link'
import styles from './Navigation.module.css'

export default function Navigation() {
 return (
   <nav className={styles.nav}>
     <div className="container">
       <Link href="/" className={styles.logo}>
         Mon Portfolio
       </Link>

       <ul className={styles.menu}>
         <li>
           <Link href="/" className={styles.link}>
             Accueil
           </Link>
         </li>
         <li>
           <Link href="/projets" className={styles.link}>
             Projets
           </Link>
         </li>
         <li>
           <Link href="/a-propos" className={styles.link}>
             À propos
           </Link>
         </li>
         <li>
           <Link href="/contact" className={styles.link}>
             Contact
           </Link>
         </li>
       </ul>
     </div>
   </nav>
 )
}

Intégrez la navigation dans le Layout

Modifiez  app/layout.js  pour ajouter la navigation sur toutes les pages :

import "./globals.css"
import Navigation from './components/Navigation/Navigation'

export const metadata = {
  title: "Portfolio d'Aurélien",
  description: "Développeur web passionné par React et Next.js",
}

export default function RootLayout({ children }) {
  return (
    <html lang="fr">
      <body>
        <Navigation />
        <main>{children}</main>
      </body>
    </html>
  )
}

En ajoutant  <Navigation />  dans le layout, elle apparaît automatiquement sur toutes les pages ! Plus besoin de la copier-coller partout.

Testez : naviguez entre vos pages, elles se chargent instantanément sans rechargement !

Créez des routes dynamiques

Maintenant, créons des pages de détail pour chaque projet avec des URLs comme :

  • /projects/portfolio

  • /projects/ecommerce

  • /projects/blog

Next.js utilise les crochets pour créer des routes dynamiques :

app/
└──  projects/
    ├──  page.js            →  /projects
    └──  [slug]/
        └──  page.js        →  /projects/[exemple]

Créez app/projects/[slug]/page.js :

import styles from './page.module.css'

// Liste de projets (normalement, ça viendrait d'une API ou d'une base de données)
const projects = {
  'portfolio': {
      title: 'Portfolio Personnel',
      slug: 'portfolio',
      //…..
  },
  'ecommerce': {
      title: 'App E-commerce',
      slug: 'ecommerce',
      //…
  },
  'blog': {
      title: 'Blog Technique',
      slug: 'blog',
      //…
  }
}

export default async function ProjectDetail({ params }) {
  const { slug } = await params
  // Next.js passe automatiquement le slug dans params
  const project = projects[slug]

  // Si le projet n'existe pas, afficher un message
  if (!project) {
      return (
          <div className="container">
              <h1>Projet non trouvé</h1>
              <p>Ce projet n&apos;existe pas ou a été supprimé.</p>
          </div>
      )
  }

  return (
      <div className={styles.container}>
          <div className={styles.header}>
              <h1 className={styles.title}>{project.title}</h1>
              <p className={styles.description}>{project.description}</p>
          </div>

          <div className={styles.content}>
              <div className={styles.imageWrapper}>
                  <div className={styles.imagePlaceholder}>
                      Image du projet
                  </div>
              </div>

              <div className={styles.details}>
                  <h2>Technologies utilisées</h2>
                  <div className={styles.technologies}>
                      {project.technologies.map((tech, index) => (
                          <span key={index} className={styles.tech}>
                              {tech}
                          </span>
                      ))}
                  </div>

                  <div className={styles.links}>
                      <a
                          href={project.github}
                          target="_blank"
                          rel="noopener noreferrer"
                          className={styles.link}
                      >
                          Voir le code →
                      </a>
                      <a
                          href={project.demo}
                          target="_blank"
                          rel="noopener noreferrer"
                          className={`${styles.link} ${styles.linkPrimary}`}
                      >
                          Voir la démo →
                      </a>
                  </div>
              </div>
          </div>
      </div>
  )
}

Comment ça marche ?

  1. L'utilisateur visite /projects/portfolio

  2. Next.js charge app/projects/[slug]/page.js

  3. Next.js passe { slug: 'portfolio' } dansparams

  4. Votre composant récupère les données correspondantes

  5. La page s'affiche ! 

Fichier  app/projects/[slug]/page.module.css  :

Liez les projets depuis la liste

Modifiez  app/projects/page.js  pour ajouter des liens vers les détails :

import Link from 'next/link'
import styles from './page.module.css'

export default function Projects() {
  // ......

  return (
    {/*On remplace la div avec className card par la balise link*/}
         <Link href="/projets/portfolio" className={styles.card}>
         <h2>Portfolio Personnel</h2>
         <p>Site web moderne construit avec Next.js</p>
         <div className={styles.tags}>
           <Tag>Next.js</Tag>
           <Tag>React</Tag>
           <Tag>CSS Modules</Tag>
         </div>
       </Link>
        ))}
      </div>
    </div>
  )
}

Ajoutez ces styles dans  app/projects/page.module.css  :

/* ... styles existants ... */

.card {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.viewMore {
  display: inline-block;
  margin-top: 1rem;
  color: #667eea;
  font-weight: 600;
}

Testez : Cliquez sur un projet, la page de détail s'affiche instantanément ! 

Gérez les pages 404

Pour personnaliser une page 404, il suffit d’ajouter un fichier  app/not-found.js 

Voici un code d’exemple :

import Link from 'next/link'

export default function NotFound() {
  return (
    <div>
      <h1>404 - Page non trouvée</h1>
      <p>Désolé, cette page n'existe pas.</p>
      <Link href="/">Retour à l'accueil</Link>
    </div>
  )
}

Indiquez la route active 

Utilisez le hook  usePathname  de Next.js pour mettre en surbrillance le lien de navigation actif :

'use client'
import { usePathname } from 'next/navigation'
import Link from 'next/link'

export default function Navigation() {
  const pathname = usePathname()
  
  return (
{/* … autre code*/}
    <Link 
      href="/projets" 
      className={pathname === '/projets' ? `${styles.link} ${styles.active}` : styles.link}
    >
      Projets
    </Link>
{/* … autre code */}
  )
}

À vous de jouer !

Avant de passer au chapitre suivant, entraînez-vous.

Mission 1 : Ajoutez un footer 

Créez un composant Footer dans  app/components/Footer/  et ajoutez-le dans lelayout.js. Le footer doit contenir :

  • Votre nom avec l'année actuelle

  • Des liens vers vos réseaux sociaux

  • Un copyright

Mission 2 : Ajoutez une page formation 

Créez une nouvelle page qui contiendra les informations liées à votre formation académique. Si vous souhaitez aller plus loin vous pouvez faire une page dynamique pour chaque formation ou centre de formation. Pensez à ajouter les routes nécessaires à la navigation

Vous avez maintenant un portfolio avec :

  • Une page d'accueil attractive

  • Une page listant vos projets

  • Des pages de détail pour chaque projet

  • Une page "À propos" présentant vos compétences

  • Une page de contact

  • Une navigation fluide et professionnelle

Félicitations ! Votre portfolio a maintenant une navigation complète et professionnelle.

En résumé

  • Next.js crée automatiquement les routes à partir de votre structure de dossiers.

  • Pour créer des pages vous avez juste à créer des dossiers et un fichier page.js.

  • Vous pouvez naviguer entre les pages avec next/link et le composant<Link href=”ma-route”>.

  • Utiliser layout.js pour partager des éléments communs (navigation, footer) sur toutes les pages.

  • Utiliser [slug]pour créer des URLs dynamiques.

  • Next.js passe automatiquement  params  à vos composants.

Avez-vous une suggestion pour nous ?
Et si vous obteniez un diplôme OpenClassrooms ?
  • Formations jusqu’à 100 % financées
  • Date de début flexible
  • Projets professionnalisants
  • Mentorat individuel
Trouvez la formation et le financement faits pour vous
Être orientéComparez nos types de formation