Instrumentele low-code precum WordPress simplifică procesul de creare a blogului. Puteți folosi o temă prestabilită și puteți începe să scrieți postări pe blog în câteva ore. Dacă vrei mai mult control asupra codului tău și ai ceva timp liber, este mai bine să-ți construiești blogul de la zero. Puteți chiar să utilizați un cadru precum Next.js pentru a simplifica procesul.

Aflați cum să creați un blog Next.js simplu, care redă postări de reducere.

Crearea unui proiect Next.js

Next.js este un cadru React care simplifică modul în care construiți aplicații. Oferă multe instrumente și configurații din cutie, permițându-vă să începeți să scrieți cod imediat după instalarea acestuia.

Cel mai simplu mod de a începe cu Next.js este să rulezi comanda create-next-app într-un terminal:

npx crea-Următorul-app markdown-blog

Această comandă creează un proiect Next.js care conține toate fișierele necesare pentru a începe.

În primul rând, curățați index.js fișier să arate astfel:

import Cap din „următorul/cap”
import stiluri din „../styles/Home.module.css”





instagram viewer

exportMod implicitfuncţieAcasă() {
întoarcere (
<div className={styles.container}>
<Cap>
<titlu>Creați următoarea aplicație</title>
<meta nume="Descriere" continut="Generat de crearea următoarei aplicații" />
<link rel="pictograma" href="/favicon.ico" />
</Head>
</div>
 )
}

Creați postări de blog Markdown

Blogul va reda fișiere markdown stocate local în folderul proiectului. Deci, creați un folder nou la rădăcină numit conţinut pentru a stoca fișierele. În acest folder, creați un fișier nou numit create-active-link-nextjs.md și adăugați următoarele:


titlu: Cum să crea un activ legăturăîn Nextjs
descriere: personalizarea legăturilor active folosind useRouter()
este publicat: Adevărat
Data publicării: 22/07/2022
Etichete:
 - Următorul

## Conținut principal

Numele fișierului de reducere va face parte din adresa URL a postării, așa că asigurați-vă că este unul bun. De asemenea, notați conținutul dintre liniuțe. Acestea sunt metadatele postării și se numesc subiectul din față.

Analizarea fișierelor Markdown

Pentru fiecare postare de blog, trebuie să analizați conținutul de reducere și subiectul din față. Pentru Markdown, utilizați react-markdown, iar pentru datele frontale, utilizați materia gri.

React-markdown este o componentă React construită pe remark care convertește în siguranță markdown în HTML. Biblioteca de materii cenușii analizează materia frontală și convertește YAML într-un obiect.

Executați următoarea comandă în terminal pentru a instala react-markdown și gray-matter.

npm instalare react-markdown materie cenușie

Într-un folder nou numit utils, creați un fișier nou numit md.js. Veți crea funcții de ajutor care returnează conținutul postării de blog în acest fișier.

Obțineți toate postările publicate

În md.js, adăugați următorul cod pentru a returna toate postările din folderul de conținut.

import fs din „fs”;
import cale din "cale";
import materie din "materie cenusie";
exportconst getPath = (dosar: șir) => {
întoarcere path.join (process.cwd(), `/${folder}`); // Obține calea completă 
}


exportconst getFileContent = (nume fișier: șir, pliant:string) => {
const POSTS_PATH = getPath (dosar)
 returnează fs.readFileSync (path.join (POSTS_PATH, nume fișier), "utf8");
};


exportconst getAllPosts = (dosar: șir) => {
const POSTS_PATH = getPath (dosar)
întoarcere fs
 .readdirSync (POSTS_PATH) // obțineți fișiere în director
 .filter((cale) => /\\.md?$/.test (cale)) // numai fișiere .md
 .map((fileName) => { // hartă peste fiecare fișier
const sursă = getFileContent (nume fișier, folder); // preia conținutul fișierului
const slug = fileName.replace(/\\.md?$/, ""); // obțineți slug-ul din numele fișierului
const { date } = materie (sursa); // extrage materie frontală
întoarcere {
 materie prima: date,
 slug: slug,
 };
 });
};

În funcția getAllPosts():

  • Obțineți calea completă către folderul de conținut folosind modulul cale.
  • Obțineți fișierele din folderul de conținut folosind metoda fs.readdirSync().
  • Filtrați fișierele pentru a include numai fișierele cu extensia .md.
  • Preluați conținutul fiecărui fișier, inclusiv materialul frontal utilizând metoda hărții.
  • Returnează o matrice care conține materia frontală și slug-ul (numele fișierului fără extensia .md) pentru fiecare fișier.

Pentru a obține numai postările publicate, puteți filtra toate postările și le puteți returna numai pe cele a căror cheie estePublished în prima pagină este setată la adevărat.

