Introduction à Next.js : créer votre première application

Next.js est un framework React populaire qui permet aux développeurs de créer des applications rapides rendues par le serveur. Il fournit des fonctionnalités puissantes prêtes à l'emploi, telles que la génération de sites statiques (SSG), le rendu côté serveur (SSR) et les routes API. Dans ce guide, nous passerons en revue le processus de création de votre première application Next.js, en nous concentrant sur les concepts clés et des exemples pratiques.

1. Configuration de votre projet Next.js

Pour démarrer avec Next.js, vous devez avoir Node.js installé sur votre machine. Une fois Node.js configuré, vous pouvez créer une nouvelle application Next.js à l'aide de la commande suivante :

npx create-next-app my-next-app

Cette commande crée un nouveau répertoire appelé my-next-app avec tous les fichiers et dépendances nécessaires pour démarrer une application Next.js.

2. Navigation dans la structure du projet

Après avoir créé votre projet, accédez au répertoire du projet :

cd my-next-app

Dans le répertoire my-next-app, vous trouverez une structure similaire à celle-ci :

my-next-app/
├── node_modules/
├── pages/
│   ├── api/
│   ├── _app.js
│   ├── index.js
├── public/
├── styles/
│   ├── Home.module.css
├── package.json
└── README.md

Le répertoire pages est l'endroit où vous créerez les pages de votre application, tandis que public est destiné aux ressources statiques.

3. Création de votre première page

Next.js utilise un système de routage basé sur des fichiers. Pour créer une nouvelle page, ajoutez simplement un nouveau fichier JavaScript dans le répertoire des pages. Par exemple, créez un fichier nommé about.js :

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

export default function About() {
  return (
    <div>
      <h1>About Page</h1>
      <p>This is the about page of my first Next.js application!</p>
      <Link href="/">Go back home</Link>
    </div>
  );
}

Dans cet exemple, nous avons créé une simple page À propos et utilisé le composant Lien pour revenir à la page d'accueil.

4. Modification de la page d'accueil

Ouvrez le fichier index.js dans le répertoire pages. Ce fichier représente la page d'accueil de votre application. Vous pouvez le modifier comme suit :

// pages/index.js
import Link from 'next/link';
import styles from '../styles/Home.module.css';

export default function Home() {
  return (
    <div className={styles.container}>
      <h1>Welcome to My Next.js App</h1>
      <p>
        This is my first application built with Next.js.{' '}
        <Link href="/about">Learn more about me</Link>
      </p>
    </div>
  );
}

Ici, nous avons ajouté un style simple et un lien vers la page À propos.

5. Ajout de styles à votre application

Next.js prend en charge les modules CSS prêts à l'emploi. Pour styliser vos composants, vous pouvez créer un module CSS dans le répertoire styles. Par exemple, créez un fichier nommé Home.module.css :

/* styles/Home.module.css */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: Arial, sans-serif;
}

Ensuite, importez ce module CSS dans votre page index.js comme indiqué dans la section précédente.

6. Récupération de données avec Next.js

Next.js facilite la récupération de données à l'aide de getStaticProps pour la génération de sites statiques ou de getServerSideProps pour le rendu côté serveur. Par exemple, pour récupérer des données sur la page d'accueil, vous pouvez modifier index.js comme ceci :

// pages/index.js
export async function getStaticProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return {
    props: { posts },
  };
}

