Next.js 15 : Le Guide Ultime des Nouvelles Fonctionnalités pour 2024

// Exemple de Rendering Concurrent
import { Suspense } from 'react';

function HomePage() {
  return (
    <div className="app-container">
      <Header />
      <Suspense fallback={<LoadingSpinner />}>
        <DynamicContent />
      </Suspense>
      <Footer />
    </div>
  );
}

// Implémentation des Web Streams
export async function getServerSideProps() {
  const stream = await fetch('https://api.votreapp.com/data');
  const dataStream = await stream.body;
  
  return {
    props: {
      dataStream: await processStream(dataStream)
    }
  };
}

// API Route Moderne
export default async function handler(req, res) {
  const { method, query: { id } } = req;
  
  switch (method) {
    case 'GET':
      return res.status(200).json(await getUserData(id));
    case 'POST':
      return res.status(201).json(await createUser(req.body));
    default:
      return res.status(405).end();
  }
}

// Composant TypeScript avec CSS Modules
import styles from './Component.module.css';

interface ButtonProps {
  label: string;
  onClick: () => void;
}

export const Button: React.FC<ButtonProps> = ({ label, onClick }) => (
  <button className={styles.customButton} onClick={onClick}>
    {label}
  </button>
);

// Stratégie de Data Fetching Moderne
export async function getStaticProps() {
  try {
    const data = await fetchData();
    return {
      props: { data },
      revalidate: 60 // Revalidation toutes les 60 secondes
    };
  } catch (error) {
    console.error('Erreur de fetching:', error);
    return { notFound: true };
  }
}