exportconst getAllPublished = (dosar: șir) => {
const postări = getAllPosts (dosar)
const publicat = posts.filter((post) => {
întoarcere post.frontmatter.isPublished Adevărat
 })
întoarcere publicat
 }

În md.js, adăugați funcția getSinglePost() pentru a prelua conținutul unei singure postări.

exportconst getSinglePost = (slug: șir, pliant:string) => {
const sursa = getFileContent(`${slug}.md`, folder);
const { date: frontmatter, content } = materie (sursa);
întoarcere {
 materie primară,
 conţinut,
 };
};

Această funcție apelează funcția getFileContent() pentru a obține conținutul fiecărui fișier. Apoi, folosind pachetul de materie cenușie, funcția preia materia din față și conținutul de reducere.

Afișează toate postările de pe blog

Next.js oferă diferite opțiuni de randare, una dintre ele fiind generarea statică. Generarea statică este un tip de pre-rendare în care Next.js generează toate paginile HTML în timpul construirii. Îl folosești pentru a crea pagini statice rapide.

Verificați documentația oficială Nextjs pentru mai multe informații despre randare.

Next.js va pre-renda o pagină în momentul construirii folosind elementele de recuzită returnate de funcția getStaticProps. În acest caz, recuzita va fi o serie de postări publicate.

exportconst getStaticProps = asincron () => {
 const posts = getAllPublished("postări");
întoarcere {
 recuzită: { postări },
 };
};

Modificați fișierul index.js pentru a afișa o listă de postări de blog.

import Cap din „următorul/cap”;
import Legătură din „următorul/link”;
import { getAllPublished } din „../utils/md”;
funcţieAcasă({ postări }) {
întoarcere (
<div className={styles.container}>
<Cap>
<titlu>Creați următoarea aplicație</title>
<meta nume="Descriere" continut="Generat de crearea următoarei aplicații" />
<link rel="pictograma" href="/favicon.ico" />
</Head>
<div>
 {posts.map((post) => (
<cheie articol={post.slug}>
<p>[ {post.frontmatter.tags.join(", ")} ]</p>
`postări/${post.slug}`}>
<A>{post.frontmatter.title}</A>
</Link>{""}
<p>{post.frontmatter.description}</p>
</article>
 ))}
</div>
</div>
 );
}


exportconst getStaticProps = asincron () => {
 const posts = getAllPublished("conţinut");


întoarcere {
 recuzită: { postări },
 };
};
exportMod implicit Acasă;

Componenta Home folosește postările returnate de getStaticProps. Iterează peste ele folosind funcția de hartă și pentru fiecare postare, afișează un titlu, un link către postarea completă și o descriere.

Afișează o postare pe blog

După cum sa menționat, numele fișierelor postărilor vor fi folosite ca căi URL. Aceste căi sunt, de asemenea, dinamice, așa că trebuie să le generați în timpul construirii. Next.js vă permite să faceți acest lucru folosind funcția getStaticPaths().

De exemplu, în acest cod, căile sunt generate din numele fișierelor markdown.

exportconst getStaticPaths = asincron () => {
 const paths = getAllPublished("postări").map(({ slug }) => ({ parametri: { slug } }));
întoarcere {
 poteci,
 da înapoi: fals,
 };
};

Rețineți că utilizați datele postărilor returnate de funcția de ajutor getAllPublished() creată anterior.

De asemenea, setați fallback la false, care returnează a eroare 404 pentru căi care nu există.

getStaticPaths() este de obicei folosit cu getStaticProps() care preia conținutul fiecărei postări pe baza parametrilor.

exportconst getStaticProps = asincron ({ parametri }) => {
const post = așteaptă getSinglePost (params.slug, „postări”);
întoarcere {
 recuzită: { ...post },
 };
};

Pentru a reda markdown-ul în HTML, utilizați react-markdown.

import ReactMarkdown din „reducere de reacție”
import { getAllPosts, getSinglePost } din „../../utils/md”;
const Postare = ({ continut, frontmatter }) => {
întoarcere (
<div>
<p>{frontmatter.tags.join(', ')}</p>
<h2>{frontmatter.title}</h2>
<span>{frontmatter.publishedDate}</span>
<ReactMarkdown>{conţinut}</ReactMarkdown>
</div>
 );
};

Această componentă va reda conținutul fiecărei postări de blog și adresa URL corespunzătoare.

Dacă creezi un blog pentru dezvoltatori, poți adăugați evidențierea sintaxelor capacitate pentru fiecare componentă.

Stilizarea blogului Next.js Markdown

Până acum, ați creat un blog de markdown Next.js care afișează o listă de postări de blog și redă conținutul postării respective. Pentru a face blogul să arate mai frumos, ar trebui să adăugați stiluri CSS.

Next.js are un suport bun CSS și puteți alege să utilizați biblioteci CSS-in-JS precum componentele stilate. Dacă preferați să separați CSS de JS, puteți utiliza modulele CSS.