Next.js Cheatsheet

Bases & syntaxe

Crée un composant Next.js

// pages/about.js
import React from 'react';

const About = () => {
  return <h1>About Us</h1>;
};

export default About;

Utilisez pour créer des composants réutilisables et modifiables.

Naviguer entre les pages

// pages/index.js
import Link from 'next/link';

const Home = () => {
  return (
    <nav>
      <Link href="/about">
        <a>About</a>
      </Link>
    </nav>
  );
};

export default Home;

Utilisez pour créer des liens entre les différentes pages de votre application.

Structures de données

State avec React Hooks

// pages/index.js
import { useState } from 'react';

const Index = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default Index;

Utilisez pour gérer l'état local de vos composants.

Utiliser Context API

// components/Counter.js
import { useContext } from 'react';
import CountContext from '../context/CountContext';

const Counter = () => {
  const count = useContext(CountContext);

  return <p>Count: {count}</p>;
};

export default Counter;

Utilisez pour partager l'état entre les composants de manière plus globale.

Fonctions & methodes essentielles

Utiliser useEffect pour des effets secondaires

// pages/index.js
import { useState, useEffect } from 'react';

const Index = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      {data ? <p>Data: {JSON.stringify(data)}</p> : <p>Loading...</p>}
    </div>
  );
};

export default Index;

Utilisez pour effectuer des opérations asynchrones et mettre à jour le state.

Déstructuration de props

// components/Greeting.js
const Greeting = ({ name, age }) => {
  return <p>Hello, {name}! You are {age} years old.</p>;
};

export default Greeting;

Utilisez pour simplifier l'accès aux props dans vos composants.

Patterns courants

Composant Layout réutilisable

// components/Layout.js
import Link from 'next/link';

const Layout = ({ children }) => {
  return (
    <div>
      <nav>
        <Link href="/">
          <a>Home</a>
        </Link>
        <Link href="/about">
          <a>About</a>
        </Link>
      </nav>
      {children}
    </div>
  );
};

export default Layout;

Utilisez pour créer un layout global réutilisable.

HOC (Higher Order Component)

// components/withAuth.js
import { useEffect } from 'react';

const withAuth = (WrappedComponent) => {
  return (props) => {
    // Vérification d'authentification ici

    return <WrappedComponent {...props} />;
  };
};

export default withAuth;

Utilisez pour ajouter de la logique d'autorisation à vos composants.

Opérations avancées

Pré-fetching des données avec getStaticProps et getServerSideProps

// pages/posts.js
import { getPosts } from '../lib/api';

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

  return {
    props: { posts },
  };
}

const Posts = ({ posts }) => (
  <ul>
    {posts.map(post => (
      <li key={post.id}>{post.title}</li>
    ))}
  </ul>
);

export default Posts;

Utilisez pour pré-fetcher les données au moment de la génération statique ou du rendu côté serveur.

Hydratation partielle avec SWR

// components/Post.js
import useSWR from 'swr';

const fetcher = (url) => fetch(url).then((res) => res.json());

const Post = ({ id }) => {
  const { data, error } = useSWR(`/api/posts/${id}`, fetcher);

  if (error) return <div>Error :(</div>;
  if (!data) return <div>Loading...</div>;

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.content}</p>
    </div>
  );
};

export default Post;

Utilisez pour une hydratation partielle et des mises à jour réactives sans rechargement total de la page.

Debugging & outils

Utiliser console.log pour déboguer

// pages/index.js
const Home = () => {
  const handleClick = (e) => {
    console.log('Button clicked', e);
  };

  return (
    <button onClick={handleClick}>Click me</button>
  );
};

export default Home;

Utilisez pour afficher des informations de débogage dans la console.

Outils de développement Next.js

• Next Dev Server (next dev): Fournit une expérience de développement avec hot-reloading et autres fonctionnalités.
• React DevTools: Permet de visualiser le DOM React et les composants en temps réel.

Utilisez ces outils pour faciliter le débogage et la compréhension du rendu de votre application.