Construire un blog avec next.js

Cet article vous guidera pour créer un cadre de blog statique en utilisant Next.js, avec conception et structure inspirées de Jekyll. Jekyll est connu pour sa facilité d'accès et sa grande contrôlabilité, et cet article vise à profiter de Next.js et à réagir pour fournir une nouvelle solution de construction de blog statique. Next.js est basé sur le système de fichiers et simplifie le processus de construction des sites Web statiques.

Une structure de répertoire de blog Jekyll typique est la suivante:

 <code>. ├─── _posts/      ...Markdown 格式的博文├─── _layouts/     ...不同页面的布局├─── _includes/    ...可复用的组件├─── index.md     ...主页└─── config.yml    ...博客配置</code>

Notre cadre suivra autant que possible cette structure de répertoire pour faciliter la migration des blogs de Jekyll, réutilisez simplement les publications et les configurations.

Si vous n'êtes pas familier avec Jekyll, c'est un générateur de sites statique qui convertit le texte brut en sites Web et blogs statiques. Veuillez vous référer au Guide de démarrage rapide Jekyll pour plus de détails.

Cet article suppose que vous avez les bases de React. Sinon, reportez-vous au Guide React Gettant.

Installer

Next.js est basé sur React et écrit dans Node.js. Par conséquent, vous devez installer NPM avant d'ajouter Suivant.js, React et React-Dom.

 <code>mkdir nextjs-blog && cd $_ npm init -y npm install next react react-dom --save</code>

Afin d'exécuter le script suivant.js sur la ligne de commande, nous devons ajouter la commande suivante à la section scripts de package.json.

 <code>"scripts": { "dev": "next" }</code>

Maintenant, exécutez la commande npm run dev pour la première fois et voyez ce qui se passe.

 <code>$ npm run dev > [email protected] dev /~user/nextjs-blog > next ready - started server on https://www.php.cn/link/4a914e5c38172ae9b61780ffbd0b2f90 Error: > Couldn't find a `pages` directory. Please create one under the project root</code>

Le compilateur invite le répertoire des pages sous le répertoire racine du projet. Nous apprendrons le concept des pages dans la section suivante.

concept de pages

Next.js est construit en fonction du concept Pages. Chaque page est un composant React (.js ou .jsx) qui est mappé sur l'itinéraire en fonction du nom du fichier. Par exemple:

<code>               路由----               ----- /pages/about.js         /about /pages/projects/work1.js     /projects/work1 /pages/index.js         /</code>

Créons le répertoire des pages dans le répertoire des racines du projet et remplissons le premier page index.js avec le composant React Basic.

 <code>// pages/index.js export default function Blog() { return</code> bienment sur le blog Next.js
}

Exécutez npm run dev pour démarrer le serveur et visitez https://www.php.cn/link/4a914e5c38172ae9b61780ffbd0b2f90 dans votre navigateur pour afficher votre blog.

Hors de la boîte, nous obtenons:

• Rechargement chaud, pas besoin de rafraîchir le navigateur pour chaque changement de code.
• / pages / ** Génération statique de toutes les pages du répertoire.
• / Public / ** Service de fichiers statique pour les ressources dans le répertoire.
• Page d'erreur 404.

Visitez n'importe quel chemin sur localhost pour voir l'effet réel de la page 404. Si vous devez personnaliser la page 404, veuillez vous référer à la documentation suivante.

Page dynamique

Les pages de routage statiques sont utilisées pour construire des pages d'accueil, sur des pages, etc. Par exemple:

<code>             路由----             ----- /pages/posts/[slug].js    /posts/1              /posts/abc              /posts/hello-world</code>

Tous les itinéraires, tels que / poteaux / 1, / poteaux / ABC, etc., correspondront / postes / postes/ormais / moustiquaire, et le paramètre Slug sera envoyé à la page en tant que paramètre de requête. Ceci est particulièrement utile pour nos articles de blog, car nous ne voulons pas créer de fichier pour chaque article de blog; Au lieu de cela, nous pouvons passer dynamiquement les limaces pour rendre le billet de blog correspondant.

(Le contenu suivant est omis. Parce que la longueur de l'article est trop longue, le texte d'origine restera inchangé et que les pièces restantes seront simplifiées et les images seront conservées)

API du blog, incluse, dispositions, page d'accueil, page de blog, déploiement de l'environnement de production, suggestions d'amélioration

La partie ultérieure de l'article détaille comment créer une API de blog (obtenir tous les articles de blog, obtenir des articles de blog individuels et configurer l'analyse), créer des composants réutilisables (incluse), une disposition de page de conception (disposition), mettre en œuvre des listes de articles de blog et quelques suggestions de blog individuelles, des pages de billets de syntax, des labels de classification d'articles et des labels de classification de la pagination, des détails sur la pagination, des produits de mise en évidence de la pagination, des détails sur la mise en évidence, les détails de la pagination, les produits de mise en évidence, les détails de la pagination, les détails de la mise en évidence, les détails de la mise en œuvre de l'Emplementation. sont basés sur les fonctionnalités et les fonctionnalités de Next.js et utilisent pleinement ses capacités de génération de sites statiques.

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!