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

Table des matières

1. Introduction
2. Mise en place du projet
3. Comprendre la structure des dossiers
4. Liste de tous les articles de blog
5. Présenter un article de blog unique
6. Utilisation de l'interface utilisateur de chargement et de la diffusion en continu dans Next.js
7. Conclusion
8. 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 yarn dans ce guide, n'hésitez pas à utiliser npm ou pnpm :

 yarn dev

Maintenant, visitez http://localhost:3000 où vous trouverez la page de modèle Next.js par défaut.

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 /app/api/posts/route.js , nous allons configurer une API factice pour les articles de blog. Ici, next: { revalidate: 60 } spécifie que nous souhaitons revalider nos données toutes les 60 secondes.

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 :

• Revalidation basée sur le temps : 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 à la demande : 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 basée sur le temps

Pour revalider les données à un intervalle de temps, vous pouvez utiliser l'option next.revalidate de fetch pour définir la durée de vie du cache d'une ressource (en secondes).

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, PostsPage , 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 !

 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 Link de Next.js :

 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é, SinglePost , utilise la récupération de données côté client.

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 pré-rendus sur le serveur et hydratés sur le client. Vous pouvez considérer les composants clients comme la façon dont les composants du routeur de pages ont toujours fonctionné.

 '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

Conseil : 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 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!