Table des matières  Introduction  Mise en place du projet  Comprendre la structure des dossiers  Liste de tous les articles de blog  Présenter un article de blog unique  Utilisation de l'interface utilisateur de chargement et de la diffusion en continu dans Next.js  Conclusion  Les références  1. Introduction  Bonjour!  Dans le didacticiel d'aujourd'hui, nous nous lançons dans un voyage pour créer un blog simple mais puissant à l'aide de Next.js.  Que vous découvriez Next.js ou que vous cherchiez simplement à approfondir certains principes de base, ce guide est fait pour vous.  Nous ne traiterons pas seulement de la configuration d'un projet, mais nous aborderons également les structures de dossiers, le rendu côté serveur, etc.  Vous pouvez trouver le référentiel complet  ici  Plongeons dedans !  2. Mise en place du projet  Étape 1 : Créer l'application  Pour commencer, utilisons la commande suivante pour configurer notre application Next.js :   npx create-next-app@latest blog-example  Une fois cela fait, accédez au projet nouvellement créé :   cd blog-example  Étape 2 : Démarrez le serveur de développement  Bien que j'utilise   dans ce guide, n'hésitez pas à utiliser   ou   : yarn npm pnpm   yarn dev  Maintenant, visitez   où vous trouverez la page de modèle Next.js par défaut. http://localhost:3000  3. Comprendre la structure des dossiers  À ce stade, il est utile de comprendre la structure de notre application Next.js. Veuillez vous référer à l'image suivante pour une représentation visuelle de la disposition du dossier.   4. Liste de tous les articles de blog  4.1. Itinéraire API  Dans   , nous allons configurer une API factice pour les articles de blog. Ici,   spécifie que nous souhaitons revalider nos données toutes les 60 secondes. /app/api/posts/route.js next: { revalidate: 60 }   Revalidation des données  La revalidation est le processus de purge du cache de données et de récupération des dernières données. Ceci est utile lorsque vos données changent et que vous voulez vous assurer d'afficher les informations les plus récentes.  Les données mises en cache peuvent être revalidées de deux manières :    : revalidez automatiquement les données après un certain temps. Ceci est utile pour les données qui changent rarement et dont la fraîcheur n'est pas aussi critique. Revalidation basée sur le temps    : revalidez manuellement les données en fonction d'un événement (par exemple, la soumission d'un formulaire). La revalidation à la demande peut utiliser une approche basée sur des balises ou sur un chemin pour revalider des groupes de données à la fois. Ceci est utile lorsque vous souhaitez vous assurer que les dernières données sont affichées dès que possible (par exemple, lorsque le contenu de votre CMS sans tête est mis à jour). Revalidation à la demande   Revalidation basée sur le temps  Pour revalider les données à un intervalle de temps, vous pouvez utiliser l'option   de   pour définir la durée de vie du cache d'une ressource (en secondes). next.revalidate fetch  Voici un exemple :   import { NextResponse } from 'next/server' export async function GET() { const res = await fetch('https://dummyjson.com/posts', { next: { revalidate: 60 }, }); const data = await res.json(); return NextResponse.json(data); }  4.2. Afficher les messages  Créons un composant,   , qui récupère et affiche les publications de notre serveur. Bien que je l'aie peu stylisé, n'hésitez pas à le mettre en valeur ! PostsPage   export default async function PostsPage() { const res = await fetch('http://localhost:3000/api/posts'); const { posts } = await res.json(); return ( // Styles are for readability; customize as you wish! <div> <h1>All Blog Posts</h1> <hr style={{ width: '220px' }} /> <div style={{ paddingTop: '40px' }}> {posts.map(post => ( <article key={post.id}> <h2>{post.title}</h2> <p style={{ paddingBottom: '30px'}}>{post.body}</p> </article> ))} </div> </div> ); }  Jusqu'à présent, vous devriez voir une liste d'articles.   5. Présenter un article de blog unique  5.1. Lier la publication  Pour rendre chaque titre de publication cliquable, nous ajouterons le composant   de Next.js : Link   import Link from 'next/link'; export default async function PostsPage() { // ... rest of the code return ( <div> // ... rest of the code <div style={{ paddingTop: '40px' }}> {posts.map(post => ( <article key={post.id}> <Link href={`posts/${post.id}`}> <h2>{post.title}</h2> </Link> <p style={{ paddingBottom: '30px'}}>{post.body}</p> </article> ))} </div> </div> ); }  5.2. Route API pour un poste unique  Dans la route de l'API Next.js, nous récupérons des publications spécifiques en fonction de leur ID :   import { NextResponse } from 'next/server' export async function GET(request, { params }) { const { id } = params; const res = await fetch(`https://dummyjson.com/posts/${id}`, { next: {revalidate: 60} }); const post = await res.json(); return NextResponse.json({ post }); }  5.3. Afficher un article unique  Pour afficher des publications individuelles, il est essentiel de comprendre la différence entre les composants serveur et client dans Next.js.  Le composant donné,   , utilise la récupération de données côté client. SinglePost  Cela signifie essentiellement que les données sont récupérées sur le client après le rendu de la page. Il permet une interactivité riche sans sacrifier les performances. Plus d'informations à ce sujet peuvent être lues dans la   . documentation Next.js sur React Essentials   Composants clients  Les composants client vous permettent d'ajouter de l'interactivité côté client à votre application. Dans Next.js, ils sont   sur le serveur et hydratés sur le client. Vous pouvez considérer les composants clients comme la façon dont les composants du   ont toujours fonctionné. pré-rendus routeur de pages   'use client' import Link from 'next/link'; import { useEffect, useState } from 'react'; export default function SinglePost({params}) { const [post, setPost] = useState(null); const fetchPost = async (id) => { const res = await fetch(`http://localhost:3000/api/posts/${id}`); const {post} = await res.json(); post && setPost(post); } useEffect(() => { fetchPost(params.id); }, []) return ( <div style={{ paddingTop: '20px', paddingLeft: '20px' }}> <Link href='/'>Back to home</Link> <div style={{ paddingTop: '50px' }}> <article> <h1 style={{ paddingBottom: '10px' }}>{post?.title}</h1> {post?.tags.map((tag, index) => <span style={{ fontWeight: 'lighter' }} key={index}>{tag} | </span>)} <br/> <p style={{ paddingTop: '10px' }}>{post?.body}</p> </article> </div> </div> ) }  Maintenant, vous devriez pouvoir voir les détails de l'article. Veuillez excuser le manque de style !   6. Utilisation de l'interface utilisateur de chargement et de la diffusion en continu dans Next.js    Pour une expérience utilisateur améliorée, envisagez d'ajouter un composant de chargement. Next.js fournit une solution intégrée avec l'interface utilisateur de chargement et le streaming. Il aide à afficher un spinner de chargement jusqu'à ce que votre contenu soit prêt. Plongez plus profondément avec ce   . Conseil : guide officiel sur le chargement de l'interface utilisateur et le streaming  Par exemple:   // You can add any UI inside Loading, including a Skeleton. export default function Loading() { return <LoadingSkeleton />}  7. Conclusion  Construire une application Next.js peut être à la fois amusant et instructif.  Nous avons appris à configurer un projet, à gérer notre structure de dossiers, à répertorier les articles de blog, à présenter des articles individuels et même à aborder les états de chargement.  Avec la croissance rapide de Next.js dans la communauté du développement Web, les compétences acquises ici sont inestimables.  Développez cette base, explorez plus de fonctionnalités et bon codage !  8. Références   Documentation officielle Next.js  Pour les données de l'article, j'ai utilisé  DummyJson  Pour construire l'article, j'ai utilisé  StackEdit  Merci pour votre temps et votre dévouement à l'apprentissage. Vos commentaires sont extrêmement précieux. Si vous avez des ajouts ou des corrections à ce message, veuillez nous contacter.  Connectez-vous avec moi sur : communauté    dev.to @leandro_nnz  communauté    hackernoon.com @leandronnz  Twitter  @digpollution  Acclamations!

Read My Stories

Portfolio

Hire Me

Buy Me a Coffee

Next.Js 13 Parallel Routes: A Comprehensive Guide

Mastering JavaScript Shorthands

PostgreSQL or MySQL: What Should I Choose for My Full-Stack Project?

Cet audio est produit dans la langue originale de l'histoire !

Trop long; Pour lire

Make resilience your competitive advantage

Un guide étape par étape pour créer un blog Next.js 13 simple

About Author

COMMENTAIRES

ÉTIQUETTES

CET ARTICLE A ÉTÉ PARU DANS

Related Stories

Vous voulez gagner un concours d’écriture HackerNoon ? Voici ce que recommandent les gagnants du concours #crypto-api

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

Le guide complet pour réussir une migration vers le cloud : stratégies et bonnes pratiques

La fuite de l'invite du système Claude Sonnet 3.5 : une analyse médico-légale

Vous voulez gagner un concours d’écriture HackerNoon ? Voici ce que recommandent les gagnants du concours #crypto-api

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

Le guide complet pour réussir une migration vers le cloud : stratégies et bonnes pratiques

La fuite de l'invite du système Claude Sonnet 3.5 : une analyse médico-légale

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps