Guía Markdown de NextJS

NextJS es un framework con el que podrás crear aplicaciones web Full Stack usando React, soportando también todo aquello que puedas necesitar del lado del servidor.

Acerca de NextJS

Con NodeJS podrás crear webs estáticas o también enlazarlas con un servidor. Para usar Markdown con Next.js, debes transformar tu contenido Markdown en algo que React pueda entender. Para poder usar tanto JSX como Markdown puedes usar Remark. Remark es capaz de compilar la sintaxis Markdown, generando código HTML. Soporta desde tablas hasta resaltado de sintaxis.

Para usar Markdown con NextJS también puedes usar el superset de Markdown MDX, que es lo más habitual. De este modo puedes conservar el diseñeo basado en componentes de React usando a su vez documentos Markdown. Por ejemplo, podrás redactar tu sintaxis Markdown en archivos con extensión .mdx e incluir código React en su interior. Luego podrás incluir estos archivos como un componente. Este es el modo del que he creado esta web.

Para crear proyectos con NextJS necesitarás conocimientos de JavaScript y de React. También necesitarás tener Node.js en tu sistema y ciertos conocimientos básicos de la línea de comandos.

Cómo usar MDX con NextJS

Para usar MDX con NextJS necesitarás instalar dos paquetes, que son el loader de MDX y el paquete Next.js + MDX.

El loader de MDX funciona junto con Babel y puedes instalarlo con este comando:

npm install @mdx-js/loader

Luego tendrás que configurar webpack editando el archivo webpack.config.js:

module.exports = {
  module: {
    // …
    rules: [
      // …
      {
        test: /\.mdx?$/,
        use: [
          {
            loader: '@mdx-js/loader',
            /** @type {import('@mdx-js/loader').Options} */
            options: {}
          }
        ]
      }
    ]
  }
}

Podrás instalar el paquete Next.js + MDX con este comando:

npm install @next/mdx @mdx-js/loader @mdx-js/react

Para usarlo bastará con que requieras la libería usando la sentencia require en el archivo next.config.js:

const withMDX = require('@next/mdx')();
module.exports = withMDX();

Si quieres parsear archivos que tengan una extensión diferente a la extensión .mdx, puedes configurarla editando en el archivo next.config.js. En el siguiente ejemplo hemos agregado la extensión .md:

const withMDX = require('@next/mdx')({
  extension: /\.(md|mdx)$/,
});
module.exports = withMDX();

Existen también montones de Plugins que podrás usar. Puedes encontrarlos aqui. Puedes configurar los plugins desde el archivo next.config.js:

const withMDX = require('@next/mdx')({
  options: {
    remarkPlugins: [],
    rehypePlugins: [],
  },
});
module.exports = withMDX();

Soporte Markdown de Next.js

La compatibilidad de Next.js con Markdown es excelente, soportando todos los elementos de la sintaxis básica de Markdown, así como los elementos de la sintaxis extendida, salvo alguna particularidad:

Soporte adicional

Laravel Markdown soporta también otros elementos no estándar de la sintaxis Markdown:

*[HTML]: Hyper Text Markup Language
La especificación HTML es mantenida
por la asociación W3C.

La especificación
<abbr title="Hyper Text Markup Language">HTML</abbr>
es mantenida por la asociación W3C.

Alternativas a NextJS

Si no te convence NextJS porque usa JavaScript, entonces también puedes probar el framework de PHP Laravel. Si tu intención es la de generar sitios estáticos, entonces una de tus mejores opciones es Hugo.

Más información

Si quieres saber más cosas acerca de NextJS, consulta los siguientes enlaces:

• Web: Accede a la web de NextJS
• Repositorio: Accede al repositorio de NextJS
• Documentación: Consulta la documentación de NextJS