Strumenti low-code come WordPress semplificano il processo di creazione del blog. Puoi utilizzare un tema predefinito e iniziare a scrivere post sul blog in poche ore. Se vuoi un maggiore controllo sul tuo codice e hai un po' di tempo a disposizione, è meglio creare il tuo blog da zero. Puoi persino utilizzare un framework come Next.js per semplificare il processo.

Scopri come creare un semplice blog Next.js che visualizzi i post markdown.

Creazione di un progetto Next.js

Next.js è un framework React che semplifica la creazione di applicazioni. Fornisce molti strumenti e configurazioni pronti all'uso, consentendo di iniziare a scrivere il codice immediatamente dopo averlo installato.

Il modo più semplice per iniziare con Next.js è eseguire il comando create-next-app in un terminale:

npx creare-Prossimo-app markdown-blog

Questo comando crea un progetto Next.js contenente tutti i file necessari per l'avvio.

Per prima cosa, pulisci il file index.js file in modo che assomigli a questo:

importare Testa da 'successivo/testa'
importare stili da '../stili/Home.module.css'





instagram viewer

esportarepredefinitofunzioneCasa() {
ritorno (
<div className={styles.container}>
<Testa>
<titolo>Crea app successiva</title>
<nome meta="descrizione" contenuto="Generato da crea la prossima app" />
<collegamento rel="icona" href="/favicon.ico" />
</Head>
</div>
 )
}

Crea post di blog Markdown

Il blog eseguirà il rendering file markdown memorizzato localmente nella cartella del progetto. Quindi, crea una nuova cartella nella radice chiamata contenuto per archiviare i file. In questa cartella, crea un nuovo file chiamato create-link-attivo-nextjs.md e aggiungi quanto segue:


titolo: Come creare un attivo collegamentoIn Nextjs
descrizione: personalizzazione dei collegamenti attivi utilizzando useRouter()
èPubblicato: VERO
Data di pubblicazione: 22/07/2022
tag:
 - Prossimo

## Contenuto principale

Il nome del file markdown farà parte dell'URL del post, quindi assicurati che sia valido. Inoltre, annota il contenuto tra i trattini. Questi sono i metadati del post e si chiamano front matter.

Analisi dei file Markdown

Per ogni post del blog, devi analizzare il contenuto del markdown e la parte introduttiva. Per Markdown, usa react-markdown e per i dati della parte frontale, usa la materia grigia.

React-markdown è un componente React costruito su un commento che converte in modo sicuro il markdown in HTML. La libreria della materia grigia analizza la parte introduttiva e converte YAML in un oggetto.

Esegui il seguente comando nel terminale per installare react-markdown e gray-matter.

npm installare materia grigia di reazione-markdown

In una nuova cartella chiamata utils, crea un nuovo file chiamato md.js. Creerai funzioni di supporto che restituiscono il contenuto del post del blog in questo file.

Ottieni tutti i post pubblicati

In md.js, aggiungi il seguente codice per restituire tutti i post nella cartella dei contenuti.

importare fs da "fs";
importare sentiero da "sentiero";
importare questione da "materia grigia";
esportarecost getPath = (cartella: stringa) => {
ritorno percorso.join (processo.cwd(), `/${cartella}`); // Ottieni il percorso completo 
}


esportarecost getFileContent = (nome file: stringa, cartella:stringa) => {
cost POSTS_PATH = getPath (cartella)
 return fs.readFileSync (path.join (POSTS_PATH, nome file), "utf8");
};


esportarecost getAllPosts = (cartella: stringa) => {
cost POSTS_PATH = getPath (cartella)
ritorno fs
 .readdirSync (POSTS_PATH) // recupera i file nella directory
 .filter((percorso) => /\\.md?$/.test (percorso)) // solo file .md
 .map((nomefile) => { // mappa su ogni file
cost source = getFileContent (nomefile, cartella); // recupera il contenuto del file
cost slug = nomefile.replace(/\\.md?$/, ""); // prende lo slug dal nome del file
cost { dati } = materia (fonte); // estrae il frontmatter
ritorno {
 frontmatter: dati,
 lumaca: lumaca,
 };
 });
};

