Lavkodeværktøjer som WordPress forenkler blogoprettelsesprocessen. Du kan bruge et foruddefineret tema og begynde at skrive blogindlæg i løbet af få timer. Hvis du vil have mere kontrol over din kode og have lidt tid på dine hænder, er det bedre at bygge din blog op fra bunden. Du kan endda bruge et framework som Next.js til at forenkle processen.

Lær, hvordan du opbygger en simpel Next.js-blog, der gengiver markdown-indlæg.

Oprettelse af et Next.js-projekt

Next.js er en React-ramme, der forenkler, hvordan du bygger applikationer. Det giver mange værktøjer og konfigurationer ud af æsken, så du kan begynde at skrive kode umiddelbart efter installationen.

Den nemmeste måde at komme i gang med Next.js er ved at køre kommandoen create-next-app i en terminal:

npx skab-Næste-app markdown-blog

Denne kommando opretter et Next.js-projekt, der indeholder alle de nødvendige filer for at starte.

Første ting først, ryd op i index.js fil til at se sådan ud:

importere Hoved fra 'næste/hoved'
importere stilarter fra '../styles/Home.module.css'





instagram viewer

eksportStandardfungereHjem() {
Vend tilbage (
<div className={styles.container}>
<Hoved>
<titel>Opret næste app</title>
<metanavn="beskrivelse" indhold="Genereret af oprette næste app" />
<link rel="ikon" href="/favicon.ico" />
</Head>
</div>
 )
}

Opret Markdown-blogindlæg

Bloggen vil gengive markdown-filer gemt lokalt i projektmappen. Så opret en ny mappe ved roden kaldet indhold for at gemme filerne. I denne mappe skal du oprette en ny fil kaldet create-active-link-nextjs.md og tilføje følgende:


titel: Sådan gør du skab en aktiv linki Nextjs
beskrivelse: Tilpasning af aktive links ved hjælp af useRouter()
er udgivet: rigtigt
offentliggjort dato: 2022/07/22
tags:
 - Næste

## Hovedindhold

Navnet på markdown-filen vil være en del af post-URL'en, så sørg for, at den er god. Bemærk også indholdet mellem stregerne. Dette er opslagets metadata og kaldes det forreste emne.

Parsing af Markdown-filer

For hvert blogindlæg skal du analysere markdown-indholdet og den forreste sag. Til Markdown skal du bruge react-markdown og for front matter data, brug grå-stof.

React-markdown er en React-komponent bygget på bemærkning, der sikkert konverterer markdown til HTML. Gråstofbiblioteket analyserer frontmateriale og konverterer YAML til et objekt.

Udfør følgende kommando i terminalen for at installere react-markdown og grey-stof.

npm installere reagere-markdown grå-stof

I en ny mappe kaldet utils skal du oprette en ny fil kaldet md.js. Du vil oprette hjælpefunktioner, der returnerer blogindlægsindhold i denne fil.

Få alle offentliggjorte indlæg

I md.js skal du tilføje følgende kode for at returnere alle indlæg i indholdsmappen.

importere fs fra "fs";
importere sti fra "sti";
importere stof fra "grå-stof";
eksportkonst getPath = (mappe: streng) => {
Vend tilbage path.join (proces.cwd(), `/${folder}`); // Få fuld sti 
}


eksportkonst getFileContent = (filnavn: streng, folder:streng) => {
konst POSTS_PATH = getPath (mappe)
 returner fs.readFileSync (sti.join (POSTS_PATH, filnavn), "utf8");
};


eksportkonst getAllPosts = (mappe: streng) => {
konst POSTS_PATH = getPath (mappe)
Vend tilbage fs
 .readdirSync (POSTS_PATH) // få filer i mappen
 .filter((sti) => /\\.md?$/.test (sti)) // kun .md-filer
 .map((filnavn) => { // kort over hver fil
konst source = getFileContent (filnavn, mappe); // hent filens indhold
konst slug = filnavn.erstat(/\\.md?$/, ""); // få slug fra filnavnet
konst { data } = stof (kilde); // udtrække frontmatter
Vend tilbage {
 frontmatter: data,
 snegl: snegl,
 };
 });
};

I funktionen getAllPosts():

  • Få den fulde sti til indholdsmappen ved hjælp af stimodulet.
  • Hent filerne i indholdsmappen ved hjælp af fs.readdirSync()-metoden.
  • Filtrer filerne til kun at inkludere filer med filtypenavnet .md.
  • Hent indholdet af hver fil, inklusive frontmaterialet ved hjælp af kortmetoden.
  • Returner et array, der indeholder front-materialet og slug (filnavnet uden .md-udvidelsen) for hver fil.

For kun at få de offentliggjorte indlæg, kan du filtrere alle indlæg og kun returnere dem, hvis isPublished-nøgle i fronten er sat til sand.

eksportkonst getAllPublished = (mappe: streng) => {
konst posts = getAllPosts (mappe)
konst publiceret = posts.filter((post) => {
Vend tilbage post.frontmatter.er udgivet rigtigt
 })
Vend tilbage offentliggjort
 }

