Come creare un blog con Next e MDX

Next.js è un framework React che ti consente di creare rapidamente app statiche e dinamiche. È pronto per la produzione e supporta il rendering lato server e la generazione di siti statici pronti all'uso, rendendo le app Next.js veloci e SEO-friendly.

In questo tutorial, spiegherò prima cosa è esattamente Next.js e perché lo useresti invece di Create React App o Gatsby. Quindi, ti mostrerò come creare un blog su cui puoi scrivere e visualizzare i post usando Next.js e MDX.

Per iniziare, avrai bisogno di un po' di esperienza con React. La conoscenza di Next.js sarebbe utile ma non è obbligatoria. Questo tutorial andrebbe a vantaggio di coloro che desiderano creare un blog (personale o organizzativo) utilizzando Next.js o stanno ancora cercando cosa utilizzare.

Immergiamoci.

Cos'è Next.js?

Next.js è un framework React creato e mantenuto da Vercel. È costruito con React, Node.js, Babel e Webpack. È pronto per la produzione perché include molte fantastiche funzionalità che di solito verrebbero configurate in un'app React "vanilla".

Il framework Next.js può eseguire il rendering delle app sul server o esportarle in modo statico. Non aspetta che il browser carichi JavaScript per mostrare il contenuto, il che rende le app Next.js SEO-friendly e velocissime.

Perché utilizzare Next.js su Create React App?

Create React App è uno strumento utile che offre una configurazione di build moderna senza configurazione e senza il fastidio di dover configurare Webpack, Babel e così via o di dover mantenere le loro dipendenze. È il modo consigliato per creare app React al giorno d'oggi. Ha un modello per TypeScript e viene fornito anche con la libreria di test React.

Tuttavia, se desideri creare un'app multipagina, dovrai installare una libreria aggiuntiva, come se stessi eseguendo il rendering di un'app React sul server. La configurazione aggiuntiva potrebbe essere un problema e qualsiasi pacchetto installato potrebbe aumentare la dimensione del pacchetto finale della tua app.

Questo è esattamente il problema che Next.js intende risolvere. Offre la migliore esperienza di sviluppo, con tutte le cose necessarie per la produzione. Viene fornito con diverse funzioni interessanti:

• Esportazione statica (pre-rendering)
  Next.js ti consente di esportare la tua app Next.js in fase di compilazione in HTML statico che viene eseguito senza un server. È il modo consigliato per generare il tuo sito Web perché viene eseguito in fase di creazione e non a ogni richiesta.
• Rendering lato server (pre-rendering)
  Pre-renderizza le pagine in HTML sul server ad ogni richiesta.
• Divisione automatica del codice
  A differenza di React, Next.js divide automaticamente il codice e carica solo il JavaScript necessario, il che rende l'app veloce.
• Routing basato su file system
  Next.js utilizza il file system per abilitare il routing nell'app, il che significa che ogni file nella directory delle pages verrà trattato automaticamente come un percorso.
• Ricaricamento a caldo del codice
  Next.js si affida a React Fast Refresh per ricaricare a caldo il codice, offrendo un'esperienza di sviluppo eccezionale.
• Opzioni di stile
  Il framework Next.js ha il supporto integrato per Styled JSX, moduli CSS, Sass, LESS e altro.

Next.js contro Gatsby

Gatsby è un generatore di siti statici basato su React e GraphQL. È popolare e ha un enorme ecosistema che fornisce temi, plugin, ricette e così via.

I siti Web Gatsby e Next.js sono super veloci perché entrambi vengono visualizzati sul server o in modo statico, il che significa che il codice JavaScript non attende il caricamento del browser. Confrontiamoli in base all'esperienza dello sviluppatore.

Gatsby è facile per cominciare, soprattutto se conosci già React. Tuttavia, Gatsby utilizza GraphQL per eseguire query su dati e pagine locali. L'uso di Gatsby per creare questo semplice blog potrebbe essere eccessivo perché GraphQL ha una curva di apprendimento e il tempo di query e creazione delle pagine statiche sarebbe un po' più lungo. Se hai creato questo stesso blog due volte, prima con Gatsby e poi con Next.js, quello creato con Next.js sarebbe molto più veloce in fase di compilazione perché utilizza JavaScript normale per interrogare dati e pagine locali.

Spero che tu sfrutti la potenza del framework Next.js e capisci perché è molto più pratico di alcune alternative. È anche un'ottima scelta se il tuo sito Web fa molto affidamento sulla SEO perché la tua app sarà facile e veloce da scansionare per i robot di Google. Questo è il motivo per cui useremo Next.js in questo articolo per creare un blog con la libreria MDX.