export default function Home({ posts }) {
  return (
    <div className={styles.container}>
      <h1>Welcome to My Next.js App</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

Dans ce code, nous récupérons une liste de publications à partir d'une API publique et les affichons sur la page d'accueil.

7. Création de routes API

Next.js vous permet de créer des routes API dans le répertoire pages/api. Ces routes peuvent être utilisées pour créer votre fonctionnalité backend. Par exemple, créez un fichier nommé hello.js dans le répertoire pages/api :

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from Next.js API!' });
}

Vous pouvez accéder à cette route API en accédant à http://localhost:3000/api/hello.

8. Déploiement de votre application Next.js

Une fois votre application prête, vous pouvez la déployer facilement. Vercel est la plateforme d'hébergement recommandée pour les applications Next.js. Vous pouvez déployer votre application en suivant ces étapes :

1. Créez un compte Vercel si vous n'en avez pas.

2. Installez la CLI Vercel globalement :
   

   npx create-next-app my-next-app
   

3. Exécutez la commande suivante dans le répertoire de votre projet :
   

   cd my-next-app
   

4. Suivez les instructions pour déployer votre application.

9. Ajout d'un routage dynamique

Next.js prend en charge le routage dynamique à l'aide de crochets. Par exemple, si vous souhaitez créer une page d'article de blog dynamique, vous pouvez créer un fichier nommé [id].js dans le répertoire pages/posts :

my-next-app/
├── node_modules/
├── pages/
│   ├── api/
│   ├── _app.js
│   ├── index.js
├── public/
├── styles/
│   ├── Home.module.css
├── package.json
└── README.md

Vous pouvez désormais accéder à une publication spécifique en accédant à /posts/1, /posts/2, etc.

10. Implémentation de styles globaux

Si vous souhaitez appliquer des styles globaux à votre application, vous pouvez le faire en créant un fichier nommé _app.js dans le répertoire des pages :

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

export default function About() {
  return (
    <div>
      <h1>About Page</h1>
      <p>This is the about page of my first Next.js application!</p>
      <Link href="/">Go back home</Link>
    </div>
  );
}

Ensuite, créez un fichier globals.css dans le répertoire styles et ajoutez vos styles globaux :

// pages/index.js
import Link from 'next/link';
import styles from '../styles/Home.module.css';

export default function Home() {
  return (
    <div className={styles.container}>
      <h1>Welcome to My Next.js App</h1>
      <p>
        This is my first application built with Next.js.{' '}
        <Link href="/about">Learn more about me</Link>
      </p>
    </div>
  );
}

11. Utilisation des variables d'environnement

Next.js prend en charge les variables d'environnement pour stocker des informations sensibles. Vous pouvez créer un fichier .env.local à la racine de votre projet et ajouter vos variables :

/* styles/Home.module.css */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: Arial, sans-serif;
}

Vous pouvez ensuite accéder à cette variable dans votre application en utilisant process.env :

// pages/index.js
export async function getStaticProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return {
    props: { posts },
  };
}

export default function Home({ posts }) {
  return (
    <div className={styles.container}>
      <h1>Welcome to My Next.js App</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

Félicitations pour la création de votre première application Next.js ! Tout au long de ce parcours, vous avez appris à configurer votre projet, à créer des pages dynamiques, à récupérer des données de manière transparente, à mettre en œuvre un routage robuste et à déployer votre application en toute simplicité.

Next.js est plus qu'un simple framework ; c'est un outil puissant qui peut améliorer considérablement votre expérience de développement Web. Ses fonctionnalités intégrées, telles que la génération de sites statiques (SSG) et le rendu côté serveur (SSR), vous permettent de créer des applications rapides et conviviales optimisées pour les performances et le référencement.

Prochaines étapes de votre parcours Next.js

Maintenant que vous avez créé avec succès votre première application Next.js, il est temps de faire passer vos compétences au niveau supérieur. Dans cette prochaine série d'articles, nous approfondirons certaines des fonctionnalités les plus avancées de Next.js qui peuvent améliorer vos applications et rationaliser votre processus de développement.

Le

Middleware est une fonctionnalité puissante qui vous permet d'étendre les fonctionnalités de votre application en ajoutant une logique personnalisée avant qu'une requête ne soit terminée. Cela signifie que vous pouvez manipuler les objets de requête et de réponse, authentifier les utilisateurs ou même gérer les redirections de manière transparente.

Ensuite, nous explorerons la Génération de sites statiques (SSG). Cette technique pré-rend les pages au moment de la construction, permettant des vitesses de chargement rapides et des performances de référencement améliorées. En comprenant comment tirer parti de SSG, vous pouvez créer des applications non seulement dynamiques mais aussi incroyablement efficaces.

Enfin, nous aborderons les Routes API, une fonctionnalité qui vous permet de créer des fonctions sans serveur directement dans votre application Next.js. Cela signifie que vous pouvez gérer les demandes et les réponses sans avoir besoin d'un serveur séparé, ce qui facilite le développement d'applications full-stack avec moins de frais généraux.

Suivez-moi alors que nous nous embarquons dans ce voyage passionnant vers les capacités avancées de Next.js. Avec ces outils à votre disposition, vous serez en mesure de créer des applications robustes et performantes qui se démarquent vraiment. Restez à l'écoute pour notre prochain article !

Vous pouvez également lire ce post sur :

Introduction à Next.js : créer votre première application

Next.js est un framework React populaire qui permet aux développeurs de créer des applications rapides rendues par le serveur. Il fournit des fonctionnalités puissantes prêtes à l’emploi !

salmaniyad.hashnode.dev

Retrouvez-moi sur :

SalmanIyad · GitHub

Ingénieur en systèmes informatiques | Développeur Web. SalmanIyad dispose de 31 référentiels disponibles. Suivez leur code sur GitHub.

github.com

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!