Cómo crear un blog con Next y MDX

Next.js es un marco React que le permite crear aplicaciones estáticas y dinámicas rápidamente. Está listo para la producción y admite la representación del lado del servidor y la generación de sitios estáticos listos para usar, lo que hace que las aplicaciones de Next.js sean rápidas y compatibles con SEO.

En este tutorial, primero explicaré qué es exactamente Next.js y por qué lo usaría en lugar de Create React App o Gatsby. Luego, le mostraré cómo crear un blog en el que pueda escribir y presentar publicaciones con Next.js y MDX.

Para comenzar, necesitará algo de experiencia con React. El conocimiento de Next.js sería útil, pero no es obligatorio. Este tutorial beneficiaría a aquellos que quieren crear un blog (personal u organizacional) usando Next.js o todavía están buscando qué usar.

Sumerjámonos.

¿Qué es Next.js?

Next.js es un marco React creado y mantenido por Vercel. Está construido con React, Node.js, Babel y Webpack. Está listo para la producción porque viene con muchas funciones excelentes que normalmente se configurarían en una aplicación React "vainilla".

El marco Next.js puede representar aplicaciones en el servidor o exportarlas estáticamente. No espera a que el navegador cargue JavaScript para mostrar el contenido, lo que hace que las aplicaciones de Next.js sean compatibles con SEO y ultrarrápidas.

¿Por qué usar Next.js sobre la aplicación Create React?

Create React App es una herramienta útil que ofrece una configuración de compilación moderna sin configuración y sin la molestia de tener que configurar Webpack, Babel, etc. o tener que mantener sus dependencias. Es la forma recomendada de crear aplicaciones React hoy en día. Tiene una plantilla para TypeScript y también viene con React Testing Library.

Sin embargo, si desea crear una aplicación de varias páginas, deberá instalar una biblioteca adicional, como si estuviera renderizando una aplicación React en el servidor. La configuración adicional podría ser un problema y cualquier paquete instalado podría aumentar el tamaño final del paquete de su aplicación.

Este es exactamente el problema que Next.js pretende resolver. Ofrece la mejor experiencia de desarrollador, con todo lo que necesita para la producción. Viene con varias características geniales:

• Exportación estática (prerenderizado)
  Next.js le permite exportar su aplicación Next.js en el momento de la compilación a HTML estático que se ejecuta sin un servidor. Es la forma recomendada de generar su sitio web porque se realiza en el momento de la construcción y no en cada solicitud.
• Renderizado del lado del servidor (pre-renderizado)
  Pre-renderiza páginas a HTML en el servidor en cada solicitud.
• División automática de código
  A diferencia de React, Next.js divide el código automáticamente y solo carga el JavaScript necesario, lo que hace que la aplicación sea más rápida.
• Enrutamiento basado en el sistema de archivos
  Next.js usa el sistema de archivos para habilitar el enrutamiento en la aplicación, lo que significa que todos los archivos del directorio de pages se tratarán automáticamente como una ruta.
• Recarga en caliente de código
  Next.js se basa en React Fast Refresh para recargar en caliente su código, lo que ofrece una excelente experiencia de desarrollador.
• Opciones de estilo
  El marco Next.js tiene soporte integrado para Styled JSX, módulos CSS, Sass, LESS y más.

Next.js contra Gatsby

Gatsby es un generador de sitios estáticos construido sobre React y GraphQL. Es popular y tiene un gran ecosistema que proporciona temas, complementos, recetas, etc.

Los sitios web de Gatsby y Next.js son súper rápidos porque ambos se procesan en el servidor o de forma estática, lo que significa que el código JavaScript no espera a que se cargue el navegador. Comparémoslos según la experiencia del desarrollador.

Gatsby es fácil para empezar, especialmente si ya conoces React. Sin embargo, Gatsby usa GraphQL para consultar datos y páginas locales. Usar Gatsby para crear este blog simple podría ser excesivo porque GraphQL tiene una curva de aprendizaje, y el tiempo de consulta y creación de páginas estáticas sería un poco más largo. Si creó este mismo blog dos veces, primero con Gatsby y luego con Next.js, el creado con Next.js sería mucho más rápido en el momento de la compilación porque usa JavaScript normal para consultar datos y páginas locales.

Espero que aproveche el poder del marco Next.js y vea por qué es mucho más útil que algunas alternativas. También es una excelente opción si su sitio web depende en gran medida del SEO porque su aplicación será rápida y fácil de rastrear para los robots de Google. Esa es la razón por la que usaremos Next.js en este artículo para crear un blog con la biblioteca MDX.

Comencemos configurando una nueva aplicación Next.js.

Configuración

Hay dos formas de crear una aplicación Next.js. Podemos configurar una nueva aplicación manualmente o usar Create Next App. Optaremos por lo último porque es la forma recomendada, y configurará todo automáticamente para nosotros.

Para iniciar una nueva aplicación, ejecute lo siguiente en la interfaz de línea de comandos (CLI):

 npx create-next-app

Una vez inicializado el proyecto, estructuremos la aplicación Next.js de la siguiente manera:

 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

Como puede ver, nuestro proyecto tiene una estructura de archivos simple. Hay tres cosas a tener en cuenta:

• _app.js nos permite agregar algo de contenido al componente App.js para hacerlo global.
• getAllPosts.js nos ayuda a recuperar las publicaciones del blog de la carpeta pages/blog . Por cierto, puedes nombrar el archivo como quieras.
• next.config.js es el archivo de configuración de nuestra aplicación Next.js.

Volveré a cada archivo más tarde y explicaré lo que hace. Por ahora, veamos el paquete MDX.

Instalación de la biblioteca MDX

MDX es un formato que nos permite escribir JSX sin problemas e importar componentes en nuestros archivos Markdown. Nos permite escribir Markdown regulares e incrustar componentes React en nuestros archivos también.

Para habilitar MDX en la aplicación, debemos instalar la biblioteca @mdx-js/loader . Para hacerlo, primero vayamos a la raíz del proyecto y luego ejecutemos este comando en la CLI:

 yarn add @mdx-js/loader

O, si está usando npm:

 npm install @mdx-js/loader

A continuación, instale @next/mdx , que es una biblioteca específica para Next.js. Ejecute este comando en la CLI:

 yarn add @next/mdx

O, para npm:

 npm install @next/mdx

¡Genial! Hemos terminado de configurar. Ensuciémonos las manos y codifiquemos algo significativo.

Configuración del archivo next.config.js

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

Anteriormente en este tutorial, dije que los archivos en la carpeta de pages serían tratados como páginas/rutas por Next.js en el momento de la compilación. De forma predeterminada, Next.js solo seleccionará archivos con extensiones .js o .jsx . Es por eso que necesitamos un archivo de configuración, para agregar algunas personalizaciones al comportamiento predeterminado de Next.js.

El archivo next.config.js le dice al marco que los archivos con .md o .mdx también deben tratarse como páginas/rutas en el momento de la compilación porque la carpeta del blog que contiene los artículos se encuentra en el directorio de pages .

Dicho esto, podemos comenzar a buscar las publicaciones del blog en la siguiente parte.

Obtener publicaciones de blog

Una de las razones por las que crear un blog con Next.js es fácil y simple es que no necesita GraphQL o similar para buscar publicaciones locales. Simplemente puede usar JavaScript normal para obtener los datos.

En 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$/) );

Este archivo puede ser intimidante al principio. Es una función que importa todos los archivos MDX de la carpeta pages/blog , y para cada publicación devuelve un objeto con la ruta del archivo, sin la extensión ( /post-1 ), y los datos de la publicación del blog.

Con eso en su lugar, ahora podemos construir los componentes para diseñar y mostrar datos en nuestra aplicación Next.js.

Construcción de los componentes

En 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> </> ); }

Aquí tenemos el componente Layout , que usaremos como envoltorio para el blog. Recibe los metadatos a mostrar en el encabezado de la página y el componente a mostrar.

En 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> ) }

Este componente es responsable de mostrar una vista previa de una publicación de blog. Recibe el objeto de la post para mostrarlo como accesorios. A continuación, usamos la desestructuración para extraer el link de la publicación y el meta para mostrar desde el objeto. Con eso, ahora podemos pasar los datos a los componentes y manejar el enrutamiento con el componente Link .

En components/BlogPost.js :

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

El componente BlogPost nos ayuda a representar un solo artículo. Recibe la publicación a mostrar y su meta .

Hasta ahora, hemos cubierto mucho, pero no tenemos artículos para mostrar. Arreglemos eso en la siguiente sección.

Escribir publicaciones 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.

Como puede ver, importamos el componente BlogPost , que recibe la meta y el cuerpo de la publicación.

El parámetro children es el cuerpo de la publicación del blog o, para ser precisos, todo lo que viene después del meta . Es la función encargada de rendir el puesto.

Con ese cambio, podemos pasar al archivo index.js y mostrar las publicaciones en la página de inicio.

Mostrar publicaciones

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

Aquí, comenzamos importando el componente Post y las publicaciones obtenidas de la carpeta del blog . A continuación, recorremos la matriz de artículos y, para cada publicación, usamos el componente Post para mostrarla. Una vez hecho esto, ahora podemos buscar las publicaciones y mostrarlas en la página.

Casi terminamos. Sin embargo, el componente Layout aún no se utiliza. Podemos usarlo aquí y envolver nuestros componentes con él. Pero eso no afectará las páginas de artículos. Ahí es donde entra en juego el archivo _app.js . Usemos eso en la siguiente sección.

Usando el archivo _app.js

Aquí, el símbolo de subrayado ( _ ) es realmente importante. Si lo omite, Next.js tratará el archivo como una página/ruta.

 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 el componente de la App para inicializar las páginas. El propósito de este archivo es anularlo y agregar algunos estilos globales al proyecto. Si tiene estilos o datos que deben compartirse en todo el proyecto, colóquelos aquí.

Ahora podemos navegar por la carpeta del proyecto en la CLI y ejecutar el siguiente comando para obtener una vista previa del blog en el navegador:

 yarn dev

O, en npm:

 npm run dev

Si abre https://localhost:3000 en el navegador, podrá ver esto:

¡Genial! Nuestro blog se ve bien. Terminamos de crear la aplicación de blog con Next.js y MDX.

Conclusión

En este tutorial, analizamos Next.js mediante la creación de un blog con la biblioteca MDX. El marco Next.js es una herramienta útil que hace que las aplicaciones React sean amigables con SEO y rápidas. Se puede usar para crear sitios web JAMstack estáticos y dinámicos en muy poco tiempo, porque está listo para producción y viene con algunas características interesantes. Next.js es utilizado ampliamente por grandes empresas y su rendimiento sigue mejorando. Definitivamente es algo que debes revisar para tu próximo proyecto.

Puede obtener una vista previa del proyecto terminado en CodeSandbox.

¡Gracias por leer!

Recursos

Estos útiles recursos lo llevarán más allá del alcance de este tutorial.

• Documentación de Next.js
• Documentación de Next.js y MDX
• “Crear una aplicación Next.js”, Next.js