Iniziamo configurando una nuova app Next.js.

Impostare

Esistono due modi per creare un'app Next.js. Possiamo configurare una nuova app manualmente o utilizzare Crea app successiva. Sceglieremo quest'ultimo perché è il modo consigliato e imposterà tutto automaticamente per noi.

Per avviare una nuova app, esegui quanto segue nell'interfaccia della riga di comando (CLI):

 npx create-next-app

Una volta inizializzato il progetto, strutturiamo l'app Next.js come segue:

 src ├── components | ├── BlogPost.js | ├── Header.js | ├── HeadPost.js | ├── Layout.js | └── Post.js ├── pages | ├── blog | | ├── post-1 | | | └── index.mdx | | ├── post-2 | | | └── index.mdx | | └── post-3 | | └── index.mdx | ├── index.js | └── \_app.js ├── getAllPosts.js ├── next.config.js ├── package.json ├── README.md └── yarn.lock

Come puoi vedere, il nostro progetto ha una struttura di file semplice. Ci sono tre cose da notare:

• _app.js ci consente di aggiungere alcuni contenuti al componente App.js per renderlo globale.
• getAllPosts.js ci aiuta a recuperare i post del blog dalla cartella pages/blog . A proposito, puoi nominare il file come vuoi.
• next.config.js è il file di configurazione per la nostra app Next.js.

Tornerò su ciascun file più tardi e spiegherò cosa fa. Per ora, vediamo il pacchetto MDX.

Installazione della libreria MDX

MDX è un formato che ci consente di scrivere senza problemi JSX e importare componenti nei nostri file Markdown. Ci consente di scrivere Markdown regolari e incorporare anche componenti React nei nostri file.

Per abilitare MDX nell'app, è necessario installare la libreria @mdx-js/loader . Per farlo, andiamo prima alla radice del progetto e poi eseguiamo questo comando nella CLI:

 yarn add @mdx-js/loader

Oppure, se stai usando npm:

 npm install @mdx-js/loader

Quindi, installa @next/mdx , che è una libreria specifica per Next.js. Esegui questo comando nella CLI:

 yarn add @next/mdx

Oppure, per npm:

 npm install @next/mdx

Grande! Abbiamo finito di allestire. Sporciamoci le mani e codifichiamo qualcosa di significativo.

Configurazione del file next.config.js

 const withMDX = require("@next/mdx")({ extension: /\.mdx?$/ }); module.exports = withMDX({ pageExtensions: ["js", "jsx", "md", "mdx"] });

In precedenza in questo tutorial, ho detto che i file nella cartella delle pages sarebbero stati trattati come pagine/percorsi da Next.js in fase di compilazione. Per impostazione predefinita, Next.js selezionerà solo i file con estensione .js o .jsx . Ecco perché abbiamo bisogno di un file di configurazione, per aggiungere alcune personalizzazioni al comportamento predefinito di Next.js.

Il file next.config.js indica al framework che anche i file con estensione .md o .mdx devono essere trattati come pagine/percorsi in fase di compilazione perché la cartella del blog che contiene gli articoli si trova nella directory delle pages .

Detto questo, possiamo iniziare a recuperare i post del blog nella parte successiva.

Recupero dei post del blog

Uno dei motivi per cui creare un blog con Next.js è facile e semplice è che non è necessario GraphQL o simili per recuperare i post locali. Puoi semplicemente usare JavaScript normale per ottenere i dati.

In getAllPosts.js :

 function importAll(r) { return r.keys().map((fileName) => ({ link: fileName.substr(1).replace(/\/index\.mdx$/, ""), module: r(fileName) })); } export const posts = importAll( require.context("./pages/blog/", true, /\.mdx$/) );

All'inizio questo file può intimidire. E' una funzione che importa tutti i file MDX dalla cartella pages/blog , e per ogni post restituisce un oggetto con il percorso del file, senza estensione ( /post-1 ), e i dati del post del blog.

Con questo in atto, ora possiamo creare i componenti per definire lo stile e mostrare i dati nella nostra app Next.js.

Costruire i componenti

In components/Layout.js :

 import Head from "next/head"; import Header from "./Header"; export default function Layout({ children, pageTitle, description }) { return ( <> <Head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta charSet="utf-8" /> <meta name="Description" content={description}></meta> <title>{pageTitle}</title> </Head> <main> <Header /> <div className="content">{children}</div> </main> </> ); }

Qui abbiamo il componente Layout , che useremo come wrapper per il blog. Riceve i metadati da mostrare in testa alla pagina e il componente da visualizzare.