Tilføj funktionen getSinglePost() i md.js for at hente indholdet af et enkelt indlæg.

eksportkonst getSinglePost = (slug: streng, folder:streng) => {
konst source = getFileContent(`${slug}.md`, mappe);
konst { data: frontmatter, indhold } = stof (kilde);
Vend tilbage {
 frontmaterie,
 indhold,
 };
};

Denne funktion kalder funktionen getFileContent() for at få indholdet af hver fil. Ved hjælp af gråstof-pakken henter funktionen derefter forsiden og markdown-indholdet.

Vis alle blogindlæg

Next.js giver forskellige gengivelsesmuligheder, en af ​​dem er statisk generering. Statisk generering er en form for præ-rendering, hvor Next.js genererer alle HTML-siderne under byggetiden. Du bruger det til at lave hurtige statiske sider.

Tjek ud officiel Nextjs dokumentation for mere information om gengivelse.

Next.js vil præ-rendere en side på byggetidspunktet ved hjælp af de rekvisitter, der returneres af getStaticProps-funktionen. I dette tilfælde vil rekvisitterne være en række offentliggjorte indlæg.

eksportkonst getStaticProps = asynkron () => {
 const posts = getAllPublished("indlæg");
Vend tilbage {
 rekvisitter: { indlæg },
 };
};

Rediger filen index.js for at vise en liste over blogindlæg.

importere Hoved fra "næste/hoved";
importere Link fra "næste/link";
importere { getAllPublished } fra "../utils/md";
fungereHjem({ indlæg }) {
Vend tilbage (
<div className={styles.container}>
<Hoved>
<titel>Opret næste app</title>
<metanavn="beskrivelse" indhold="Genereret af oprette næste app" />
<link rel="ikon" href="/favicon.ico" />
</Head>
<div>
 {posts.map((post) => (
<artikelnøgle={post.slug}>
<s>[ {post.frontmatter.tags.join(", ")} ]</s>
`indlæg/${post.slug}`}>
<-en>{post.frontmatter.title}</en>
</Link>{""}
<s>{post.frontmatter.description}</s>
</article>
 ))}
</div>
</div>
 );
}


eksportkonst getStaticProps = asynkron () => {
 const posts = getAllPublished("indhold");


Vend tilbage {
 rekvisitter: { indlæg },
 };
};
eksportStandard Hjem;

Home-komponenten bruger de indlæg, der returneres af getStaticProps. Det itererer over dem ved hjælp af kortfunktionen, og for hvert indlæg viser det en titel, et link til det fulde indlæg og en beskrivelse.

Vis et blogindlæg

Som nævnt vil indlæggenes filnavne blive brugt som URL-stier. Disse stier er også dynamiske, så du skal generere dem under byggetiden. Next.js giver dig mulighed for at gøre dette ved at bruge getStaticPaths()-funktionen.

For eksempel genereres stierne i denne kode ud fra navnene på markdown-filerne.

eksportkonst getStaticPaths = asynkron () => {
 const stier = getAllPublished("indlæg").map(({ slug }) => ({ params: { slug } }));
Vend tilbage {
 stier,
 Falde tilbage: falsk,
 };
};

Bemærk, at du bruger indlægsdataene, der returneres af getAllPublished()-hjælpefunktionen, du oprettede før.

Du indstiller også fallback til false, hvilket returnerer en 404 fejl for stier, der ikke eksisterer.

getStaticPaths() bruges normalt sammen med getStaticProps() som henter indholdet af hvert indlæg baseret på parametrene.

eksportkonst getStaticProps = asynkron ({ params }) => {
konst indlæg = vente getSinglePost (params.slug, "indlæg");
Vend tilbage {
 rekvisitter: { ...post },
 };
};

For at gengive markdown til HTML, brug react-markdown.

importere ReactMarkdown fra 'reager-afmærkning'
importere { getAllPosts, getSinglePost } fra "../../utils/md";
konst Indlæg = ({ indhold, frontmatter }) => {
Vend tilbage (
<div>
<s>{frontmatter.tags.join(', ')}</s>
<h2>{frontmatter.title}</h2>
<span>{frontmatter.publishedDate}</span>
<ReactMarkdown>{indhold}</ReactMarkdown>
</div>
 );
};

Denne komponent gengiver indholdet af hvert blogindlæg og dets tilhørende URL.

Hvis du opretter en udviklerblog, kan du tilføje syntaksfremhævning kapacitet for hver komponent.

Styling af Next.js Markdown-bloggen

Indtil videre har du oprettet en Next.js markdown-blog, der viser en liste over blogindlæg og gengiver indholdet af det pågældende indlæg. For at få bloggen til at se pænere ud, bør du tilføje CSS-stile.

Next.js har god CSS-understøttelse, og du kan vælge at bruge CSS-in-JS-biblioteker som stylede komponenter. Hvis du foretrækker at adskille CSS fra JS, kan du bruge CSS-moduler.