Nella funzione getAllPosts():

  • Ottieni il percorso completo della cartella dei contenuti utilizzando il modulo del percorso.
  • Ottieni i file nella cartella dei contenuti utilizzando il metodo fs.readdirSync().
  • Filtra i file per includere solo i file con estensione .md.
  • Recupera il contenuto di ogni file, inclusa la parte introduttiva, utilizzando il metodo map.
  • Restituisce un array contenente la parte introduttiva e lo slug (il nome del file senza l'estensione .md) di ciascun file.

Per ottenere solo i post pubblicati, puoi filtrare tutti i post e restituire solo quelli la cui chiave isPublished nella parte introduttiva è impostata su true.

esportarecost getAllPublished = (cartella: stringa) => {
cost posts = getAllPosts (cartella)
cost pubblicato = posts.filter((post) => {
ritorno post.frontmatter.isPublished VERO
 })
ritorno pubblicato
 }

In md.js, aggiungi la funzione getSinglePost() per recuperare i contenuti di un singolo post.

esportarecost getSinglePost = (slug: stringa, cartella:stringa) => {
cost sorgente = getContenutoFile(`${lumaca}.md`, cartella);
cost { dati: frontmatter, content } = materia (fonte);
ritorno {
 frontespizio,
 contenuto,
 };
};

Questa funzione chiama la funzione getFileContent() per ottenere il contenuto di ciascun file. Quindi, utilizzando il pacchetto di materia grigia, la funzione recupera la parte introduttiva e il contenuto del markdown.

Visualizza tutti i post del blog

Next.js offre diverse opzioni di rendering, una delle quali è la generazione statica. La generazione statica è un tipo di pre-rendering in cui Next.js genera tutte le pagine HTML durante la fase di compilazione. Lo usi per creare pagine statiche veloci.

Dai un'occhiata al documentazione ufficiale di Nextjs per ulteriori informazioni sul rendering.

Next.js eseguirà il pre-rendering di una pagina in fase di compilazione utilizzando gli oggetti di scena restituiti dalla funzione getStaticProps. In questo caso, gli oggetti di scena saranno una serie di post pubblicati.

esportarecost getStaticProps = asincrono () => {
 const post = getAllPublished("post");
ritorno {
 oggetti di scena: { post },
 };
};

Modifica il file index.js per visualizzare un elenco di post del blog.

importare Testa da "successivo/testa";
importare Collegamento da "successivo/collegamento";
importare { getAllPublished } da "../utils/md";
funzioneCasa({ post }) {
ritorno (
<div className={styles.container}>
<Testa>
<titolo>Crea app successiva</title>
<nome meta="descrizione" contenuto="Generato da crea la prossima app" />
<collegamento rel="icona" href="/favicon.ico" />
</Head>
<div>
 {posts.map((post) => (
<chiave articolo={post.slug}>
<P>[ {post.frontmatter.tags.join(", ")} ]</P>
`post/${post.slug}`}>
<UN>{post.frontmatter.title}</UN>
</Link>{""}
<P>{post.frontmatter.description}</P>
</article>
 ))}
</div>
</div>
 );
}


esportarecost getStaticProps = asincrono () => {
 const post = getAllPublished("contenuto");


ritorno {
 oggetti di scena: { post },
 };
};
esportarepredefinito Casa;

Il componente Home utilizza i post restituiti da getStaticProps. Itera su di essi utilizzando la funzione map e per ogni post mostra un titolo, un collegamento al post completo e una descrizione.

Visualizza un post sul blog

Come accennato, i nomi dei file dei post verranno utilizzati come percorsi URL. Anche questi percorsi sono dinamici, quindi è necessario generarli durante la fase di compilazione. Next.js ti consente di farlo utilizzando la funzione getStaticPaths().

Ad esempio, in questo codice, i percorsi vengono generati dai nomi dei file markdown.

esportarecost getStaticPath = asincrono () => {
 const percorsi = getAllPublished("post").map(({ slug }) => ({ parametri: { slug } }));
ritorno {
 sentieri,
 ricaderci: falso,
 };
};

Nota che stai utilizzando i dati dei post restituiti dalla funzione helper getAllPublished() che hai creato in precedenza.

Stai anche impostando fallback su false, che restituisce a errore 404 per percorsi che non esistono.

getStaticPaths() viene solitamente utilizzato con getStaticProps() che recupera il contenuto di ogni post in base ai parametri.

esportarecost getStaticProps = asincrono ({ param }) => {
cost posta = aspetta getSinglePost (params.slug, "posts");
ritorno {
 oggetti di scena: {... post },
 };
};

Per eseguire il rendering del markdown in HTML, utilizzare react-markdown.

importare ReagisciMarkdown da 'reagire-markdown'
importare { getAllPosts, getSinglePost } da "../../utils/md";
cost Post = ({ contenuto, argomento principale }) => {
ritorno (
<div>
<P>{frontmatter.tags.join(', ')}</P>
<h2>{frontmatter.title}</h2>
<span>{frontmatter.publicedDate}</span>
<ReagisciMarkdown>{contenuto}</ReactMarkdown>
</div>
 );
};

Questo componente eseguirà il rendering dei contenuti di ciascun post del blog e del relativo URL.

Se crei un blog per sviluppatori, puoi farlo aggiungere l'evidenziazione della sintassi capacità per ogni componente.

Stile del blog Next.js Markdown

Finora, hai creato un blog markdown Next.js che visualizza un elenco di post del blog e ne esegue il rendering del contenuto. Per rendere il blog più gradevole, dovresti aggiungere stili CSS.

Next.js ha un buon supporto CSS e puoi scegliere di utilizzare le librerie CSS-in-JS come componenti con stile. Se preferisci separare CSS da JS, puoi utilizzare i moduli CSS.