In components/Post.js :

 import Link from 'next/link' import { HeadPost } from './HeadPost' export const Post = ({ post }) => { const { link, module: { meta }, } = post return ( <article> <HeadPost meta={meta} /> <Link href={'/blog' + link}> <a>Read more →</a> </Link> </article> ) }

Questo componente è responsabile della visualizzazione di un'anteprima di un post del blog. Riceve l'oggetto post da mostrare come oggetti di scena. Successivamente, utilizziamo la destrutturazione per estrarre il link del post e il meta da mostrare dall'oggetto. Con ciò, ora possiamo passare i dati ai componenti e gestire l'instradamento con il componente Link .

In components/BlogPost.js :

 import { HeadPost } from './HeadPost' export default function BlogPost({ children, meta}) { return ( <> <HeadPost meta={meta} isBlogPost /> <article>{children}</article> </> ) }

Il componente BlogPost ci aiuta a rendere un singolo articolo. Riceve il post da mostrare e il suo meta oggetto.

Finora abbiamo trattato molto, ma non abbiamo articoli da mostrare. Risolviamolo nella prossima sezione.

Scrivere post con MDX

 import BlogPost from '../../../components/BlogPost' export const meta = { title: 'Introduction to Next.js', description: 'Getting started with the Next framework', date: 'Aug 04, 2020', readTime: 2 } export default ({ children }) => <BlogPost meta={meta}>{children}</BlogPost>; ## My Headline Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque maximus pellentesque dolor non egestas. In sed tristique elit. Cras vehicula, nisl vel ultricies gravida, augue nibh laoreet arcu, et tincidunt augue dui non elit. Vestibulum semper posuere magna, quis molestie mauris faucibus ut.

Come puoi vedere, importiamo il componente BlogPost , che riceve il meta e il corpo del post.

Il parametro children è il corpo del post del blog o, per essere precisi, tutto ciò che viene dopo il meta oggetto. È la funzione responsabile del rendering del post.

Con questa modifica, possiamo passare al file index.js e visualizzare i post nella home page.

Visualizzazione dei post

 import { Post } from "../components/Post"; import { posts } from "../getAllPosts"; export default function IndexPage() { return ( <> {posts.map((post) => ( <Post key={post.link} post={post} /> ))} </> ); }

Qui, iniziamo importando il componente Post e i post recuperati dalla cartella del blog . Successivamente, esaminiamo l'array di articoli e, per ogni post, utilizziamo il componente Post per visualizzarlo. Fatto ciò, ora siamo in grado di recuperare i post e visualizzarli sulla pagina.

Abbiamo quasi finito. Tuttavia, il componente Layout non viene ancora utilizzato. Possiamo usarlo qui e avvolgerci i nostri componenti. Ma ciò non influirà sulle pagine degli articoli. È qui che entra in gioco il file _app.js . Usiamolo nella prossima sezione.

Utilizzando il file _app.js

Qui, il simbolo di sottolineatura ( _ ) è molto importante. Se lo ometti, Next.js tratterà il file come una pagina/percorso.

 import Layout from "../components/Layout"; export default function App({ Component, pageProps }) { return ( <Layout pageTitle="Blog" description="My Personal Blog"> <Component {...pageProps} /> </Layout> ); }

Next.js usa il componente App per inizializzare le pagine. Lo scopo di questo file è sovrascriverlo e aggiungere alcuni stili globali al progetto. Se hai stili o dati che devono essere condivisi nel progetto, inseriscili qui.

Ora possiamo sfogliare la cartella del progetto nella CLI ed eseguire il comando seguente per visualizzare in anteprima il blog nel browser:

 yarn dev

Oppure, in npm:

 npm run dev

Se apri https://localhost:3000 nel browser, sarai in grado di vedere questo:

Grande! Il nostro blog sembra buono. Abbiamo finito di creare l'app blog con Next.js e MDX.

Conclusione

In questo tutorial, abbiamo esaminato Next.js creando un blog utilizzando la libreria MDX. Il framework Next.js è uno strumento utile che rende le app React SEO-friendly e veloci. Può essere utilizzato per creare siti Web JAMstack statici e dinamici in pochissimo tempo, perché è pronto per la produzione e include alcune caratteristiche interessanti. Next.js è ampiamente utilizzato dalle grandi aziende e le sue prestazioni continuano a migliorare. È sicuramente qualcosa da verificare per il tuo prossimo progetto.

Puoi visualizzare in anteprima il progetto finito su CodeSandbox.

Grazie per aver letto!

Risorse

Queste utili risorse ti porteranno oltre lo scopo di questo tutorial.

• Documentazione Next.js
• Next.js e documentazione MDX
• "Crea un'app Next.js", Next.js